@netless/telebox-insider 0.2.24 → 0.2.27

package/dist/telebox-insider.es.js

@@ -1,4 +1,203 @@
-var e=Object.defineProperty,t=Object.defineProperties,i=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable,o=(t,i,s)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[i]=s,a=(e,t)=>{for(var i in t||(t={}))r.call(t,i)&&o(e,i,t[i]);if(s)for(var i of s(t))n.call(t,i)&&o(e,i,t[i]);return e},l=(e,s)=>t(e,i(s));import h,{useRef as c,useEffect as d,useState as u}from"react";var m={exports:{}};!function(e){var t=Object.prototype.hasOwnProperty,i="~";function s(){}function r(e,t,i){this.fn=e,this.context=t,this.once=i||!1}function n(e,t,s,n,o){if("function"!=typeof s)throw new TypeError("The listener must be a function");var a=new r(s,n||e,o),l=i?i+t:t;return e._events[l]?e._events[l].fn?e._events[l]=[e._events[l],a]:e._events[l].push(a):(e._events[l]=a,e._eventsCount++),e}function o(e,t){0==--e._eventsCount?e._events=new s:delete e._events[t]}function a(){this._events=new s,this._eventsCount=0}Object.create&&(s.prototype=Object.create(null),(new s).__proto__||(i=!1)),a.prototype.eventNames=function(){var e,s,r=[];if(0===this._eventsCount)return r;for(s in e=this._events)t.call(e,s)&&r.push(i?s.slice(1):s);return Object.getOwnPropertySymbols?r.concat(Object.getOwnPropertySymbols(e)):r},a.prototype.listeners=function(e){var t=i?i+e:e,s=this._events[t];if(!s)return[];if(s.fn)return[s.fn];for(var r=0,n=s.length,o=new Array(n);r<n;r++)o[r]=s[r].fn;return o},a.prototype.listenerCount=function(e){var t=i?i+e:e,s=this._events[t];return s?s.fn?1:s.length:0},a.prototype.emit=function(e,t,s,r,n,o){var a=i?i+e:e;if(!this._events[a])return!1;var l,h,c=this._events[a],d=arguments.length;if(c.fn){switch(c.once&&this.removeListener(e,c.fn,void 0,!0),d){case 1:return c.fn.call(c.context),!0;case 2:return c.fn.call(c.context,t),!0;case 3:return c.fn.call(c.context,t,s),!0;case 4:return c.fn.call(c.context,t,s,r),!0;case 5:return c.fn.call(c.context,t,s,r,n),!0;case 6:return c.fn.call(c.context,t,s,r,n,o),!0}for(h=1,l=new Array(d-1);h<d;h++)l[h-1]=arguments[h];c.fn.apply(c.context,l)}else{var u,m=c.length;for(h=0;h<m;h++)switch(c[h].once&&this.removeListener(e,c[h].fn,void 0,!0),d){case 1:c[h].fn.call(c[h].context);break;case 2:c[h].fn.call(c[h].context,t);break;case 3:c[h].fn.call(c[h].context,t,s);break;case 4:c[h].fn.call(c[h].context,t,s,r);break;default:if(!l)for(u=1,l=new Array(d-1);u<d;u++)l[u-1]=arguments[u];c[h].fn.apply(c[h].context,l)}}return!0},a.prototype.on=function(e,t,i){return n(this,e,t,i,!1)},a.prototype.once=function(e,t,i){return n(this,e,t,i,!0)},a.prototype.removeListener=function(e,t,s,r){var n=i?i+e:e;if(!this._events[n])return this;if(!t)return o(this,n),this;var a=this._events[n];if(a.fn)a.fn!==t||r&&!a.once||s&&a.context!==s||o(this,n);else{for(var l=0,h=[],c=a.length;l<c;l++)(a[l].fn!==t||r&&!a[l].once||s&&a[l].context!==s)&&h.push(a[l]);h.length?this._events[n]=1===h.length?h[0]:h:o(this,n)}return this},a.prototype.removeAllListeners=function(e){var t;return e?(t=i?i+e:e,this._events[t]&&o(this,t)):(this._events=new s,this._eventsCount=0),this},a.prototype.off=a.prototype.removeListener,a.prototype.addListener=a.prototype.on,a.prefixed=i,a.EventEmitter=a,e.exports=a}(m);var f=m.exports,v=function(){return(v=Object.assign||function(e){for(var t,i=1,s=arguments.length;i<s;i++)for(var r in t=arguments[i])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e}).apply(this,arguments)};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import React, { useRef, useEffect, useState } from "react";
+var fancyScrollbar = ".tele-fancy-scrollbar {\n  overscroll-behavior: contain;\n  overflow: auto;\n  overflow-y: scroll;\n  overflow-y: overlay;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  scrollbar-width: auto;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar {\n  height: 8px;\n  width: 8px;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb {\n  background-color: rgba(68, 78, 96, 0.1);\n  background-color: transparent;\n  border-radius: 4px;\n  transition: background-color 0.4s;\n}\n.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb {\n  background-color: rgba(68, 78, 96, 0.1);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: rgba(68, 78, 96, 0.2);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active {\n  background-color: rgba(68, 78, 96, 0.2);\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical {\n  min-height: 50px;\n}\n.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal {\n  min-width: 50px;\n}";
+var style$3 = '.telebox-box {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 100;\n  transition: width 0.4s cubic-bezier(0.4, 0.9, 0.71, 1.02), height 0.4s cubic-bezier(0.55, 0.82, 0.63, 0.95), opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0), transform 0.4s ease;\n}\n\n.telebox-box-main {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: #f9f9fc;\n  box-shadow: 0px 4px 10px 0px rgba(47, 65, 146, 0.15);\n  border-radius: 6px;\n  border: 1px solid #e3e3ec;\n}\n\n.telebox-titlebar-wrap {\n  flex-shrink: 0;\n  position: relative;\n  z-index: 1;\n}\n\n.telebox-content-wrap {\n  flex: 1;\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.telebox-content {\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n.telebox-footer-wrap {\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.telebox-footer-wrap::before {\n  content: "";\n  display: block;\n  flex: 1;\n}\n\n.telebox-resize-handle {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  position: absolute;\n  z-index: 2147483647;\n}\n\n.telebox-n {\n  width: 100%;\n  height: 5px;\n  left: 0;\n  top: -5px;\n  cursor: n-resize;\n}\n\n.telebox-s {\n  width: 100%;\n  height: 5px;\n  left: 0;\n  bottom: -5px;\n  cursor: s-resize;\n}\n\n.telebox-w {\n  width: 5px;\n  height: 100%;\n  left: -5px;\n  top: 0;\n  cursor: w-resize;\n}\n\n.telebox-e {\n  width: 5px;\n  height: 100%;\n  right: -5px;\n  top: 0;\n  cursor: e-resize;\n}\n\n.telebox-nw {\n  width: 15px;\n  height: 15px;\n  top: -5px;\n  left: -5px;\n  cursor: nw-resize;\n}\n\n.telebox-ne {\n  width: 15px;\n  height: 15px;\n  top: -5px;\n  right: -5px;\n  cursor: ne-resize;\n}\n\n.telebox-se {\n  width: 15px;\n  height: 15px;\n  bottom: -5px;\n  right: -5px;\n  cursor: se-resize;\n}\n\n.telebox-sw {\n  width: 15px;\n  height: 15px;\n  bottom: -5px;\n  left: -5px;\n  cursor: sw-resize;\n}\n\n.telebox-track-mask {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 2147483647;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.0001);\n  cursor: move;\n}\n\n.telebox-cursor-n {\n  cursor: n-resize;\n}\n\n.telebox-cursor-s {\n  cursor: s-resize;\n}\n\n.telebox-cursor-w {\n  cursor: w-resize;\n}\n\n.telebox-cursor-e {\n  cursor: e-resize;\n}\n\n.telebox-cursor-nw {\n  cursor: nw-resize;\n}\n\n.telebox-cursor-ne {\n  cursor: ne-resize;\n}\n\n.telebox-cursor-se {\n  cursor: se-resize;\n}\n\n.telebox-cursor-sw {\n  cursor: sw-resize;\n}\n\n.telebox-maximized .telebox-resize-handles,\n.telebox-no-resize .telebox-resize-handles {\n  display: none;\n}\n\n.telebox-maximized {\n  box-shadow: none;\n  transition: none;\n}\n\n.telebox-minimized {\n  transition: width 0.05s cubic-bezier(0.4, 0.9, 0.71, 1.02), height 0.05s cubic-bezier(0.55, 0.82, 0.63, 0.95), opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0), transform 0.6s ease;\n  opacity: 0;\n  pointer-events: none;\n  user-select: none;\n}\n\n.telebox-transforming {\n  will-change: transform;\n  transition: opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0);\n}\n\n.telebox-readonly .telebox-resize-handle {\n  cursor: initial !important;\n  pointer-events: none !important;\n}\n\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n\n.telebox-color-scheme-dark .telebox-box-main {\n  color: #e9e9e9;\n  background: #212126;\n  border-color: #43434d;\n}';
+var eventemitter3 = { exports: {} };
+(function(module) {
+  var has = Object.prototype.hasOwnProperty, prefix = "~";
+  function Events() {
+  }
+  if (Object.create) {
+    Events.prototype = Object.create(null);
+    if (!new Events().__proto__)
+      prefix = false;
+  }
+  function EE(fn, context, once) {
+    this.fn = fn;
+    this.context = context;
+    this.once = once || false;
+  }
+  function addListener(emitter, event, fn, context, once) {
+    if (typeof fn !== "function") {
+      throw new TypeError("The listener must be a function");
+    }
+    var listener = new EE(fn, context || emitter, once), evt = prefix ? prefix + event : event;
+    if (!emitter._events[evt])
+      emitter._events[evt] = listener, emitter._eventsCount++;
+    else if (!emitter._events[evt].fn)
+      emitter._events[evt].push(listener);
+    else
+      emitter._events[evt] = [emitter._events[evt], listener];
+    return emitter;
+  }
+  function clearEvent(emitter, evt) {
+    if (--emitter._eventsCount === 0)
+      emitter._events = new Events();
+    else
+      delete emitter._events[evt];
+  }
+  function EventEmitter2() {
+    this._events = new Events();
+    this._eventsCount = 0;
+  }
+  EventEmitter2.prototype.eventNames = function eventNames() {
+    var names = [], events, name;
+    if (this._eventsCount === 0)
+      return names;
+    for (name in events = this._events) {
+      if (has.call(events, name))
+        names.push(prefix ? name.slice(1) : name);
+    }
+    if (Object.getOwnPropertySymbols) {
+      return names.concat(Object.getOwnPropertySymbols(events));
+    }
+    return names;
+  };
+  EventEmitter2.prototype.listeners = function listeners(event) {
+    var evt = prefix ? prefix + event : event, handlers = this._events[evt];
+    if (!handlers)
+      return [];
+    if (handlers.fn)
+      return [handlers.fn];
+    for (var i2 = 0, l = handlers.length, ee = new Array(l); i2 < l; i2++) {
+      ee[i2] = handlers[i2].fn;
+    }
+    return ee;
+  };
+  EventEmitter2.prototype.listenerCount = function listenerCount(event) {
+    var evt = prefix ? prefix + event : event, listeners = this._events[evt];
+    if (!listeners)
+      return 0;
+    if (listeners.fn)
+      return 1;
+    return listeners.length;
+  };
+  EventEmitter2.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
+    var evt = prefix ? prefix + event : event;
+    if (!this._events[evt])
+      return false;
+    var listeners = this._events[evt], len = arguments.length, args, i2;
+    if (listeners.fn) {
+      if (listeners.once)
+        this.removeListener(event, listeners.fn, void 0, true);
+      switch (len) {
+        case 1:
+          return listeners.fn.call(listeners.context), true;
+        case 2:
+          return listeners.fn.call(listeners.context, a1), true;
+        case 3:
+          return listeners.fn.call(listeners.context, a1, a2), true;
+        case 4:
+          return listeners.fn.call(listeners.context, a1, a2, a3), true;
+        case 5:
+          return listeners.fn.call(listeners.context, a1, a2, a3, a4), true;
+        case 6:
+          return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true;
+      }
+      for (i2 = 1, args = new Array(len - 1); i2 < len; i2++) {
+        args[i2 - 1] = arguments[i2];
+      }
+      listeners.fn.apply(listeners.context, args);
+    } else {
+      var length = listeners.length, j;
+      for (i2 = 0; i2 < length; i2++) {
+        if (listeners[i2].once)
+          this.removeListener(event, listeners[i2].fn, void 0, true);
+        switch (len) {
+          case 1:
+            listeners[i2].fn.call(listeners[i2].context);
+            break;
+          case 2:
+            listeners[i2].fn.call(listeners[i2].context, a1);
+            break;
+          case 3:
+            listeners[i2].fn.call(listeners[i2].context, a1, a2);
+            break;
+          case 4:
+            listeners[i2].fn.call(listeners[i2].context, a1, a2, a3);
+            break;
+          default:
+            if (!args)
+              for (j = 1, args = new Array(len - 1); j < len; j++) {
+                args[j - 1] = arguments[j];
+              }
+            listeners[i2].fn.apply(listeners[i2].context, args);
+        }
+      }
+    }
+    return true;
+  };
+  EventEmitter2.prototype.on = function on(event, fn, context) {
+    return addListener(this, event, fn, context, false);
+  };
+  EventEmitter2.prototype.once = function once(event, fn, context) {
+    return addListener(this, event, fn, context, true);
+  };
+  EventEmitter2.prototype.removeListener = function removeListener(event, fn, context, once) {
+    var evt = prefix ? prefix + event : event;
+    if (!this._events[evt])
+      return this;
+    if (!fn) {
+      clearEvent(this, evt);
+      return this;
+    }
+    var listeners = this._events[evt];
+    if (listeners.fn) {
+      if (listeners.fn === fn && (!once || listeners.once) && (!context || listeners.context === context)) {
+        clearEvent(this, evt);
+      }
+    } else {
+      for (var i2 = 0, events = [], length = listeners.length; i2 < length; i2++) {
+        if (listeners[i2].fn !== fn || once && !listeners[i2].once || context && listeners[i2].context !== context) {
+          events.push(listeners[i2]);
+        }
+      }
+      if (events.length)
+        this._events[evt] = events.length === 1 ? events[0] : events;
+      else
+        clearEvent(this, evt);
+    }
+    return this;
+  };
+  EventEmitter2.prototype.removeAllListeners = function removeAllListeners(event) {
+    var evt;
+    if (event) {
+      evt = prefix ? prefix + event : event;
+      if (this._events[evt])
+        clearEvent(this, evt);
+    } else {
+      this._events = new Events();
+      this._eventsCount = 0;
+    }
+    return this;
+  };
+  EventEmitter2.prototype.off = EventEmitter2.prototype.removeListener;
+  EventEmitter2.prototype.addListener = EventEmitter2.prototype.on;
+  EventEmitter2.prefixed = prefix;
+  EventEmitter2.EventEmitter = EventEmitter2;
+  {
+    module.exports = EventEmitter2;
+  }
+})(eventemitter3);
+var EventEmitter = eventemitter3.exports;
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -12,5 +211,2913 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
 LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */function p(e,t){var i={};for(var s in e)Object.prototype.hasOwnProperty.call(e,s)&&t.indexOf(s)<0&&(i[s]=e[s]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(s=Object.getOwnPropertySymbols(e);r<s.length;r++)t.indexOf(s[r])<0&&Object.prototype.propertyIsEnumerable.call(e,s[r])&&(i[s[r]]=e[s[r]])}return i}var g=0,b="undefined"!=typeof window&&void 0!==window.requestAnimationFrame?function(e){return window.requestAnimationFrame(e)}:function(e){var t=Date.now(),i=Math.max(0,16.7-(t-g));g=t+i,setTimeout((function(){return e(g)}),i)},x=1/60*1e3,y=!0,w=!1,$=!1,C={delta:0,timestamp:0},z=["read","update","preRender","render","postRender"],B=function(e){return w=e},_=z.reduce((function(e,t){var i,s,r,n,o,a,l,h,c;return e[t]=(i=B,s=[],r=[],n=0,o=!1,a=0,l=new WeakSet,h=new WeakSet,c={cancel:function(e){var t=r.indexOf(e);l.add(e),-1!==t&&r.splice(t,1)},process:function(e){var t,d;if(o=!0,s=(t=[r,s])[0],(r=t[1]).length=0,n=s.length)for(a=0;a<n;a++)(d=s[a])(e),!0!==h.has(d)||l.has(d)||(c.schedule(d),i(!0));o=!1},schedule:function(e,t,i){void 0===t&&(t=!1),void 0===i&&(i=!1);var a=i&&o,c=a?s:r;l.delete(e),t&&h.add(e),-1===c.indexOf(e)&&(c.push(e),a&&(n=s.length))}}),e}),{}),M=z.reduce((function(e,t){var i=_[t];return e[t]=function(e,t,s){return void 0===t&&(t=!1),void 0===s&&(s=!1),w||S(),i.schedule(e,t,s),e},e}),{}),E=function(e){return _[e].process(C)},k=function(e){w=!1,C.delta=y?x:Math.max(Math.min(e-C.timestamp,40),1),y||(x=C.delta),C.timestamp=e,$=!0,z.forEach(E),$=!1,w&&(y=!1,b(k))},S=function(){w=!0,y=!0,$||b(k)},R=function(){return(R=Object.assign||function(e){for(var t,i=1,s=arguments.length;i<s;i++)for(var r in t=arguments[i])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e}).apply(this,arguments)},N=function(e,t){return function(i){return Math.max(Math.min(i,t),e)}},T=function(e){return e%1?Number(e.toFixed(5)):e},L=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i,I={test:function(e){return"number"==typeof e},parse:parseFloat,transform:function(e){return e}},O=R(R({},I),{transform:N(0,1)}),D=R(R({},I),{default:1}),A=function(e){return{test:function(t){return"string"==typeof t&&t.endsWith(e)&&1===t.split(" ").length},parse:parseFloat,transform:function(t){return""+t+e}}},V=A("deg"),H=A("%"),W=A("px"),j=R(R({},H),{parse:function(e){return H.parse(e)/100},transform:function(e){return H.transform(100*e)}}),P=N(0,255),Y=function(e){return void 0!==e.red},X=function(e){return void 0!==e.hue};var F=function(e){return function(t){if("string"!=typeof t)return t;for(var i={},s=function(e){return e.substring(e.indexOf("(")+1,e.lastIndexOf(")"))}(t).replace(/(,|\/)/g," ").split(/ \s*/),r=0;r<4;r++)i[e[r]]=void 0!==s[r]?parseFloat(s[r]):1;return i}},Z=R(R({},I),{transform:function(e){return Math.round(P(e))}});function q(e,t){return e.startsWith(t)&&L.test(e)}var G,U={test:function(e){return"string"==typeof e?q(e,"rgb"):Y(e)},parse:F(["red","green","blue","alpha"]),transform:function(e){var t=e.red,i=e.green,s=e.blue,r=e.alpha,n=void 0===r?1:r;return function(e){var t=e.red,i=e.green,s=e.blue,r=e.alpha;return"rgba("+t+", "+i+", "+s+", "+(void 0===r?1:r)+")"}({red:Z.transform(t),green:Z.transform(i),blue:Z.transform(s),alpha:T(O.transform(n))})}},J={test:function(e){return"string"==typeof e?q(e,"hsl"):X(e)},parse:F(["hue","saturation","lightness","alpha"]),transform:function(e){var t=e.hue,i=e.saturation,s=e.lightness,r=e.alpha,n=void 0===r?1:r;return function(e){var t=e.hue,i=e.saturation,s=e.lightness,r=e.alpha;return"hsla("+t+", "+i+", "+s+", "+(void 0===r?1:r)+")"}({hue:Math.round(t),saturation:H.transform(T(i)),lightness:H.transform(T(s)),alpha:T(O.transform(n))})}},Q=R(R({},U),{test:function(e){return"string"==typeof e&&q(e,"#")},parse:function(e){var t="",i="",s="";return e.length>4?(t=e.substr(1,2),i=e.substr(3,2),s=e.substr(5,2)):(t=e.substr(1,1),i=e.substr(2,1),s=e.substr(3,1),t+=t,i+=i,s+=s),{red:parseInt(t,16),green:parseInt(i,16),blue:parseInt(s,16),alpha:1}}}),K={test:function(e){return"string"==typeof e&&L.test(e)||Y(e)||X(e)},parse:function(e){return U.test(e)?U.parse(e):J.test(e)?J.parse(e):Q.test(e)?Q.parse(e):e},transform:function(e){return Y(e)?U.transform(e):X(e)?J.transform(e):e}},ee=function(e){var t=e.onRead,i=e.onRender,s=e.uncachedValues,r=void 0===s?new Set:s,n=e.useCache,o=void 0===n||n;return function(e){void 0===e&&(e={});var s=p(e,[]),n={},a=[],l=!1;function h(e,t){e.startsWith("--")&&(s.hasCSSVariable=!0);var i=n[e];n[e]=t,n[e]!==i&&(-1===a.indexOf(e)&&a.push(e),l||(l=!0,M.render(c.render)))}var c={get:function(e,i){return void 0===i&&(i=!1),!i&&o&&!r.has(e)&&void 0!==n[e]?n[e]:t(e,s)},set:function(e,t){if("string"==typeof e)h(e,t);else for(var i in e)h(i,e[i]);return this},render:function(e){return void 0===e&&(e=!1),(l||!0===e)&&(i(n,s,a),l=!1,a.length=0),this}};return c}},te=/([a-z])([A-Z])/g,ie=function(e){return e.replace(te,"$1-$2").toLowerCase()},se=new Map,re=new Map,ne=["Webkit","Moz","O","ms",""],oe=ne.length,ae="undefined"!=typeof document,le=function(e,t){return re.set(e,ie(t))},he=function(e,t){void 0===t&&(t=!1);var i=t?re:se;return i.has(e)||(ae?function(e){G=G||document.createElement("div");for(var t=0;t<oe;t++){var i=ne[t],s=""===i,r=s?e:i+e.charAt(0).toUpperCase()+e.slice(1);if(r in G.style||s){if(s&&"clipPath"===e&&re.has(e))return;se.set(e,r),le(e,(s?"":"-")+ie(r))}}}(e):function(e){le(e,e)}(e)),i.get(e)||e},ce=["","X","Y","Z"],de=["translate","scale","rotate","skew","transformPerspective"].reduce((function(e,t){return ce.reduce((function(e,i){return e.push(t+i),e}),e)}),["x","y","z"]),ue=de.reduce((function(e,t){return e[t]=!0,e}),{});function me(e){return!0===ue[e]}function fe(e,t){return de.indexOf(e)-de.indexOf(t)}var ve=new Set(["originX","originY","originZ"]);function pe(e){return ve.has(e)}var ge=v(v({},I),{transform:Math.round}),be={color:K,backgroundColor:K,outlineColor:K,fill:K,stroke:K,borderColor:K,borderTopColor:K,borderRightColor:K,borderBottomColor:K,borderLeftColor:K,borderWidth:W,borderTopWidth:W,borderRightWidth:W,borderBottomWidth:W,borderLeftWidth:W,borderRadius:W,radius:W,borderTopLeftRadius:W,borderTopRightRadius:W,borderBottomRightRadius:W,borderBottomLeftRadius:W,width:W,maxWidth:W,height:W,maxHeight:W,size:W,top:W,right:W,bottom:W,left:W,padding:W,paddingTop:W,paddingRight:W,paddingBottom:W,paddingLeft:W,margin:W,marginTop:W,marginRight:W,marginBottom:W,marginLeft:W,rotate:V,rotateX:V,rotateY:V,rotateZ:V,scale:D,scaleX:D,scaleY:D,scaleZ:D,skew:V,skewX:V,skewY:V,distance:W,translateX:W,translateY:W,translateZ:W,x:W,y:W,z:W,perspective:W,opacity:O,originX:j,originY:j,originZ:W,zIndex:ge,fillOpacity:O,strokeOpacity:O,numOctaves:ge},xe=function(e){return be[e]},ye=function(e,t){return t&&"number"==typeof e?t.transform(e):e},we=new Set(["scrollLeft","scrollTop"]),$e=new Set(["scrollLeft","scrollTop","transform"]),Ce={x:"translateX",y:"translateY",z:"translateZ"};function ze(e){return"function"==typeof e}function Be(e,t,i,s,r,n,o,a){void 0===t&&(t=!0),void 0===i&&(i={}),void 0===s&&(s={}),void 0===r&&(r={}),void 0===n&&(n=[]),void 0===o&&(o=!1),void 0===a&&(a=!0);var l=!0,h=!1,c=!1;for(var d in e){var u=e[d],m=xe(d),f=ye(u,m);me(d)?(h=!0,s[d]=f,n.push(d),l&&(m.default&&u!==m.default||!m.default&&0!==u)&&(l=!1)):pe(d)?(r[d]=f,c=!0):$e.has(d)&&ze(f)||(i[he(d,o)]=f)}return(h||"function"==typeof e.transform)&&(i.transform=function(e,t,i,s,r,n){void 0===n&&(n=!0);var o="",a=!1;i.sort(fe);for(var l=i.length,h=0;h<l;h++){var c=i[h];o+=(Ce[c]||c)+"("+t[c]+") ",a="z"===c||a}return!a&&r?o+="translateZ(0)":o=o.trim(),ze(e.transform)?o=e.transform(t,s?"":o):n&&s&&(o="none"),o}(e,s,n,l,t,a)),c&&(i.transformOrigin=(r.originX||"50%")+" "+(r.originY||"50%")+" "+(r.originZ||0)),i}function _e(e){var t=void 0===e?{}:e,i=t.enableHardwareAcceleration,s=void 0===i||i,r=t.isDashCase,n=void 0===r||r,o=t.allowTransformNone,a=void 0===o||o,l={},h={},c={},d=[];return function(e){return d.length=0,Be(e,s,l,h,c,d,n,a),l}}var Me=ee({onRead:function(e,t){var i=t.element,s=t.preparseOutput,r=xe(e);if(me(e))return r&&r.default||0;if(we.has(e))return i[e];var n=window.getComputedStyle(i,null).getPropertyValue(he(e,!0))||0;return s&&r&&r.test(n)&&r.parse?r.parse(n):n},onRender:function(e,t,i){var s=t.element,r=t.buildStyles,n=t.hasCSSVariable;if(Object.assign(s.style,r(e)),n)for(var o=i.length,a=0;a<o;a++){var l=i[a];l.startsWith("--")&&s.style.setProperty(l,e[l])}-1!==i.indexOf("scrollLeft")&&(s.scrollLeft=e.scrollLeft),-1!==i.indexOf("scrollTop")&&(s.scrollTop=e.scrollTop)},uncachedValues:we});var Ee=new Set(["baseFrequency","diffuseConstant","kernelMatrix","kernelUnitLength","keySplines","keyTimes","limitingConeAngle","markerHeight","markerWidth","numOctaves","targetX","targetY","surfaceScale","specularConstant","specularExponent","stdDeviation","tableValues"]),ke=function(e,t){return W.transform(e*t)},Se={x:0,y:0,width:0,height:0};function Re(e,t,i){return"string"==typeof e?e:W.transform(t+i*e)}var Ne={enableHardwareAcceleration:!1,isDashCase:!1};function Te(e,t,i,s,r,n){void 0===t&&(t=Se),void 0===s&&(s=_e(Ne)),void 0===r&&(r={style:{}}),void 0===n&&(n=!0);var o=e.attrX,a=e.attrY,l=e.originX,h=e.originY,c=e.pathLength,d=e.pathSpacing,u=void 0===d?1:d,m=e.pathOffset,f=void 0===m?0:m,v=s(p(e,["attrX","attrY","originX","originY","pathLength","pathSpacing","pathOffset"]));for(var g in v){if("transform"===g)r.style.transform=v[g];else r[n&&!Ee.has(g)?ie(g):g]=v[g]}return(void 0!==l||void 0!==h||v.transform)&&(r.style.transformOrigin=function(e,t,i){return Re(t,e.x,e.width)+" "+Re(i,e.y,e.height)}(t,void 0!==l?l:.5,void 0!==h?h:.5)),void 0!==o&&(r.x=o),void 0!==a&&(r.y=a),void 0!==i&&void 0!==c&&(r[n?"stroke-dashoffset":"strokeDashoffset"]=ke(-f,i),r[n?"stroke-dasharray":"strokeDasharray"]=ke(c,i)+" "+ke(u,i)),r}function Le(e,t,i){void 0===i&&(i=!0);var s={style:{}},r=_e(Ne);return function(n){return Te(n,e,t,r,s,i)}}var Ie=ee({onRead:function(e,t){var i=t.element;if(me(e=Ee.has(e)?e:ie(e))){var s=xe(e);return s&&s.default||0}return i.getAttribute(e)},onRender:function(e,t){var i=t.element,s=(0,t.buildAttrs)(e);for(var r in s)"style"===r?Object.assign(i.style,s.style):i.setAttribute(r,s[r])}}),Oe=ee({useCache:!1,onRead:function(e){return"scrollTop"===e?window.pageYOffset:window.pageXOffset},onRender:function(e){var t=e.scrollTop,i=void 0===t?0:t,s=e.scrollLeft,r=void 0===s?0:s;return window.scrollTo(r,i)}}),De=new WeakMap,Ae=function(e,t){var i,s,r,n;return e===window?i=Oe(e):!function(e){return e instanceof HTMLElement||"function"==typeof e.click}(e)?function(e){return e instanceof SVGElement||"ownerSVGElement"in e}(e)&&(r=function(e){try{return function(e){return"function"==typeof e.getBBox?e.getBBox():e.getBoundingClientRect()}(e)}catch(t){return{x:0,y:0,width:0,height:0}}}(s=e),n=function(e){return"path"===e.tagName}(s)&&s.getTotalLength?s.getTotalLength():void 0,i=Ie({element:s,buildAttrs:Le(r,n)})):i=function(e,t){void 0===t&&(t={});var i=t.enableHardwareAcceleration,s=t.allowTransformNone,r=p(t,["enableHardwareAcceleration","allowTransformNone"]);return Me(v({element:e,buildStyles:_e({enableHardwareAcceleration:i,allowTransformNone:s}),preparseOutput:!0},r))}(e,t),De.set(e,i),i};function Ve(e,t){return function(e,t){return De.has(e)?De.get(e):Ae(e,t)}("string"==typeof e?document.querySelector(e):e,t)}var He=function(e,t,i,s){var r=i?i.call(s,e,t):void 0;if(void 0!==r)return!!r;if(e===t)return!0;if("object"!=typeof e||!e||"object"!=typeof t||!t)return!1;var n=Object.keys(e),o=Object.keys(t);if(n.length!==o.length)return!1;for(var a=Object.prototype.hasOwnProperty.bind(t),l=0;l<n.length;l++){var h=n[l];if(!a(h))return!1;var c=e[h],d=t[h];if(!1===(r=i?i.call(s,c,d,h):void 0)||void 0===r&&c!==d)return!1}return!0};const We="!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",je=We.length,Pe=Array(20),Ye=()=>{for(let e=0;e<20;e++)Pe[e]=We.charAt(Math.random()*je);return Pe.join("")};class Xe{constructor(){this.disposers=new Map}add(e,t=Ye()){return this.flush(t),this.disposers.set(t,e()),t}addDisposer(e,t=Ye()){return this.flush(t),this.disposers.set(t,e),t}addEventListener(e,t,i,s,r=Ye()){return this.add((()=>(e.addEventListener(t,i,s),()=>e.removeEventListener(t,i,s))),r),r}setTimeout(e,t,i=Ye()){return this.add((()=>{const s=window.setTimeout((()=>{this.remove(i),e()}),t);return()=>window.clearTimeout(s)}),i)}setInterval(e,t,i=Ye()){return this.add((()=>{const i=window.setInterval(e,t);return()=>window.clearInterval(i)}),i)}remove(e){const t=this.disposers.get(e);return this.disposers.delete(e),t}flush(e){const t=this.remove(e);if(t)try{t()}catch(i){console.error(i)}}flushAll(){this.disposers.forEach((e=>{try{e()}catch(t){console.error(t)}})),this.disposers.clear()}}var Fe=Object.defineProperty,Ze=("undefined"!=typeof require&&require,(e,t,i)=>{return n=i,(r="symbol"!=typeof t?t+"":t)in(s=e)?Fe(s,r,{enumerable:!0,configurable:!0,writable:!0,value:n}):s[r]=n,i;var s,r,n});class qe{constructor(e,t){Ze(this,"_value"),Ze(this,"_beforeDestroys"),Ze(this,"_subscribers"),this._value=e,t&&(this.compare=t)}get value(){return this._value}setValue(e,t){if(!this.compare(e,this._value)){const i=this._value;this._value=e,this._subscribers&&this._subscribers.forEach((s=>s(e,i,t)))}}reaction(e){return this._subscribers||(this._subscribers=new Set),this._subscribers.add(e),()=>{this._subscribers&&this._subscribers.delete(e)}}subscribe(e,t){const i=this.reaction(e);return e(this._value,void 0,t),i}derive(e,t,i){const s=new qe(e(this.value,void 0,i),t),r=this.reaction(((t,i,r)=>{s.setValue(e(t,i,r))}));return s.addBeforeDestroy(r),s}destroy(){this._beforeDestroys&&(this._beforeDestroys.forEach((e=>e())),this._beforeDestroys.clear()),this._subscribers&&this._subscribers.clear()}addBeforeDestroy(e){return this._beforeDestroys||(this._beforeDestroys=new Set),this._beforeDestroys.add(e),()=>{this._beforeDestroys&&this._beforeDestroys.delete(e)}}compare(e,t){return e===t}}function Ge(e,t){Object.keys(t).forEach((i=>{!function(e,t,i){var s;Object.defineProperties(e,{[t]:{get:()=>i.value},[`_${t}$`]:{value:i},[`set${s=t,s[0].toUpperCase()+s.slice(1)}`]:{value:(e,t)=>i.setValue(e,t)}})}(e,i,t[i])}))}function Ue(e){const t=t=>{const i=e.addDisposer((()=>{t.destroy()}));return t.addBeforeDestroy((()=>{e.remove(i)})),t};return{bindSideEffect:t,combine:(e,i,s,r)=>t(function(e,t,i,s){let r=e.map((e=>e.value));const n=new qe(t(r,void 0,s),i);return e.forEach(((e,i)=>{const s=e.reaction(((e,s,o)=>{const a=r.slice();a[i]=e;const l=r;r=a,n.setValue(t(a,l,o),o)}));n.addBeforeDestroy(s)})),n}(e,i,s,r)),createVal:(e,i)=>t(new qe(e,i))}}var Je,Qe,Ke,et,tt,it,st,rt,nt,ot;(Qe=Je||(Je={})).Light="light",Qe.Dark="dark",Qe.Auto="auto",(et=Ke||(Ke={})).Normal="normal",et.Minimized="minimized",et.Maximized="maximized",(it=tt||(tt={})).DarkMode="dark_mode",it.PrefersColorScheme="prefers_color_scheme",it.Close="close",it.Focus="focus",it.Blur="blur",it.Move="move",it.Resize="resize",it.IntrinsicMove="intrinsic_move",it.IntrinsicResize="intrinsic_resize",it.VisualResize="visual_resize",it.ZIndex="z_index",it.State="state",it.Minimized="minimized",it.Maximized="maximized",it.Readonly="readonly",it.Destroyed="destroyed",(rt=st||(st={})).Close="close",rt.Maximize="maximize",rt.Minimize="minimize",(ot=nt||(nt={})).North="n",ot.South="s",ot.West="w",ot.East="e",ot.NorthWest="nw",ot.NorthEast="ne",ot.SouthEast="se",ot.SouthWest="sw";const at="dh";function lt(e,t,i){return Math.min(Math.max(e,t),i)}function ht(e){e.stopPropagation(),e.cancelable&&e.preventDefault()}function ct(e){return e.touches?e.touches[0]:e}function dt(){return Date.now().toString().slice(6)+Math.random().toString().slice(2,8)}let ut=1;function mt(){return"New Box "+ut++}function ft(e){return Boolean(e)}function vt(e){return!e}class pt{constructor({readonly:e=!1,title:t,buttons:i,onEvent:s,onDragStart:r,namespace:n="telebox",state:o=Ke.Normal}={}){this.$btns=[],this.sideEffect=new Xe,this.lastTitleBarClick={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarClick=e=>{var t;if(this.readonly)return;if(0!==e.button)return;if(null==(t=e.target.dataset)?void 0:t.teleTitleBarNoDblClick)return;ht(e);const i=Date.now();i-this.lastTitleBarClick.timestamp<=500?Math.abs(e.clientX-this.lastTitleBarClick.clientX)<=3&&Math.abs(e.clientY-this.lastTitleBarClick.clientY)<=3&&this.onEvent&&this.onEvent({type:st.Maximize}):this.onDragStart&&this.onDragStart(e),this.lastTitleBarClick.timestamp=i,this.lastTitleBarClick.clientX=e.clientX,this.lastTitleBarClick.clientY=e.clientY},this.lastTitleBarTouch={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarTouch=e=>{var t;if(this.readonly)return;if(null==(t=e.target.dataset)?void 0:t.teleTitleBarNoDblClick)return;ht(e);const i=Date.now(),{clientX:s=this.lastTitleBarTouch.clientX+100,clientY:r=this.lastTitleBarTouch.clientY+100}=e.touches[0]||{};i-this.lastTitleBarTouch.timestamp<=500?Math.abs(s-this.lastTitleBarTouch.clientX)<=3&&Math.abs(r-this.lastTitleBarTouch.clientY)<=3&&this.onEvent&&this.onEvent({type:st.Maximize}):this.onDragStart&&this.onDragStart(e),this.lastTitleBarTouch.timestamp=i,this.lastTitleBarTouch.clientX=s,this.lastTitleBarTouch.clientY=r},this.readonly=e,this.onEvent=s,this.onDragStart=r,this.namespace=n,this.title=t,this.state=o,this.buttons=i||[{type:st.Minimize,iconClassName:this.wrapClassName("titlebar-icon-minimize")},{type:st.Maximize,iconClassName:this.wrapClassName("titlebar-icon-maximize"),isActive:e=>e===Ke.Maximized},{type:st.Close,iconClassName:this.wrapClassName("titlebar-icon-close")}],this.$dragArea=this.renderDragArea()}setTitle(e){this.title=e,this.$title&&(this.$title.textContent=e,this.$title.title=e)}setState(e){this.state!==e&&(this.state=e,this.buttons.forEach(((t,i)=>{t.isActive&&this.$btns[i].classList.toggle("is-active",t.isActive(e))})))}setReadonly(e){this.readonly!==e&&(this.readonly=e)}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",this.$title=document.createElement("h1"),this.$title.className=this.wrapClassName("title"),this.$title.dataset.teleBoxHandle="dh",this.title&&(this.$title.textContent=this.title,this.$title.title=this.title),e.appendChild(this.$title),e.appendChild(this.$dragArea);const t=document.createElement("div");t.className=this.wrapClassName("titlebar-btns"),this.buttons.forEach((({iconClassName:e,isActive:i},s)=>{const r=String(s),n=document.createElement("button");n.className=`${this.wrapClassName("titlebar-btn")} ${e}`,n.dataset.teleTitleBarBtnIndex=r,n.dataset.teleTitleBarNoDblClick="true",i&&n.classList.toggle("is-active",i(this.state)),this.$btns.push(n),t.appendChild(n)})),this.sideEffect.addEventListener(t,"click",(e=>{var t;if(this.readonly)return;const i=e.target,s=Number(null==(t=i.dataset)?void 0:t.teleTitleBarBtnIndex);if(!Number.isNaN(s)&&s<this.buttons.length){ht(e);const t=this.buttons[s];this.onEvent&&this.onEvent({type:t.type,value:t.value})}})),this.$titleBar.appendChild(e),this.$titleBar.appendChild(t)}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.$title=void 0,this.$btns.length=0,this.onDragStart=void 0,this.onEvent=void 0)}}class gt{constructor({id:e=dt(),title:t=mt(),prefersColorScheme:i=Je.Light,darkMode:s,visible:r=!0,width:n=.5,height:o=.5,minWidth:a=0,minHeight:l=0,x:h=.1,y:c=.1,minimized:d=!1,maximized:u=!1,readonly:m=!1,resizable:v=!0,draggable:p=!0,fence:g=!0,fixRatio:b=!1,focus:x=!1,zIndex:y=100,namespace:w="telebox",titleBar:$,content:C,footer:z,styles:B,containerRect:_={x:0,y:0,width:window.innerWidth,height:window.innerHeight},collectorRect:M}={}){this._renderSideEffect=new Xe,this.handleTrackStart=e=>{var t;return null==(t=this._handleTrackStart)?void 0:t.call(this,e)},this._sideEffect=new Xe,this._valSideEffectBinder=Ue(this._sideEffect);const{combine:E,createVal:k}=this._valSideEffectBinder;this.id=e,this.namespace=w,this.events=new f,this._delegateEvents=new f;const S=k(i);S.reaction(((e,t,i)=>{i||this.events.emit(tt.PrefersColorScheme,e)}));const R=k(Boolean(s));null==s&&S.subscribe(((e,t,i)=>{this._sideEffect.add((()=>{if("auto"===e){const e=window.matchMedia("(prefers-color-scheme: dark)");if(e){R.setValue(e.matches,i);const t=e=>{R.setValue(e.matches,i)};return e.addListener(t),()=>e.removeListener(t)}return bt}return R.setValue("dark"===e,i),bt}),"prefers-color-scheme")})),R.reaction(((e,t,i)=>{i||this.events.emit(tt.DarkMode,e)}));const N=k(_,He),T=k(M,He),L=k(t),I=k(r);I.reaction(((e,t,i)=>{i||e||this.events.emit(tt.Close)}));const O=k(m);O.reaction(((e,t,i)=>{i||this.events.emit(tt.Readonly,e)}));const D=k(v),A=k(p),V=k(g),H=k(b),W=k(y);W.reaction(((e,t,i)=>{i||this.events.emit(tt.ZIndex,e)}));const j=k(x);j.reaction(((e,t,i)=>{i||this.events.emit(e?tt.Focus:tt.Blur)}));const P=k(d);P.reaction(((e,t,i)=>{i||this.events.emit(tt.Minimized,e)}));const Y=k(u);Y.reaction(((e,t,i)=>{i||this.events.emit(tt.Maximized,e)}));const X=E([P,Y],(([e,t])=>e?Ke.Minimized:t?Ke.Maximized:Ke.Normal));X.reaction(((e,t,i)=>{i||this.events.emit(tt.State,e)}));const F=k({width:lt(a,0,1),height:lt(l,0,1)},He),Z=k({width:lt(n,F.value.width,1),height:lt(o,F.value.height,1)},He);F.reaction(((e,t,i)=>{Z.setValue({width:lt(n,e.width,1),height:lt(o,e.height,1)},i)})),Z.reaction(((e,t,i)=>{i||this.events.emit(tt.IntrinsicResize,e)}));const q=E([Z,Y],(([e,t])=>t?{width:1,height:1}:e),He);q.reaction(((e,t,i)=>{i||this.events.emit(tt.Resize,e)}));const G=E([q,P,N,T],(([e,t,i,s])=>t&&s?{width:s.width/e.width/i.width,height:s.height/e.height/i.height}:e),He);G.reaction(((e,t,i)=>{i||this.events.emit(tt.VisualResize,e)}));const U=k({x:lt(h,0,1),y:lt(c,0,1)},He);U.reaction(((e,t,i)=>{i||this.events.emit(tt.IntrinsicMove,e)}));const J=E([U,Z,N,T,P,Y],(([e,t,i,s,r,n])=>r&&s?n?{x:(s.x+s.width/2)/i.width-.5,y:(s.y+s.height/2)/i.height-.5}:{x:(s.x+s.width/2)/i.width-t.width/2,y:(s.y+s.height/2)/i.height-t.height/2}:n?{x:0,y:0}:e),He);J.reaction(((e,t,i)=>{i||this.events.emit(tt.Move,e)})),this.titleBar=$||new pt({readonly:O.value,title:L.value,namespace:this.namespace,onDragStart:e=>{var t;return null==(t=this._handleTrackStart)?void 0:t.call(this,e)},onEvent:e=>{if(this._delegateEvents.listeners.length>0)this._delegateEvents.emit(e.type);else switch(e.type){case st.Maximize:Y.setValue(!Y.value);break;case st.Minimize:P.setValue(!0);break;case st.Close:I.setValue(!1);break;default:console.error("Unsupported titleBar event:",e)}}}),O.reaction((e=>{this.titleBar.setReadonly(e)}));const Q=k(C),K=k(z),ee=k(B);Ge(this,{prefersColorScheme:S,darkMode:R,containerRect:N,collectorRect:T,title:L,visible:I,readonly:O,resizable:D,draggable:A,fence:V,fixRatio:H,focus:j,zIndex:W,minimized:P,maximized:Y,$userContent:Q,$userFooter:K,$userStyles:ee}),this._state$=X,this._minSize$=F,this._size$=q,this._intrinsicSize$=Z,this._visualSize$=G,this._coord$=J,this._intrinsicCoord$=U,this.fixRatio&&this.transform(J.value.x,J.value.y,q.value.width,q.value.height,!0),this.$box=this.render()}get darkMode(){return this._darkMode$.value}get state(){return this._state$.value}setState(e,t=!1){switch(e){case Ke.Maximized:this.setMinimized(!1,t),this.setMaximized(!0,t);break;case Ke.Minimized:this.setMinimized(!0,t),this.setMaximized(!1,t);break;default:this.setMinimized(!1,t),this.setMaximized(!1,t)}return this}get minWidth(){return this._minSize$.value.width}get minHeight(){return this._minSize$.value.height}setMinWidth(e,t=!1){return this._minSize$.setValue({width:e,height:this.minHeight},t),this}setMinHeight(e,t=!1){return this._minSize$.setValue({width:this.minWidth,height:e},t),this}get intrinsicWidth(){return this._intrinsicSize$.value.width}get intrinsicHeight(){return this._intrinsicSize$.value.height}resize(e,t,i=!1){return this._intrinsicSize$.setValue({width:e,height:t},i),this}get width(){return this._size$.value.width}get height(){return this._size$.value.height}get absoluteWidth(){return this.width*this.containerRect.width}get absoluteHeight(){return this.height*this.containerRect.height}get visualWidth(){return this._visualSize$.value.width}get visualHeight(){return this._visualSize$.value.height}get intrinsicX(){return this._intrinsicCoord$.value.x}get intrinsicY(){return this._intrinsicCoord$.value.y}move(e,t,i=!1){return this._intrinsicCoord$.setValue({x:e,y:t},i),this}get x(){return this._coord$.value.x}get y(){return this._coord$.value.y}transform(e,t,i,s,r=!1){if(this.fixRatio){const e=this.intrinsicHeight/this.intrinsicWidth*i;t!==this.intrinsicY&&(t-=e-s),s=e}return t<0&&(t=0,s>this.intrinsicHeight&&(s=this.intrinsicHeight)),this._intrinsicCoord$.setValue({x:i>=this.minWidth?e:this.intrinsicX,y:s>=this.minHeight?t:this.intrinsicY},r),this._intrinsicSize$.setValue({width:lt(i,this.minWidth,1),height:lt(s,this.minHeight,1)},r),this}mount(e){return e.appendChild(this.render()),this}unmount(){return this.$box&&this.$box.remove(),this}mountContent(e){return this.set$userContent(e),this}unmountContent(){return this.set$userContent(void 0),this}mountFooter(e){return this.set$userFooter(e),this}unmountFooter(){return this.set$userFooter(void 0),this}getUserStyles(){return this.$userStyles}mountStyles(e){let t;return"string"==typeof e?(t=document.createElement("style"),t.textContent=e):t=e,this.set$userStyles(t),this}unmountStyles(){return this.set$userStyles(void 0),this}render(e){if(e){if(e===this.$box)return this.$box;this.$box=e}else{if(this.$box)return this.$box;this.$box=document.createElement("div")}this._renderSideEffect.flushAll(),this.$box.classList.add(this.wrapClassName("box"));const t=(e,t,i,s=ft)=>this._renderSideEffect.add((()=>{const r=this.wrapClassName(i);return t.subscribe((t=>{e.classList.toggle(r,s(t))}))}));t(this.$box,this._readonly$,"readonly"),t(this.$box,this._draggable$,"no-drag",vt),t(this.$box,this._resizable$,"no-resize",vt),t(this.$box,this._focus$,"blur",vt),t(this.$box,this._darkMode$,"color-scheme-dark"),t(this.$box,this._darkMode$,"color-scheme-light",vt),this._renderSideEffect.add((()=>{const e=this.wrapClassName("minimized"),t=this.wrapClassName("maximized"),i="box-maximized-timer";return this._state$.subscribe((s=>{this.$box.classList.toggle(e,s===Ke.Minimized),s===Ke.Maximized?(this._renderSideEffect.flush(i),this.$box.classList.toggle(t,!0)):this._renderSideEffect.setTimeout((()=>{this.$box.classList.toggle(t,!1)}),0,i)}))})),this._renderSideEffect.add((()=>this._visible$.subscribe((e=>{this.$box.style.display=e?"block":"none"})))),this._renderSideEffect.add((()=>this._zIndex$.subscribe((e=>{this.$box.style.zIndex=String(e)}))));const i=Ve(this.$box);this.$box.dataset.teleBoxID=this.id,this.$box.style.width=this.absoluteWidth+"px",this.$box.style.height=this.absoluteHeight+"px";const s=this.x*this.containerRect.width+this.containerRect.x,r=this.y*this.containerRect.height+this.containerRect.y;this.$box.style.transform=`translate(${s-10}px,${r-10}px)`,this._valSideEffectBinder.combine([this._coord$,this._size$,this._minimized$,this._containerRect$,this._collectorRect$],(([e,t,i,s,r])=>{const n=t.width*s.width,o=t.height*s.height;return{width:n,height:o,x:e.x*s.width,y:e.y*s.height,scaleX:i&&r?r.width/n:1,scaleY:i&&r?r.height/o:1}}),He).subscribe((e=>{i.set(e)})),i.set({x:s,y:r});const n=document.createElement("div");n.className=this.wrapClassName("box-main"),this.$box.appendChild(n);const o=document.createElement("div");o.className=this.wrapClassName("titlebar-wrap"),o.appendChild(this.titleBar.render()),this.$titleBar=o;const a=document.createElement("div");a.className=this.wrapClassName("content-wrap");const l=document.createElement("div");l.className=this.wrapClassName("content")+" tele-fancy-scrollbar",this.$content=l,this._renderSideEffect.add((()=>{let e;return this._$userStyles$.subscribe((t=>{e&&e.remove(),e=t,t&&a.appendChild(t)}))})),this._renderSideEffect.add((()=>{let e;return this._$userContent$.subscribe((t=>{e&&e.remove(),e=t,t&&l.appendChild(t)}))})),a.appendChild(l);const h=document.createElement("div");return h.className=this.wrapClassName("footer-wrap"),this.$footer=h,this._renderSideEffect.add((()=>{let e;return this._$userFooter$.subscribe((t=>{e&&e.remove(),e=t,t&&h.appendChild(t)}))})),n.appendChild(o),n.appendChild(a),n.appendChild(h),this._renderResizeHandlers(),this.$box}_renderResizeHandlers(){const e=document.createElement("div");e.className=this.wrapClassName("resize-handles"),Object.values(nt).forEach((t=>{const i=document.createElement("div");i.className=this.wrapClassName(t)+" "+this.wrapClassName("resize-handle"),i.dataset.teleBoxHandle=t,e.appendChild(i)})),this.$box.appendChild(e);const t="handle-tracking-listener",i=this.wrapClassName("transforming");let s,r,n=0,o=0,a=0,l=0,h=0,c=0;const d=e=>{if(this.state!==Ke.Normal)return;ht(e);let{pageX:t,pageY:i}=ct(e);i<0&&(i=0);const s=(t-h)/this.containerRect.width,d=(i-c)/this.containerRect.height;switch(r){case nt.North:this.transform(this.x,o+d,this.width,l-d);break;case nt.South:this.transform(this.x,this.y,this.width,l+d);break;case nt.West:this.transform(n+s,this.y,a-s,this.height);break;case nt.East:this.transform(this.x,this.y,a+s,this.height);break;case nt.NorthWest:this.transform(n+s,o+d,a-s,l-d);break;case nt.NorthEast:this.transform(this.x,o+d,a+s,l-d);break;case nt.SouthEast:this.transform(this.x,this.y,a+s,l+d);break;case nt.SouthWest:this.transform(n+s,this.y,a-s,l+d);break;default:if(this.fence)this.move(lt(n+s,0,1-this.width),lt(o+d,0,1-this.height));else{const e=20/this.containerRect.width,t=20/this.containerRect.height;this.move(lt(n+s,e-this.width,1-e),lt(o+d,0,1-t))}}},u=e=>{r=void 0,s&&(ht(e),this.$box.classList.toggle(i,!1),this._sideEffect.flush(t),s.remove())},m=e=>{var m;if(this.readonly)return;if(null!=e.button&&0!==e.button)return;if(!this.draggable||r||this.state!==Ke.Normal)return;const f=e.target;if(null==(m=f.dataset)?void 0:m.teleBoxHandle){ht(e),n=this.x,o=this.y,a=this.width,l=this.height,({pageX:h,pageY:c}=ct(e)),r=f.dataset.teleBoxHandle,s||(s=document.createElement("div"));const m=r?this.wrapClassName(`cursor-${r}`):"";s.className=this.wrapClassName("track-mask"+(m?` ${m}`:"")),this.$box.appendChild(s),this.$box.classList.add(i),this._sideEffect.add((()=>(window.addEventListener("mousemove",d),window.addEventListener("touchmove",d,{passive:!1}),window.addEventListener("mouseup",u),window.addEventListener("touchend",u,{passive:!1}),window.addEventListener("touchcancel",u,{passive:!1}),()=>{window.removeEventListener("mousemove",d),window.removeEventListener("touchmove",d),window.removeEventListener("mouseup",u),window.removeEventListener("touchend",u),window.removeEventListener("touchcancel",u)})),t)}};this._handleTrackStart=m,this._sideEffect.addEventListener(e,"mousedown",m,{},"box-resizeHandles-mousedown"),this._sideEffect.addEventListener(e,"touchstart",m,{passive:!1},"box-resizeHandles-touchstart")}destroy(){this.$box.remove(),this.events.emit(tt.Destroyed),this._sideEffect.flushAll(),this._renderSideEffect.flushAll(),this.events.removeAllListeners(),this._delegateEvents.removeAllListeners()}wrapClassName(e){return`${this.namespace}-${e}`}}function bt(){}const xt=(e,t)=>{const i=c(!0);d((()=>{if(!i.current)return e();i.current=!1}),t)},yt=e=>{const[t]=u((()=>new gt(e)));return xt((()=>{null!=e.prefersColorScheme&&t.setPrefersColorScheme(e.prefersColorScheme)}),[t,e.prefersColorScheme]),xt((()=>{null!=e.minWidth&&t.setMinWidth(e.minWidth)}),[t,e.minWidth]),xt((()=>{null!=e.minHeight&&t.setMinHeight(e.minHeight)}),[t,e.minHeight]),xt((()=>{var i,s;t.resize(null!=(i=e.width)?i:t.width,null!=(s=e.height)?s:t.height,!0)}),[t,e.width,e.height]),xt((()=>{var i,s;t.move(null!=(i=e.x)?i:t.x,null!=(s=e.y)?s:t.y,!0)}),[t,e.x,e.y]),xt((()=>{null!=e.title&&t.setTitle(e.title)}),[t,e.title]),xt((()=>{null!=e.visible&&t.setVisible(e.visible)}),[t,e.visible]),xt((()=>{null!=e.minimized&&t.setMinimized(e.minimized,!0)}),[t,e.minimized]),xt((()=>{null!=e.maximized&&t.setMaximized(e.maximized,!0)}),[t,e.maximized]),xt((()=>{null!=e.state&&t.setState(e.state,!0)}),[t,e.state]),xt((()=>{null!=e.draggable&&t.setDraggable(e.draggable)}),[t,e.draggable]),xt((()=>{null!=e.resizable&&t.setResizable(e.resizable)}),[t,e.resizable]),xt((()=>{null!=e.fence&&t.setFence(e.fence)}),[t,e.fence]),xt((()=>{null!=e.containerRect&&t.setContainerRect(e.containerRect)}),[t,e.containerRect]),xt((()=>{null!=e.fixRatio&&t.setFixRatio(e.fixRatio)}),[t,e.fixRatio]),d((()=>{if(e.onResize)return t.events.on(tt.Resize,e.onResize),()=>{t.events.off(tt.Resize,e.onResize)}}),[t,e.onResize]),d((()=>{if(e.onMove)return t.events.on(tt.Move,e.onMove),()=>{t.events.off(tt.Move,e.onMove)}}),[t,e.onMove]),d((()=>{if(e.onClose)return t.events.on(tt.Close,e.onClose),()=>{t.events.off(tt.Close,e.onClose)}}),[t,e.onClose]),d((()=>{if(e.onFocus)return t.events.on(tt.Focus,e.onFocus),()=>{t.events.off(tt.Focus,e.onFocus)}}),[t,e.onFocus]),d((()=>{if(e.onBlur)return t.events.on(tt.Blur,e.onBlur),()=>{t.events.off(tt.Blur,e.onBlur)}}),[t,e.onBlur]),d((()=>{if(e.onStateChanged)return t.events.on(tt.State,e.onStateChanged),()=>{t.events.off(tt.State,e.onStateChanged)}}),[t,e.onStateChanged]),h.createElement("div",{ref:e=>e&&t.render(e),className:t.wrapClassName("box")})};var wt,$t;class Ct{constructor({visible:e=!0,readonly:t=!1,darkMode:i=!1,namespace:s="telebox",styles:r={},onClick:n}={}){this.handleCollectorClick=()=>{!this._readonly&&this.onClick&&this.onClick()},this._visible=e,this._readonly=t,this._darkMode=i,this.namespace=s,this.styles=r,this.onClick=n}get visible(){return this._visible}get readonly(){return this._readonly}get darkMode(){return this._darkMode}mount(e){return e.appendChild(this.render()),this}unmount(){return this.$collector&&this.$collector.remove(),this}setVisible(e){return this._visible!==e&&(this._visible=e,this.$collector&&this.$collector.classList.toggle(this.wrapClassName("collector-visible"),e)),this}setReadonly(e){return this._readonly!==e&&(this._readonly=e,this.$collector&&this.$collector.classList.toggle(this.wrapClassName("collector-readonly"),e)),this}setDarkMode(e){return this._darkMode!==e&&(this._darkMode=e,this.$collector&&(this.$collector.classList.toggle(this.wrapClassName("color-scheme-dark"),e),this.$collector.classList.toggle(this.wrapClassName("color-scheme-light"),!e))),this}setStyles(e){if(Object.assign(this.styles,e),this.$collector){const t=this.$collector;Object.keys(e).forEach((i=>{const s=e[i];null!=s&&(t.style[i]=s)}))}return this}render(){return this.$collector||(this.$collector=document.createElement("button"),this.$collector.className=this.wrapClassName("collector"),this.$collector.style.backgroundImage="url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K')",this.$collector.addEventListener("click",this.handleCollectorClick),this._visible&&this.$collector.classList.add(this.wrapClassName("collector-visible")),this._readonly&&this.$collector.classList.add(this.wrapClassName("collector-readonly")),this.$collector.classList.add(this.wrapClassName(this._darkMode?"color-scheme-dark":"color-scheme-light")),this.setStyles(this.styles)),this.$collector}destroy(){this.$collector&&(this.$collector.removeEventListener("click",this.handleCollectorClick),this.$collector.remove(),this.$collector=void 0),this.onClick=void 0}wrapClassName(e){return`${this.namespace}-${e}`}}($t=wt||(wt={})).Focused="focused",$t.Blurred="blurred",$t.Created="created",$t.Removed="removed",$t.State="state",$t.Maximized="maximized",$t.Minimized="minimized",$t.Move="move",$t.Resize="resize",$t.IntrinsicMove="intrinsic_move",$t.IntrinsicResize="intrinsic_resize",$t.VisualResize="visual_resize",$t.ZIndex="z_index",$t.PrefersColorScheme="prefers_color_scheme",$t.DarkMode="dark_mode";class zt extends pt{constructor(e){super(e),this.boxes=e.boxes,this.focusedBox=e.focusedBox,this.containerRect=e.containerRect,this.darkMode=e.darkMode}focusBox(e){var t;if(!this.focusedBox||this.focusedBox!==e){if(this.$titles&&this.state===Ke.Maximized){const{children:i}=this.$titles.firstElementChild;for(let s=i.length-1;s>=0;s-=1){const r=i[s],n=null==(t=r.dataset)?void 0:t.teleBoxID;n&&(e&&n===e.id?r.classList.toggle(this.wrapClassName("titles-tab-focus"),!0):this.focusedBox&&n===this.focusedBox.id&&r.classList.toggle(this.wrapClassName("titles-tab-focus"),!1))}}this.focusedBox=e}}setContainerRect(e){if(this.containerRect=e,this.$titleBar){const{x:t,y:i,width:s}=e;this.$titleBar.style.transform=`translate(${t}px, ${i}px)`,this.$titleBar.style.width=s+"px"}}setBoxes(e){this.boxes=e,this.updateTitles()}setState(e){super.setState(e),this.$titleBar&&this.$titleBar.classList.toggle(this.wrapClassName("max-titlebar-maximized"),e===Ke.Maximized),this.updateTitles()}setReadonly(e){super.setReadonly(e),this.$titleBar&&this.$titleBar.classList.toggle(this.wrapClassName("readonly"),this.readonly)}setDarkMode(e){e!==this.darkMode&&(this.darkMode=e,this.$titleBar&&(this.$titleBar.classList.toggle(this.wrapClassName("color-scheme-dark"),e),this.$titleBar.classList.toggle(this.wrapClassName("color-scheme-light"),!e)))}render(){var e;const t=super.render();(null==(e=t.firstElementChild)?void 0:e.nextElementSibling)&&t.insertBefore(this.$dragArea,t.firstElementChild.nextElementSibling);const{x:i,y:s,width:r}=this.containerRect;return t.style.transform=`translate(${i}px, ${s}px)`,t.style.width=r+"px",t.classList.add(this.wrapClassName("max-titlebar")),t.classList.toggle(this.wrapClassName("max-titlebar-maximized"),this.state===Ke.Maximized),t.classList.toggle(this.wrapClassName("readonly"),this.readonly),t.classList.add(this.wrapClassName(this.darkMode?"color-scheme-dark":"color-scheme-light")),this.updateTitles(),t}destroy(){super.destroy(),this.$titles=void 0,this.boxes.length=0,this.focusedBox=void 0}updateTitles(){this.$titleBar&&this.state===Ke.Maximized&&(1===this.boxes.length?this.$title&&(this.$title.textContent=this.boxes[0].title,this.$titleBar.replaceChild(this.$title,this.$titleBar.firstElementChild)):this.$titleBar.replaceChild(this.renderTitles(),this.$titleBar.firstElementChild))}renderTitles(){this.$titles=document.createElement("div"),this.$titles.className=this.wrapClassName("titles"),this.$titles.addEventListener("wheel",(e=>{e.currentTarget.scrollBy({left:e.deltaY>0?250:-250,behavior:"smooth"})}),{passive:!1});const e=document.createElement("div");return e.className=this.wrapClassName("titles-content"),this.$titles.appendChild(e),this.boxes.forEach((t=>{const i=document.createElement("button");i.className=this.wrapClassName("titles-tab"),i.textContent=t.title,i.dataset.teleBoxID=t.id,i.dataset.teleTitleBarNoDblClick="true",this.focusedBox&&t.id===this.focusedBox.id&&i.classList.add(this.wrapClassName("titles-tab-focus")),e.appendChild(i)})),this.$titles}}class Bt{constructor({root:e=document.body,prefersColorScheme:t=Je.Light,minimized:i=!1,maximized:s=!1,fence:r=!0,containerRect:n={x:0,y:0,width:window.innerWidth,height:window.innerHeight},collector:o,namespace:a="telebox",readonly:l=!1}={}){this.events=new f,this._sideEffect=new Xe;const{combine:h,createVal:c}=Ue(this._sideEffect);this.root=e,this.namespace=a,this.boxes$=c([]),this.topBox$=this.boxes$.derive((e=>{if(e.length>0){return e.reduce(((e,t)=>e.zIndex>t.zIndex?e:t))}}));const d=window.matchMedia("(prefers-color-scheme: dark)"),u=c(!1);d&&(u.setValue(d.matches),this._sideEffect.add((()=>{const e=e=>{u.setValue(e.matches)};return d.addListener(e),()=>d.removeListener(e)})));const m=c(t);m.reaction(((e,t,i)=>{this.boxes.forEach((t=>t.setPrefersColorScheme(e,i))),i||this.events.emit(wt.PrefersColorScheme,e)})),this._darkMode$=h([u,m],(([e,t])=>"auto"===t?e:"dark"===t)),this._darkMode$.reaction(((e,t,i)=>{this.boxes.forEach((t=>t.setDarkMode(e,i))),i||this.events.emit(wt.DarkMode,e)}));const v=c(l);v.reaction(((e,t,i)=>{this.boxes.forEach((t=>t.setReadonly(e,i)))}));const p=c(i),g=c(s);g.reaction(((e,t,i)=>{this.boxes.forEach((t=>t.setMaximized(e,i))),i||this.events.emit(wt.Maximized,e)}));const b=h([p,g],(([e,t])=>e?Ke.Minimized:t?Ke.Maximized:Ke.Normal));b.reaction(((e,t,i)=>{this.maxTitleBar.setState(e),i||this.events.emit(wt.State,e)}));const x=c(r);x.subscribe(((e,t,i)=>{this.boxes.forEach((t=>t.setFence(e,i)))}));const y=c(n,He);y.reaction(((e,t,i)=>{this.boxes.forEach((t=>t.setContainerRect(e,i))),this.maxTitleBar.setContainerRect(e)}));const w=c(null===o?null:o||new Ct({visible:i,readonly:l,namespace:a}).mount(e));w.subscribe((e=>{e&&(e.setVisible(p.value),e.setReadonly(v.value),e.setDarkMode(this._darkMode$.value),this._sideEffect.add((()=>(e.onClick=()=>{v.value||p.setValue(!1)},()=>e.destroy())),"collect-onClick"))})),v.subscribe((e=>{var t;return null==(t=w.value)?void 0:t.setReadonly(e)})),this._darkMode$.subscribe((e=>{var t;null==(t=w.value)||t.setDarkMode(e)}));const $=()=>{var e;if(null==(e=w.value)?void 0:e.$collector){const{x:e,y:t,width:i,height:s}=w.value.$collector.getBoundingClientRect(),r=this.root.getBoundingClientRect();return{x:e-r.x,y:t-r.y,width:i,height:s}}},C=c(p.value?$():void 0);C.subscribe(((e,t,i)=>{this.boxes.forEach((t=>{t.setCollectorRect(e,i)}))})),p.subscribe(((e,t,i)=>{var s,r;null==(s=w.value)||s.setVisible(e),e&&(null==(r=w.value)?void 0:r.$collector)&&C.setValue($()),this.boxes.forEach((t=>t.setMinimized(e,i))),i||this.events.emit(wt.Minimized,e)}));const z=this.wrapClassName("titlebar-icon-close"),B=e=>{var t;if(v.value)return;const i=e.target;if(i.tagName)for(let s=i;s;s=s.parentElement){if(s.classList&&s.classList.contains(z))return;const e=null==(t=s.dataset)?void 0:t.teleBoxID;if(e){const t=this.getBox(e);if(t)return this.focusBox(t),void this.makeBoxTop(t)}}};this._sideEffect.addEventListener(window,"mousedown",B,!0),this._sideEffect.addEventListener(window,"touchstart",B,!0),this.maxTitleBar=new zt({darkMode:this.darkMode,readonly:v.value,namespace:this.namespace,state:b.value,boxes:this.boxes$.value,containerRect:y.value,onEvent:e=>{switch(e.type){case st.Maximize:g.setValue(!g.value);break;case st.Minimize:p.setValue(!0);break;case tt.Close:this.removeTopBox(),this.focusTopBox()}}}),v.subscribe((e=>this.maxTitleBar.setReadonly(e))),this._darkMode$.subscribe((e=>{this.maxTitleBar.setDarkMode(e)})),this.boxes$.reaction((e=>{this.maxTitleBar.setBoxes(e)}));Ge(this,{prefersColorScheme:m,containerRect:y,collector:w,collectorRect:C,readonly:v,fence:x,minimized:p,maximized:g}),this._state$=b,this.root.appendChild(this.maxTitleBar.render())}get boxes(){return this.boxes$.value}get topBox(){return this.topBox$.value}get darkMode(){return this._darkMode$.value}get state(){return this._state$.value}setState(e,t=!1){switch(e){case Ke.Maximized:this.setMinimized(!1,t),this.setMaximized(!0,t);break;case Ke.Minimized:this.setMinimized(!0,t),this.setMaximized(!1,t);break;default:this.setMinimized(!1,t),this.setMaximized(!1,t)}return this}create(e={},t=!0){const i=new gt(l(a({zIndex:this.topBox?this.topBox.zIndex+1:100},t?this.smartPosition(e):e),{darkMode:this.darkMode,prefersColorScheme:this.prefersColorScheme,maximized:this.maximized,minimized:this.minimized,fence:this.fence,namespace:this.namespace,containerRect:this.containerRect,readonly:this.readonly,collectorRect:this.collectorRect}));return i.mount(this.root),i.focus&&(this.focusBox(i),t&&this.makeBoxTop(i)),this.boxes$.setValue([...this.boxes,i]),i._delegateEvents.on(st.Maximize,(()=>{this.setMaximized(!this.maximized)})),i._delegateEvents.on(st.Minimize,(()=>{this.setMinimized(!0)})),i._delegateEvents.on(st.Close,(()=>{this.remove(i),this.focusTopBox()})),i._coord$.reaction(((e,t,s)=>{s||this.events.emit(wt.Move,i)})),i._size$.reaction(((e,t,s)=>{s||this.events.emit(wt.Resize,i)})),i._intrinsicCoord$.reaction(((e,t,s)=>{s||this.events.emit(wt.IntrinsicMove,i)})),i._intrinsicSize$.reaction(((e,t,s)=>{s||this.events.emit(wt.IntrinsicResize,i)})),i._visualSize$.reaction(((e,t,s)=>{s||this.events.emit(wt.VisualResize,i)})),i._zIndex$.reaction(((e,t,s)=>{if(this.boxes.length>0){const e=this.boxes.reduce(((e,t)=>e.zIndex>t.zIndex?e:t));this.topBox$.setValue(e)}s||this.events.emit(wt.ZIndex,i)})),this.events.emit(wt.Created,i),i}query(e){return e?this.boxes.filter(this.teleBoxMatcher(e)):[...this.boxes]}queryOne(e){return e?this.boxes.find(this.teleBoxMatcher(e)):this.boxes[0]}update(e,t,i=!1){const s=this.boxes.find((t=>t.id===e));if(s)return this.updateBox(s,t,i)}updateAll(e,t=!1){this.boxes.forEach((i=>{this.updateBox(i,e,t)}))}remove(e,t=!1){const i=this.getBoxIndex(e);if(i>=0){const e=this.boxes.slice(),s=e.splice(i,1);return this.boxes$.setValue(e),s.forEach((e=>e.destroy())),t||(this.boxes.length<=0&&(this.setMaximized(!1),this.setMinimized(!1)),this.events.emit(wt.Removed,s)),s[0]}}removeTopBox(){if(this.topBox)return this.remove(this.topBox)}removeAll(e=!1){const t=this.boxes$.value;return this.boxes$.setValue([]),t.forEach((e=>e.destroy())),e||(this.boxes.length<=0&&(this.setMaximized(!1),this.setMinimized(!1)),this.events.emit(wt.Removed,t)),t}destroy(e=!1){this.events.removeAllListeners(),this._sideEffect.flushAll(),this.removeAll(e),Object.keys(this).forEach((e=>{const t=this[e];t instanceof qe&&t.destroy()}))}wrapClassName(e){return`${this.namespace}-${e}`}focusBox(e,t=!1){const i=this.getBox(e);i&&(this.boxes.forEach((e=>{if(i===e){let e=!1;i.focus||(e=!0,i.setFocus(!0,t)),e&&!t&&this.events.emit(wt.Focused,i)}else e.focus&&this.blurBox(e,t)})),this.maxTitleBar.focusBox(i))}focusTopBox(){if(this.topBox&&!this.topBox.focus)return this.focusBox(this.topBox)}blurBox(e,t=!1){const i=this.getBox(e);i&&(i.focus&&(i.setFocus(!1,t),t||this.events.emit(wt.Blurred,i)),this.maxTitleBar.focusedBox===i&&this.maxTitleBar.focusBox())}blurAll(e=!1){this.boxes.forEach((t=>{t.focus&&(t.setFocus(!1,e),e||this.events.emit(wt.Blurred,t))})),this.maxTitleBar.focusedBox&&this.maxTitleBar.focusBox()}teleBoxMatcher(e){const t=Object.keys(e);return i=>t.every((t=>e[t]===i[t]))}updateBox(e,t,i=!1){null==t.x&&null==t.y||e.move(null==t.x?e.intrinsicX:t.x,null==t.y?e.intrinsicY:t.y,i),null==t.width&&null==t.height||e.resize(null==t.width?e.intrinsicWidth:t.width,null==t.height?e.intrinsicHeight:t.height,i),null!=t.title&&(e.setTitle(t.title),this.maxTitleBar.updateTitles()),null!=t.visible&&e.setVisible(t.visible,i),null!=t.minHeight&&e.setMinHeight(t.minHeight,i),null!=t.minWidth&&e.setMinWidth(t.minWidth,i),null!=t.resizable&&e.setResizable(t.resizable,i),null!=t.draggable&&e.setDraggable(t.draggable,i),null!=t.fixRatio&&e.setFixRatio(t.fixRatio,i),null!=t.zIndex&&e.setZIndex(t.zIndex,i),null!=t.content&&e.mountContent(t.content),null!=t.footer&&e.mountFooter(t.footer)}smartPosition(e={}){let{x:t,y:i}=e;const{width:s=.5,height:r=.5}=e;if(null==t){let e=20;this.topBox&&(e=this.topBox.intrinsicX*this.containerRect.width+20,e>this.containerRect.width-s*this.containerRect.width&&(e=20)),t=e/this.containerRect.width}if(null==i){let e=20;this.topBox&&(e=this.topBox.intrinsicY*this.containerRect.height+20,e>this.containerRect.height-r*this.containerRect.height&&(e=20)),i=e/this.containerRect.height}return l(a({},e),{x:t,y:i,width:s,height:r})}makeBoxTop(e,t=!1){this.topBox&&e!==this.topBox&&e.setZIndex(this.topBox.zIndex+1,t)}getBoxIndex(e){return"string"==typeof e?this.boxes.findIndex((t=>t.id===e)):this.boxes.findIndex((t=>t===e))}getBox(e){return"string"==typeof e?this.boxes.find((t=>t.id===e)):e}}export{pt as DefaultTitleBar,Je as TELE_BOX_COLOR_SCHEME,st as TELE_BOX_DELEGATE_EVENT,tt as TELE_BOX_EVENT,wt as TELE_BOX_MANAGER_EVENT,nt as TELE_BOX_RESIZE_HANDLE,Ke as TELE_BOX_STATE,gt as TeleBox,Ct as TeleBoxCollector,at as TeleBoxDragHandleType,Bt as TeleBoxManager,yt as TeleBoxReact};
+***************************************************************************** */
+var __assign$1 = function() {
+  __assign$1 = Object.assign || function __assign2(t2) {
+    for (var s2, i2 = 1, n = arguments.length; i2 < n; i2++) {
+      s2 = arguments[i2];
+      for (var p in s2)
+        if (Object.prototype.hasOwnProperty.call(s2, p))
+          t2[p] = s2[p];
+    }
+    return t2;
+  };
+  return __assign$1.apply(this, arguments);
+};
+function __rest(s2, e2) {
+  var t2 = {};
+  for (var p in s2)
+    if (Object.prototype.hasOwnProperty.call(s2, p) && e2.indexOf(p) < 0)
+      t2[p] = s2[p];
+  if (s2 != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i2 = 0, p = Object.getOwnPropertySymbols(s2); i2 < p.length; i2++) {
+      if (e2.indexOf(p[i2]) < 0 && Object.prototype.propertyIsEnumerable.call(s2, p[i2]))
+        t2[p[i2]] = s2[p[i2]];
+    }
+  return t2;
+}
+var prevTime = 0;
+var onNextFrame = typeof window !== "undefined" && window.requestAnimationFrame !== void 0 ? function(callback) {
+  return window.requestAnimationFrame(callback);
+} : function(callback) {
+  var timestamp = Date.now();
+  var timeToCall = Math.max(0, 16.7 - (timestamp - prevTime));
+  prevTime = timestamp + timeToCall;
+  setTimeout(function() {
+    return callback(prevTime);
+  }, timeToCall);
+};
+var createStep = function(setRunNextFrame) {
+  var processToRun = [];
+  var processToRunNextFrame = [];
+  var numThisFrame = 0;
+  var isProcessing2 = false;
+  var i2 = 0;
+  var cancelled = new WeakSet();
+  var toKeepAlive = new WeakSet();
+  var renderStep = {
+    cancel: function(process) {
+      var indexOfCallback = processToRunNextFrame.indexOf(process);
+      cancelled.add(process);
+      if (indexOfCallback !== -1) {
+        processToRunNextFrame.splice(indexOfCallback, 1);
+      }
+    },
+    process: function(frame2) {
+      var _a;
+      isProcessing2 = true;
+      _a = [processToRunNextFrame, processToRun], processToRun = _a[0], processToRunNextFrame = _a[1];
+      processToRunNextFrame.length = 0;
+      numThisFrame = processToRun.length;
+      if (numThisFrame) {
+        var process_1;
+        for (i2 = 0; i2 < numThisFrame; i2++) {
+          process_1 = processToRun[i2];
+          process_1(frame2);
+          if (toKeepAlive.has(process_1) === true && !cancelled.has(process_1)) {
+            renderStep.schedule(process_1);
+            setRunNextFrame(true);
+          }
+        }
+      }
+      isProcessing2 = false;
+    },
+    schedule: function(process, keepAlive, immediate) {
+      if (keepAlive === void 0) {
+        keepAlive = false;
+      }
+      if (immediate === void 0) {
+        immediate = false;
+      }
+      var addToCurrentBuffer = immediate && isProcessing2;
+      var buffer = addToCurrentBuffer ? processToRun : processToRunNextFrame;
+      cancelled.delete(process);
+      if (keepAlive)
+        toKeepAlive.add(process);
+      if (buffer.indexOf(process) === -1) {
+        buffer.push(process);
+        if (addToCurrentBuffer)
+          numThisFrame = processToRun.length;
+      }
+    }
+  };
+  return renderStep;
+};
+var maxElapsed = 40;
+var defaultElapsed = 1 / 60 * 1e3;
+var useDefaultElapsed = true;
+var willRunNextFrame = false;
+var isProcessing = false;
+var frame = {
+  delta: 0,
+  timestamp: 0
+};
+var stepsOrder = ["read", "update", "preRender", "render", "postRender"];
+var setWillRunNextFrame = function(willRun) {
+  return willRunNextFrame = willRun;
+};
+var steps = /* @__PURE__ */ stepsOrder.reduce(function(acc, key) {
+  acc[key] = createStep(setWillRunNextFrame);
+  return acc;
+}, {});
+var sync = /* @__PURE__ */ stepsOrder.reduce(function(acc, key) {
+  var step = steps[key];
+  acc[key] = function(process, keepAlive, immediate) {
+    if (keepAlive === void 0) {
+      keepAlive = false;
+    }
+    if (immediate === void 0) {
+      immediate = false;
+    }
+    if (!willRunNextFrame)
+      startLoop();
+    step.schedule(process, keepAlive, immediate);
+    return process;
+  };
+  return acc;
+}, {});
+var processStep = function(stepId) {
+  return steps[stepId].process(frame);
+};
+var processFrame = function(timestamp) {
+  willRunNextFrame = false;
+  frame.delta = useDefaultElapsed ? defaultElapsed : Math.max(Math.min(timestamp - frame.timestamp, maxElapsed), 1);
+  if (!useDefaultElapsed)
+    defaultElapsed = frame.delta;
+  frame.timestamp = timestamp;
+  isProcessing = true;
+  stepsOrder.forEach(processStep);
+  isProcessing = false;
+  if (willRunNextFrame) {
+    useDefaultElapsed = false;
+    onNextFrame(processFrame);
+  }
+};
+var startLoop = function() {
+  willRunNextFrame = true;
+  useDefaultElapsed = true;
+  if (!isProcessing)
+    onNextFrame(processFrame);
+};
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function() {
+  __assign = Object.assign || function __assign2(t2) {
+    for (var s2, i2 = 1, n = arguments.length; i2 < n; i2++) {
+      s2 = arguments[i2];
+      for (var p in s2)
+        if (Object.prototype.hasOwnProperty.call(s2, p))
+          t2[p] = s2[p];
+    }
+    return t2;
+  };
+  return __assign.apply(this, arguments);
+};
+var clamp$1 = function(min, max) {
+  return function(v) {
+    return Math.max(Math.min(v, max), min);
+  };
+};
+var sanitize = function(v) {
+  return v % 1 ? Number(v.toFixed(5)) : v;
+};
+var singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;
+var number = {
+  test: function(v) {
+    return typeof v === "number";
+  },
+  parse: parseFloat,
+  transform: function(v) {
+    return v;
+  }
+};
+var alpha = __assign(__assign({}, number), { transform: clamp$1(0, 1) });
+var scale = __assign(__assign({}, number), { default: 1 });
+var createUnitType = function(unit) {
+  return {
+    test: function(v) {
+      return typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1;
+    },
+    parse: parseFloat,
+    transform: function(v) {
+      return "" + v + unit;
+    }
+  };
+};
+var degrees = createUnitType("deg");
+var percent = createUnitType("%");
+var px = createUnitType("px");
+var progressPercentage = __assign(__assign({}, percent), { parse: function(v) {
+  return percent.parse(v) / 100;
+}, transform: function(v) {
+  return percent.transform(v * 100);
+} });
+var getValueFromFunctionString = function(value) {
+  return value.substring(value.indexOf("(") + 1, value.lastIndexOf(")"));
+};
+var clampRgbUnit = clamp$1(0, 255);
+var isRgba = function(v) {
+  return v.red !== void 0;
+};
+var isHsla = function(v) {
+  return v.hue !== void 0;
+};
+function getValuesAsArray(value) {
+  return getValueFromFunctionString(value).replace(/(,|\/)/g, " ").split(/ \s*/);
+}
+var splitColorValues = function(terms) {
+  return function(v) {
+    if (typeof v !== "string")
+      return v;
+    var values = {};
+    var valuesArray = getValuesAsArray(v);
+    for (var i2 = 0; i2 < 4; i2++) {
+      values[terms[i2]] = valuesArray[i2] !== void 0 ? parseFloat(valuesArray[i2]) : 1;
+    }
+    return values;
+  };
+};
+var rgbaTemplate = function(_a) {
+  var red = _a.red, green = _a.green, blue = _a.blue, _b = _a.alpha, alpha2 = _b === void 0 ? 1 : _b;
+  return "rgba(" + red + ", " + green + ", " + blue + ", " + alpha2 + ")";
+};
+var hslaTemplate = function(_a) {
+  var hue = _a.hue, saturation = _a.saturation, lightness = _a.lightness, _b = _a.alpha, alpha2 = _b === void 0 ? 1 : _b;
+  return "hsla(" + hue + ", " + saturation + ", " + lightness + ", " + alpha2 + ")";
+};
+var rgbUnit = __assign(__assign({}, number), { transform: function(v) {
+  return Math.round(clampRgbUnit(v));
+} });
+function isColorString(color2, colorType) {
+  return color2.startsWith(colorType) && singleColorRegex.test(color2);
+}
+var rgba = {
+  test: function(v) {
+    return typeof v === "string" ? isColorString(v, "rgb") : isRgba(v);
+  },
+  parse: splitColorValues(["red", "green", "blue", "alpha"]),
+  transform: function(_a) {
+    var red = _a.red, green = _a.green, blue = _a.blue, _b = _a.alpha, alpha$1 = _b === void 0 ? 1 : _b;
+    return rgbaTemplate({
+      red: rgbUnit.transform(red),
+      green: rgbUnit.transform(green),
+      blue: rgbUnit.transform(blue),
+      alpha: sanitize(alpha.transform(alpha$1))
+    });
+  }
+};
+var hsla = {
+  test: function(v) {
+    return typeof v === "string" ? isColorString(v, "hsl") : isHsla(v);
+  },
+  parse: splitColorValues(["hue", "saturation", "lightness", "alpha"]),
+  transform: function(_a) {
+    var hue = _a.hue, saturation = _a.saturation, lightness = _a.lightness, _b = _a.alpha, alpha$1 = _b === void 0 ? 1 : _b;
+    return hslaTemplate({
+      hue: Math.round(hue),
+      saturation: percent.transform(sanitize(saturation)),
+      lightness: percent.transform(sanitize(lightness)),
+      alpha: sanitize(alpha.transform(alpha$1))
+    });
+  }
+};
+var hex = __assign(__assign({}, rgba), { test: function(v) {
+  return typeof v === "string" && isColorString(v, "#");
+}, parse: function(v) {
+  var r2 = "";
+  var g = "";
+  var b = "";
+  if (v.length > 4) {
+    r2 = v.substr(1, 2);
+    g = v.substr(3, 2);
+    b = v.substr(5, 2);
+  } else {
+    r2 = v.substr(1, 1);
+    g = v.substr(2, 1);
+    b = v.substr(3, 1);
+    r2 += r2;
+    g += g;
+    b += b;
+  }
+  return {
+    red: parseInt(r2, 16),
+    green: parseInt(g, 16),
+    blue: parseInt(b, 16),
+    alpha: 1
+  };
+} });
+var color = {
+  test: function(v) {
+    return typeof v === "string" && singleColorRegex.test(v) || isRgba(v) || isHsla(v);
+  },
+  parse: function(v) {
+    if (rgba.test(v)) {
+      return rgba.parse(v);
+    } else if (hsla.test(v)) {
+      return hsla.parse(v);
+    } else if (hex.test(v)) {
+      return hex.parse(v);
+    }
+    return v;
+  },
+  transform: function(v) {
+    if (isRgba(v)) {
+      return rgba.transform(v);
+    } else if (isHsla(v)) {
+      return hsla.transform(v);
+    }
+    return v;
+  }
+};
+var createStyler = function(_a) {
+  var onRead2 = _a.onRead, onRender2 = _a.onRender, _b = _a.uncachedValues, uncachedValues = _b === void 0 ? new Set() : _b, _c = _a.useCache, useCache = _c === void 0 ? true : _c;
+  return function(_a2) {
+    if (_a2 === void 0) {
+      _a2 = {};
+    }
+    var props = __rest(_a2, []);
+    var state = {};
+    var changedValues = [];
+    var hasChanged = false;
+    function setValue(key, value) {
+      if (key.startsWith("--")) {
+        props.hasCSSVariable = true;
+      }
+      var currentValue = state[key];
+      state[key] = value;
+      if (state[key] === currentValue)
+        return;
+      if (changedValues.indexOf(key) === -1) {
+        changedValues.push(key);
+      }
+      if (!hasChanged) {
+        hasChanged = true;
+        sync.render(styler.render);
+      }
+    }
+    var styler = {
+      get: function(key, forceRead) {
+        if (forceRead === void 0) {
+          forceRead = false;
+        }
+        var useCached = !forceRead && useCache && !uncachedValues.has(key) && state[key] !== void 0;
+        return useCached ? state[key] : onRead2(key, props);
+      },
+      set: function(values, value) {
+        if (typeof values === "string") {
+          setValue(values, value);
+        } else {
+          for (var key in values) {
+            setValue(key, values[key]);
+          }
+        }
+        return this;
+      },
+      render: function(forceRender) {
+        if (forceRender === void 0) {
+          forceRender = false;
+        }
+        if (hasChanged || forceRender === true) {
+          onRender2(state, props, changedValues);
+          hasChanged = false;
+          changedValues.length = 0;
+        }
+        return this;
+      }
+    };
+    return styler;
+  };
+};
+var CAMEL_CASE_PATTERN = /([a-z])([A-Z])/g;
+var REPLACE_TEMPLATE = "$1-$2";
+var camelToDash = function(str) {
+  return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase();
+};
+var camelCache = /* @__PURE__ */ new Map();
+var dashCache = /* @__PURE__ */ new Map();
+var prefixes = ["Webkit", "Moz", "O", "ms", ""];
+var numPrefixes = prefixes.length;
+var isBrowser = typeof document !== "undefined";
+var testElement;
+var setDashPrefix = function(key, prefixed) {
+  return dashCache.set(key, camelToDash(prefixed));
+};
+var testPrefix = function(key) {
+  testElement = testElement || document.createElement("div");
+  for (var i2 = 0; i2 < numPrefixes; i2++) {
+    var prefix = prefixes[i2];
+    var noPrefix = prefix === "";
+    var prefixedPropertyName = noPrefix ? key : prefix + key.charAt(0).toUpperCase() + key.slice(1);
+    if (prefixedPropertyName in testElement.style || noPrefix) {
+      if (noPrefix && key === "clipPath" && dashCache.has(key)) {
+        return;
+      }
+      camelCache.set(key, prefixedPropertyName);
+      setDashPrefix(key, "" + (noPrefix ? "" : "-") + camelToDash(prefixedPropertyName));
+    }
+  }
+};
+var setServerProperty = function(key) {
+  return setDashPrefix(key, key);
+};
+var prefixer = function(key, asDashCase) {
+  if (asDashCase === void 0) {
+    asDashCase = false;
+  }
+  var cache2 = asDashCase ? dashCache : camelCache;
+  if (!cache2.has(key)) {
+    isBrowser ? testPrefix(key) : setServerProperty(key);
+  }
+  return cache2.get(key) || key;
+};
+var axes = ["", "X", "Y", "Z"];
+var order = ["translate", "scale", "rotate", "skew", "transformPerspective"];
+var transformProps = /* @__PURE__ */ order.reduce(function(acc, key) {
+  return axes.reduce(function(axesAcc, axesKey) {
+    axesAcc.push(key + axesKey);
+    return axesAcc;
+  }, acc);
+}, ["x", "y", "z"]);
+var transformPropDictionary = /* @__PURE__ */ transformProps.reduce(function(dict, key) {
+  dict[key] = true;
+  return dict;
+}, {});
+function isTransformProp(key) {
+  return transformPropDictionary[key] === true;
+}
+function sortTransformProps(a, b) {
+  return transformProps.indexOf(a) - transformProps.indexOf(b);
+}
+var transformOriginProps = /* @__PURE__ */ new Set(["originX", "originY", "originZ"]);
+function isTransformOriginProp(key) {
+  return transformOriginProps.has(key);
+}
+var int = /* @__PURE__ */ __assign$1(/* @__PURE__ */ __assign$1({}, number), { transform: Math.round });
+var valueTypes = {
+  color,
+  backgroundColor: color,
+  outlineColor: color,
+  fill: color,
+  stroke: color,
+  borderColor: color,
+  borderTopColor: color,
+  borderRightColor: color,
+  borderBottomColor: color,
+  borderLeftColor: color,
+  borderWidth: px,
+  borderTopWidth: px,
+  borderRightWidth: px,
+  borderBottomWidth: px,
+  borderLeftWidth: px,
+  borderRadius: px,
+  radius: px,
+  borderTopLeftRadius: px,
+  borderTopRightRadius: px,
+  borderBottomRightRadius: px,
+  borderBottomLeftRadius: px,
+  width: px,
+  maxWidth: px,
+  height: px,
+  maxHeight: px,
+  size: px,
+  top: px,
+  right: px,
+  bottom: px,
+  left: px,
+  padding: px,
+  paddingTop: px,
+  paddingRight: px,
+  paddingBottom: px,
+  paddingLeft: px,
+  margin: px,
+  marginTop: px,
+  marginRight: px,
+  marginBottom: px,
+  marginLeft: px,
+  rotate: degrees,
+  rotateX: degrees,
+  rotateY: degrees,
+  rotateZ: degrees,
+  scale,
+  scaleX: scale,
+  scaleY: scale,
+  scaleZ: scale,
+  skew: degrees,
+  skewX: degrees,
+  skewY: degrees,
+  distance: px,
+  translateX: px,
+  translateY: px,
+  translateZ: px,
+  x: px,
+  y: px,
+  z: px,
+  perspective: px,
+  opacity: alpha,
+  originX: progressPercentage,
+  originY: progressPercentage,
+  originZ: px,
+  zIndex: int,
+  fillOpacity: alpha,
+  strokeOpacity: alpha,
+  numOctaves: int
+};
+var getValueType = function(key) {
+  return valueTypes[key];
+};
+var getValueAsType = function(value, type) {
+  return type && typeof value === "number" ? type.transform(value) : value;
+};
+var SCROLL_LEFT = "scrollLeft";
+var SCROLL_TOP = "scrollTop";
+var scrollKeys = /* @__PURE__ */ new Set([SCROLL_LEFT, SCROLL_TOP]);
+var blacklist = /* @__PURE__ */ new Set([SCROLL_LEFT, SCROLL_TOP, "transform"]);
+var translateAlias = {
+  x: "translateX",
+  y: "translateY",
+  z: "translateZ"
+};
+function isCustomTemplate(v) {
+  return typeof v === "function";
+}
+function buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration, allowTransformNone) {
+  if (allowTransformNone === void 0) {
+    allowTransformNone = true;
+  }
+  var transformString = "";
+  var transformHasZ = false;
+  transformKeys.sort(sortTransformProps);
+  var numTransformKeys = transformKeys.length;
+  for (var i2 = 0; i2 < numTransformKeys; i2++) {
+    var key = transformKeys[i2];
+    transformString += (translateAlias[key] || key) + "(" + transform[key] + ") ";
+    transformHasZ = key === "z" ? true : transformHasZ;
+  }
+  if (!transformHasZ && enableHardwareAcceleration) {
+    transformString += "translateZ(0)";
+  } else {
+    transformString = transformString.trim();
+  }
+  if (isCustomTemplate(state.transform)) {
+    transformString = state.transform(transform, transformIsDefault ? "" : transformString);
+  } else if (allowTransformNone && transformIsDefault) {
+    transformString = "none";
+  }
+  return transformString;
+}
+function buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase, allowTransformNone) {
+  if (enableHardwareAcceleration === void 0) {
+    enableHardwareAcceleration = true;
+  }
+  if (styles === void 0) {
+    styles = {};
+  }
+  if (transform === void 0) {
+    transform = {};
+  }
+  if (transformOrigin === void 0) {
+    transformOrigin = {};
+  }
+  if (transformKeys === void 0) {
+    transformKeys = [];
+  }
+  if (isDashCase === void 0) {
+    isDashCase = false;
+  }
+  if (allowTransformNone === void 0) {
+    allowTransformNone = true;
+  }
+  var transformIsDefault = true;
+  var hasTransform = false;
+  var hasTransformOrigin = false;
+  for (var key in state) {
+    var value = state[key];
+    var valueType = getValueType(key);
+    var valueAsType = getValueAsType(value, valueType);
+    if (isTransformProp(key)) {
+      hasTransform = true;
+      transform[key] = valueAsType;
+      transformKeys.push(key);
+      if (transformIsDefault) {
+        if (valueType.default && value !== valueType.default || !valueType.default && value !== 0) {
+          transformIsDefault = false;
+        }
+      }
+    } else if (isTransformOriginProp(key)) {
+      transformOrigin[key] = valueAsType;
+      hasTransformOrigin = true;
+    } else if (!blacklist.has(key) || !isCustomTemplate(valueAsType)) {
+      styles[prefixer(key, isDashCase)] = valueAsType;
+    }
+  }
+  if (hasTransform || typeof state.transform === "function") {
+    styles.transform = buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration, allowTransformNone);
+  }
+  if (hasTransformOrigin) {
+    styles.transformOrigin = (transformOrigin.originX || "50%") + " " + (transformOrigin.originY || "50%") + " " + (transformOrigin.originZ || 0);
+  }
+  return styles;
+}
+function createStyleBuilder(_a) {
+  var _b = _a === void 0 ? {} : _a, _c = _b.enableHardwareAcceleration, enableHardwareAcceleration = _c === void 0 ? true : _c, _d = _b.isDashCase, isDashCase = _d === void 0 ? true : _d, _e = _b.allowTransformNone, allowTransformNone = _e === void 0 ? true : _e;
+  var styles = {};
+  var transform = {};
+  var transformOrigin = {};
+  var transformKeys = [];
+  return function(state) {
+    transformKeys.length = 0;
+    buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase, allowTransformNone);
+    return styles;
+  };
+}
+function onRead(key, options) {
+  var element = options.element, preparseOutput = options.preparseOutput;
+  var defaultValueType = getValueType(key);
+  if (isTransformProp(key)) {
+    return defaultValueType ? defaultValueType.default || 0 : 0;
+  } else if (scrollKeys.has(key)) {
+    return element[key];
+  } else {
+    var domValue = window.getComputedStyle(element, null).getPropertyValue(prefixer(key, true)) || 0;
+    return preparseOutput && defaultValueType && defaultValueType.test(domValue) && defaultValueType.parse ? defaultValueType.parse(domValue) : domValue;
+  }
+}
+function onRender(state, _a, changedValues) {
+  var element = _a.element, buildStyles = _a.buildStyles, hasCSSVariable = _a.hasCSSVariable;
+  Object.assign(element.style, buildStyles(state));
+  if (hasCSSVariable) {
+    var numChangedValues = changedValues.length;
+    for (var i2 = 0; i2 < numChangedValues; i2++) {
+      var key = changedValues[i2];
+      if (key.startsWith("--")) {
+        element.style.setProperty(key, state[key]);
+      }
+    }
+  }
+  if (changedValues.indexOf(SCROLL_LEFT) !== -1) {
+    element[SCROLL_LEFT] = state[SCROLL_LEFT];
+  }
+  if (changedValues.indexOf(SCROLL_TOP) !== -1) {
+    element[SCROLL_TOP] = state[SCROLL_TOP];
+  }
+}
+var cssStyler = /* @__PURE__ */ createStyler({
+  onRead,
+  onRender,
+  uncachedValues: scrollKeys
+});
+function createCssStyler(element, _a) {
+  if (_a === void 0) {
+    _a = {};
+  }
+  var enableHardwareAcceleration = _a.enableHardwareAcceleration, allowTransformNone = _a.allowTransformNone, props = __rest(_a, ["enableHardwareAcceleration", "allowTransformNone"]);
+  return cssStyler(__assign$1({ element, buildStyles: createStyleBuilder({
+    enableHardwareAcceleration,
+    allowTransformNone
+  }), preparseOutput: true }, props));
+}
+var camelCaseAttributes = /* @__PURE__ */ new Set(["baseFrequency", "diffuseConstant", "kernelMatrix", "kernelUnitLength", "keySplines", "keyTimes", "limitingConeAngle", "markerHeight", "markerWidth", "numOctaves", "targetX", "targetY", "surfaceScale", "specularConstant", "specularExponent", "stdDeviation", "tableValues"]);
+var defaultOrigin = 0.5;
+var svgAttrsTemplate = function() {
+  return {
+    style: {}
+  };
+};
+var progressToPixels = function(progress, length) {
+  return px.transform(progress * length);
+};
+var unmeasured = { x: 0, y: 0, width: 0, height: 0 };
+function calcOrigin(origin, offset, size) {
+  return typeof origin === "string" ? origin : px.transform(offset + size * origin);
+}
+function calculateSVGTransformOrigin(dimensions, originX, originY) {
+  return calcOrigin(originX, dimensions.x, dimensions.width) + " " + calcOrigin(originY, dimensions.y, dimensions.height);
+}
+var svgStyleConfig = {
+  enableHardwareAcceleration: false,
+  isDashCase: false
+};
+function buildSVGAttrs(_a, dimensions, totalPathLength, cssBuilder, attrs, isDashCase) {
+  if (dimensions === void 0) {
+    dimensions = unmeasured;
+  }
+  if (cssBuilder === void 0) {
+    cssBuilder = createStyleBuilder(svgStyleConfig);
+  }
+  if (attrs === void 0) {
+    attrs = svgAttrsTemplate();
+  }
+  if (isDashCase === void 0) {
+    isDashCase = true;
+  }
+  var attrX = _a.attrX, attrY = _a.attrY, originX = _a.originX, originY = _a.originY, pathLength = _a.pathLength, _b = _a.pathSpacing, pathSpacing = _b === void 0 ? 1 : _b, _c = _a.pathOffset, pathOffset = _c === void 0 ? 0 : _c, state = __rest(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
+  var style2 = cssBuilder(state);
+  for (var key in style2) {
+    if (key === "transform") {
+      attrs.style.transform = style2[key];
+    } else {
+      var attrKey = isDashCase && !camelCaseAttributes.has(key) ? camelToDash(key) : key;
+      attrs[attrKey] = style2[key];
+    }
+  }
+  if (originX !== void 0 || originY !== void 0 || style2.transform) {
+    attrs.style.transformOrigin = calculateSVGTransformOrigin(dimensions, originX !== void 0 ? originX : defaultOrigin, originY !== void 0 ? originY : defaultOrigin);
+  }
+  if (attrX !== void 0)
+    attrs.x = attrX;
+  if (attrY !== void 0)
+    attrs.y = attrY;
+  if (totalPathLength !== void 0 && pathLength !== void 0) {
+    attrs[isDashCase ? "stroke-dashoffset" : "strokeDashoffset"] = progressToPixels(-pathOffset, totalPathLength);
+    attrs[isDashCase ? "stroke-dasharray" : "strokeDasharray"] = progressToPixels(pathLength, totalPathLength) + " " + progressToPixels(pathSpacing, totalPathLength);
+  }
+  return attrs;
+}
+function createAttrBuilder(dimensions, totalPathLength, isDashCase) {
+  if (isDashCase === void 0) {
+    isDashCase = true;
+  }
+  var attrs = svgAttrsTemplate();
+  var cssBuilder = createStyleBuilder(svgStyleConfig);
+  return function(state) {
+    return buildSVGAttrs(state, dimensions, totalPathLength, cssBuilder, attrs, isDashCase);
+  };
+}
+var getDimensions = function(element) {
+  return typeof element.getBBox === "function" ? element.getBBox() : element.getBoundingClientRect();
+};
+var getSVGElementDimensions = function(element) {
+  try {
+    return getDimensions(element);
+  } catch (e2) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+};
+var isPath = function(element) {
+  return element.tagName === "path";
+};
+var svgStyler = /* @__PURE__ */ createStyler({
+  onRead: function(key, _a) {
+    var element = _a.element;
+    key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
+    if (!isTransformProp(key)) {
+      return element.getAttribute(key);
+    } else {
+      var valueType = getValueType(key);
+      return valueType ? valueType.default || 0 : 0;
+    }
+  },
+  onRender: function(state, _a) {
+    var element = _a.element, buildAttrs = _a.buildAttrs;
+    var attrs = buildAttrs(state);
+    for (var key in attrs) {
+      if (key === "style") {
+        Object.assign(element.style, attrs.style);
+      } else {
+        element.setAttribute(key, attrs[key]);
+      }
+    }
+  }
+});
+var svg = function(element) {
+  var dimensions = getSVGElementDimensions(element);
+  var pathLength = isPath(element) && element.getTotalLength ? element.getTotalLength() : void 0;
+  return svgStyler({
+    element,
+    buildAttrs: createAttrBuilder(dimensions, pathLength)
+  });
+};
+var viewport = /* @__PURE__ */ createStyler({
+  useCache: false,
+  onRead: function(key) {
+    return key === "scrollTop" ? window.pageYOffset : window.pageXOffset;
+  },
+  onRender: function(_a) {
+    var _b = _a.scrollTop, scrollTop = _b === void 0 ? 0 : _b, _c = _a.scrollLeft, scrollLeft = _c === void 0 ? 0 : _c;
+    return window.scrollTo(scrollLeft, scrollTop);
+  }
+});
+var cache = /* @__PURE__ */ new WeakMap();
+var isHTMLElement = function(node) {
+  return node instanceof HTMLElement || typeof node.click === "function";
+};
+var isSVGElement = function(node) {
+  return node instanceof SVGElement || "ownerSVGElement" in node;
+};
+var createDOMStyler = function(node, props) {
+  var styler;
+  if (node === window) {
+    styler = viewport(node);
+  } else if (isHTMLElement(node)) {
+    styler = createCssStyler(node, props);
+  } else if (isSVGElement(node)) {
+    styler = svg(node);
+  }
+  cache.set(node, styler);
+  return styler;
+};
+var getStyler = function(node, props) {
+  return cache.has(node) ? cache.get(node) : createDOMStyler(node, props);
+};
+function index(nodeOrSelector, props) {
+  var node = typeof nodeOrSelector === "string" ? document.querySelector(nodeOrSelector) : nodeOrSelector;
+  return getStyler(node, props);
+}
+var shallowequal = function shallowEqual(objA, objB, compare, compareContext) {
+  var ret = compare ? compare.call(compareContext, objA, objB) : void 0;
+  if (ret !== void 0) {
+    return !!ret;
+  }
+  if (objA === objB) {
+    return true;
+  }
+  if (typeof objA !== "object" || !objA || typeof objB !== "object" || !objB) {
+    return false;
+  }
+  var keysA = Object.keys(objA);
+  var keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
+  for (var idx = 0; idx < keysA.length; idx++) {
+    var key = keysA[idx];
+    if (!bHasOwnProperty(key)) {
+      return false;
+    }
+    var valueA = objA[key];
+    var valueB = objB[key];
+    ret = compare ? compare.call(compareContext, valueA, valueB, key) : void 0;
+    if (ret === false || ret === void 0 && valueA !== valueB) {
+      return false;
+    }
+  }
+  return true;
+};
+const e$1 = "!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", s$1 = e$1.length, t$1 = Array(20), r$1 = () => {
+  for (let r2 = 0; r2 < 20; r2++)
+    t$1[r2] = e$1.charAt(Math.random() * s$1);
+  return t$1.join("");
+};
+class o {
+  constructor() {
+    this.disposers = new Map();
+  }
+  add(e2, s2 = r$1()) {
+    return this.flush(s2), this.disposers.set(s2, e2()), s2;
+  }
+  addDisposer(e2, s2 = r$1()) {
+    return this.flush(s2), this.disposers.set(s2, e2), s2;
+  }
+  addEventListener(e2, s2, t2, o2, i2 = r$1()) {
+    return this.add(() => (e2.addEventListener(s2, t2, o2), () => e2.removeEventListener(s2, t2, o2)), i2), i2;
+  }
+  setTimeout(e2, s2, t2 = r$1()) {
+    return this.add(() => {
+      const r2 = window.setTimeout(() => {
+        this.remove(t2), e2();
+      }, s2);
+      return () => window.clearTimeout(r2);
+    }, t2);
+  }
+  setInterval(e2, s2, t2 = r$1()) {
+    return this.add(() => {
+      const t3 = window.setInterval(e2, s2);
+      return () => window.clearInterval(t3);
+    }, t2);
+  }
+  remove(e2) {
+    const s2 = this.disposers.get(e2);
+    return this.disposers.delete(e2), s2;
+  }
+  flush(e2) {
+    const s2 = this.remove(e2);
+    if (s2)
+      try {
+        s2();
+      } catch (t2) {
+        console.error(t2);
+      }
+  }
+  flushAll() {
+    this.disposers.forEach((e2) => {
+      try {
+        e2();
+      } catch (s2) {
+        console.error(s2);
+      }
+    }), this.disposers.clear();
+  }
+}
+var e = Object.defineProperty, s = (typeof require != "undefined" && require, (s2, r2, t2) => (((s3, r3, t3) => {
+  r3 in s3 ? e(s3, r3, { enumerable: true, configurable: true, writable: true, value: t3 }) : s3[r3] = t3;
+})(s2, typeof r2 != "symbol" ? r2 + "" : r2, t2), t2));
+class r {
+  constructor(e2, r2) {
+    s(this, "_value"), s(this, "_beforeDestroys"), s(this, "_subscribers"), this._value = e2, r2 && (this.compare = r2);
+  }
+  get value() {
+    return this._value;
+  }
+  setValue(e2, s2) {
+    if (!this.compare(e2, this._value)) {
+      const r2 = this._value;
+      this._value = e2, this._subscribers && this._subscribers.forEach((t2) => t2(e2, r2, s2));
+    }
+  }
+  reaction(e2) {
+    return this._subscribers || (this._subscribers = new Set()), this._subscribers.add(e2), () => {
+      this._subscribers && this._subscribers.delete(e2);
+    };
+  }
+  subscribe(e2, s2) {
+    const r2 = this.reaction(e2);
+    return e2(this._value, void 0, s2), r2;
+  }
+  derive(e2, s2, t2) {
+    const i2 = new r(e2(this.value, void 0, t2), s2), o2 = this.reaction((s3, r2, t3) => {
+      i2.setValue(e2(s3, r2, t3));
+    });
+    return i2.addBeforeDestroy(o2), i2;
+  }
+  destroy() {
+    this._beforeDestroys && (this._beforeDestroys.forEach((e2) => e2()), this._beforeDestroys.clear()), this._subscribers && this._subscribers.clear();
+  }
+  addBeforeDestroy(e2) {
+    return this._beforeDestroys || (this._beforeDestroys = new Set()), this._beforeDestroys.add(e2), () => {
+      this._beforeDestroys && this._beforeDestroys.delete(e2);
+    };
+  }
+  compare(e2, s2) {
+    return e2 === s2;
+  }
+}
+function t(e2, s2, t2, i2) {
+  let o2 = e2.map((e3) => e3.value);
+  const u2 = new r(s2(o2, void 0, i2), t2);
+  return e2.forEach((e3, r2) => {
+    const t3 = e3.reaction((e4, t4, i3) => {
+      const c2 = o2.slice();
+      c2[r2] = e4;
+      const n = o2;
+      o2 = c2, u2.setValue(s2(c2, n, i3), i3);
+    });
+    u2.addBeforeDestroy(t3);
+  }), u2;
+}
+function i(e2, s2) {
+  Object.keys(s2).forEach((r2) => {
+    u(e2, r2, s2[r2]);
+  });
+}
+function u(e2, s2, r2) {
+  var t2;
+  return Object.defineProperties(e2, { [s2]: { get: () => r2.value }, [`_${s2}$`]: { value: r2 }, [`set${t2 = s2, t2[0].toUpperCase() + t2.slice(1)}`]: { value: (e3, s3) => r2.setValue(e3, s3) } }), e2;
+}
+function c(e2) {
+  const s2 = (s3) => {
+    const r2 = e2.addDisposer(() => {
+      s3.destroy();
+    });
+    return s3.addBeforeDestroy(() => {
+      e2.remove(r2);
+    }), s3;
+  };
+  return { bindSideEffect: s2, combine: (e3, r2, i2, o2) => s2(t(e3, r2, i2, o2)), createVal: (e3, t2) => s2(new r(e3, t2)) };
+}
+var style$2 = '.telebox-titlebar {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  box-sizing: border-box;\n  height: 26px;\n  display: flex;\n  align-items: center;\n  background: #fff;\n  user-select: none;\n  border-bottom: 1px solid #eeeef7;\n  touch-action: manipulation;\n}\n\n.telebox-title-area {\n  padding-left: 16px;\n  overflow: hidden;\n  position: relative;\n  height: 100%;\n  flex: 1;\n  display: flex;\n  align-items: center;\n}\n\n.telebox-title {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  overflow: hidden;\n  margin: 0;\n  padding: 0;\n  font-size: 14px;\n  font-weight: 400;\n  font-family: PingFangSC-Regular, PingFang SC;\n  white-space: nowrap;\n  word-break: keep-all;\n  text-overflow: ellipsis;\n  color: #191919;\n}\n\n.telebox-drag-area {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  margin: auto;\n  z-index: 10;\n}\n\n.telebox-titlebar-btns {\n  padding-right: 16px;\n  white-space: nowrap;\n  word-break: keep-all;\n  margin-left: auto;\n  font-size: 0;\n}\n\n.telebox-titlebar-btn {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  outline: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n}\n\n.telebox-titlebar-btn ~ .telebox-titlebar-btn {\n  margin-left: 10px;\n}\n\n.telebox-titlebar-btn-icon {\n  width: 22px;\n  height: 22px;\n}\n\n.telebox-readonly .telebox-titlebar-btn {\n  cursor: not-allowed;\n}\n\n.telebox-titlebar-icon-minimize {\n  background: center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=");\n}\n\n.telebox-titlebar-icon-maximize {\n  background: center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==");\n}\n\n.telebox-titlebar-icon-maximize.is-active {\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K");\n}\n\n.telebox-titlebar-icon-close {\n  background: center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=");\n}\n\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n\n.telebox-color-scheme-dark .telebox-title {\n  color: #e9e9e9;\n}\n\n.telebox-color-scheme-dark .telebox-titlebar {\n  color: #e9e9e9;\n  background: #43434d;\n  border-bottom: none;\n}';
+var TELE_BOX_COLOR_SCHEME;
+(function(TELE_BOX_COLOR_SCHEME2) {
+  TELE_BOX_COLOR_SCHEME2["Light"] = "light";
+  TELE_BOX_COLOR_SCHEME2["Dark"] = "dark";
+  TELE_BOX_COLOR_SCHEME2["Auto"] = "auto";
+})(TELE_BOX_COLOR_SCHEME || (TELE_BOX_COLOR_SCHEME = {}));
+var TELE_BOX_STATE;
+(function(TELE_BOX_STATE2) {
+  TELE_BOX_STATE2["Normal"] = "normal";
+  TELE_BOX_STATE2["Minimized"] = "minimized";
+  TELE_BOX_STATE2["Maximized"] = "maximized";
+})(TELE_BOX_STATE || (TELE_BOX_STATE = {}));
+var TELE_BOX_EVENT;
+(function(TELE_BOX_EVENT2) {
+  TELE_BOX_EVENT2["DarkMode"] = "dark_mode";
+  TELE_BOX_EVENT2["PrefersColorScheme"] = "prefers_color_scheme";
+  TELE_BOX_EVENT2["Close"] = "close";
+  TELE_BOX_EVENT2["Focus"] = "focus";
+  TELE_BOX_EVENT2["Blur"] = "blur";
+  TELE_BOX_EVENT2["Move"] = "move";
+  TELE_BOX_EVENT2["Resize"] = "resize";
+  TELE_BOX_EVENT2["IntrinsicMove"] = "intrinsic_move";
+  TELE_BOX_EVENT2["IntrinsicResize"] = "intrinsic_resize";
+  TELE_BOX_EVENT2["VisualResize"] = "visual_resize";
+  TELE_BOX_EVENT2["ZIndex"] = "z_index";
+  TELE_BOX_EVENT2["State"] = "state";
+  TELE_BOX_EVENT2["Minimized"] = "minimized";
+  TELE_BOX_EVENT2["Maximized"] = "maximized";
+  TELE_BOX_EVENT2["Readonly"] = "readonly";
+  TELE_BOX_EVENT2["Destroyed"] = "destroyed";
+})(TELE_BOX_EVENT || (TELE_BOX_EVENT = {}));
+var TELE_BOX_DELEGATE_EVENT;
+(function(TELE_BOX_DELEGATE_EVENT2) {
+  TELE_BOX_DELEGATE_EVENT2["Close"] = "close";
+  TELE_BOX_DELEGATE_EVENT2["Maximize"] = "maximize";
+  TELE_BOX_DELEGATE_EVENT2["Minimize"] = "minimize";
+})(TELE_BOX_DELEGATE_EVENT || (TELE_BOX_DELEGATE_EVENT = {}));
+var TELE_BOX_RESIZE_HANDLE;
+(function(TELE_BOX_RESIZE_HANDLE2) {
+  TELE_BOX_RESIZE_HANDLE2["North"] = "n";
+  TELE_BOX_RESIZE_HANDLE2["South"] = "s";
+  TELE_BOX_RESIZE_HANDLE2["West"] = "w";
+  TELE_BOX_RESIZE_HANDLE2["East"] = "e";
+  TELE_BOX_RESIZE_HANDLE2["NorthWest"] = "nw";
+  TELE_BOX_RESIZE_HANDLE2["NorthEast"] = "ne";
+  TELE_BOX_RESIZE_HANDLE2["SouthEast"] = "se";
+  TELE_BOX_RESIZE_HANDLE2["SouthWest"] = "sw";
+})(TELE_BOX_RESIZE_HANDLE || (TELE_BOX_RESIZE_HANDLE = {}));
+const TeleBoxDragHandleType = "dh";
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function preventEvent(ev) {
+  ev.stopPropagation();
+  if (ev.cancelable) {
+    ev.preventDefault();
+  }
+}
+function flattenEvent(ev) {
+  return ev.touches ? ev.touches[0] : ev;
+}
+function genUniqueKey() {
+  return Date.now().toString().slice(6) + Math.random().toString().slice(2, 8);
+}
+let defaultBoxCount = 1;
+function getBoxDefaultName() {
+  return `New Box ${defaultBoxCount++}`;
+}
+function isTruthy(value) {
+  return Boolean(value);
+}
+function isFalsy(value) {
+  return !value;
+}
+class DefaultTitleBar {
+  constructor({
+    readonly = false,
+    title,
+    buttons,
+    onEvent,
+    onDragStart,
+    namespace = "telebox",
+    state = TELE_BOX_STATE.Normal
+  } = {}) {
+    this.$btns = [];
+    this.sideEffect = new o();
+    this.lastTitleBarClick = {
+      timestamp: 0,
+      clientX: -100,
+      clientY: -100
+    };
+    this.handleTitleBarClick = (ev) => {
+      var _a;
+      if (this.readonly) {
+        return;
+      }
+      if (ev.button !== 0) {
+        return;
+      }
+      if ((_a = ev.target.dataset) == null ? void 0 : _a.teleTitleBarNoDblClick) {
+        return;
+      }
+      preventEvent(ev);
+      const now = Date.now();
+      if (now - this.lastTitleBarClick.timestamp <= 500) {
+        if (Math.abs(ev.clientX - this.lastTitleBarClick.clientX) <= 5 && Math.abs(ev.clientY - this.lastTitleBarClick.clientY) <= 5) {
+          if (this.onEvent) {
+            this.onEvent({ type: TELE_BOX_DELEGATE_EVENT.Maximize });
+          }
+        }
+      } else if (this.onDragStart) {
+        this.onDragStart(ev);
+      }
+      this.lastTitleBarClick.timestamp = now;
+      this.lastTitleBarClick.clientX = ev.clientX;
+      this.lastTitleBarClick.clientY = ev.clientY;
+    };
+    this.lastTitleBarTouch = {
+      timestamp: 0,
+      clientX: -100,
+      clientY: -100
+    };
+    this.handleTitleBarTouch = (ev) => {
+      var _a;
+      if (this.readonly) {
+        return;
+      }
+      if ((_a = ev.target.dataset) == null ? void 0 : _a.teleTitleBarNoDblClick) {
+        return;
+      }
+      preventEvent(ev);
+      const now = Date.now();
+      const {
+        clientX = this.lastTitleBarTouch.clientX + 100,
+        clientY = this.lastTitleBarTouch.clientY + 100
+      } = ev.touches[0] || {};
+      if (now - this.lastTitleBarTouch.timestamp <= 500) {
+        if (Math.abs(clientX - this.lastTitleBarTouch.clientX) <= 10 && Math.abs(clientY - this.lastTitleBarTouch.clientY) <= 10) {
+          if (this.onEvent) {
+            this.onEvent({ type: TELE_BOX_DELEGATE_EVENT.Maximize });
+          }
+        }
+      } else if (this.onDragStart) {
+        this.onDragStart(ev);
+      }
+      this.lastTitleBarTouch.timestamp = now;
+      this.lastTitleBarTouch.clientX = clientX;
+      this.lastTitleBarTouch.clientY = clientY;
+    };
+    this.readonly = readonly;
+    this.onEvent = onEvent;
+    this.onDragStart = onDragStart;
+    this.namespace = namespace;
+    this.title = title;
+    this.state = state;
+    this.buttons = buttons || [
+      {
+        type: TELE_BOX_DELEGATE_EVENT.Minimize,
+        iconClassName: this.wrapClassName("titlebar-icon-minimize")
+      },
+      {
+        type: TELE_BOX_DELEGATE_EVENT.Maximize,
+        iconClassName: this.wrapClassName("titlebar-icon-maximize"),
+        isActive: (state2) => state2 === TELE_BOX_STATE.Maximized
+      },
+      {
+        type: TELE_BOX_DELEGATE_EVENT.Close,
+        iconClassName: this.wrapClassName("titlebar-icon-close")
+      }
+    ];
+    this.$dragArea = this.renderDragArea();
+  }
+  setTitle(title) {
+    this.title = title;
+    if (this.$title) {
+      this.$title.textContent = title;
+      this.$title.title = title;
+    }
+  }
+  setState(state) {
+    if (this.state !== state) {
+      this.state = state;
+      this.buttons.forEach((btn, i2) => {
+        if (btn.isActive) {
+          this.$btns[i2].classList.toggle("is-active", btn.isActive(state));
+        }
+      });
+    }
+  }
+  setReadonly(readonly) {
+    if (this.readonly !== readonly) {
+      this.readonly = readonly;
+    }
+  }
+  render() {
+    if (!this.$titleBar) {
+      this.$titleBar = document.createElement("div");
+      this.$titleBar.className = this.wrapClassName("titlebar");
+      const $titleArea = document.createElement("div");
+      $titleArea.className = this.wrapClassName("title-area");
+      $titleArea.dataset.teleBoxHandle = TeleBoxDragHandleType;
+      this.$title = document.createElement("h1");
+      this.$title.className = this.wrapClassName("title");
+      this.$title.dataset.teleBoxHandle = TeleBoxDragHandleType;
+      if (this.title) {
+        this.$title.textContent = this.title;
+        this.$title.title = this.title;
+      }
+      $titleArea.appendChild(this.$title);
+      $titleArea.appendChild(this.$dragArea);
+      const $buttonsContainer = document.createElement("div");
+      $buttonsContainer.className = this.wrapClassName("titlebar-btns");
+      this.buttons.forEach(({ iconClassName, isActive }, i2) => {
+        const teleTitleBarBtnIndex = String(i2);
+        const $btn = document.createElement("button");
+        $btn.className = `${this.wrapClassName("titlebar-btn")} ${iconClassName}`;
+        $btn.dataset.teleTitleBarBtnIndex = teleTitleBarBtnIndex;
+        $btn.dataset.teleTitleBarNoDblClick = "true";
+        if (isActive) {
+          $btn.classList.toggle("is-active", isActive(this.state));
+        }
+        this.$btns.push($btn);
+        $buttonsContainer.appendChild($btn);
+      });
+      this.sideEffect.addEventListener($buttonsContainer, "click", (ev) => {
+        var _a;
+        if (this.readonly) {
+          return;
+        }
+        const target = ev.target;
+        const teleTitleBarBtnIndex = Number((_a = target.dataset) == null ? void 0 : _a.teleTitleBarBtnIndex);
+        if (!Number.isNaN(teleTitleBarBtnIndex) && teleTitleBarBtnIndex < this.buttons.length) {
+          preventEvent(ev);
+          const btn = this.buttons[teleTitleBarBtnIndex];
+          if (this.onEvent) {
+            this.onEvent({
+              type: btn.type,
+              value: btn.value
+            });
+          }
+        }
+      });
+      this.$titleBar.appendChild($titleArea);
+      this.$titleBar.appendChild($buttonsContainer);
+    }
+    return this.$titleBar;
+  }
+  renderDragArea() {
+    const $dragArea = document.createElement("div");
+    $dragArea.className = this.wrapClassName("drag-area");
+    $dragArea.dataset.teleBoxHandle = TeleBoxDragHandleType;
+    this.sideEffect.addEventListener($dragArea, "mousedown", this.handleTitleBarClick);
+    this.sideEffect.addEventListener($dragArea, "touchstart", this.handleTitleBarTouch, { passive: true });
+    return $dragArea;
+  }
+  dragHandle() {
+    return this.$titleBar;
+  }
+  wrapClassName(className) {
+    return `${this.namespace}-${className}`;
+  }
+  destroy() {
+    this.sideEffect.flushAll();
+    if (this.$titleBar) {
+      this.$titleBar = void 0;
+      this.$title = void 0;
+      this.$btns.length = 0;
+      this.onDragStart = void 0;
+      this.onEvent = void 0;
+    }
+  }
+}
+class TeleBox {
+  constructor({
+    id = genUniqueKey(),
+    title = getBoxDefaultName(),
+    prefersColorScheme = TELE_BOX_COLOR_SCHEME.Light,
+    darkMode,
+    visible = true,
+    width = 0.5,
+    height = 0.5,
+    minWidth = 0,
+    minHeight = 0,
+    x = 0.1,
+    y = 0.1,
+    minimized = false,
+    maximized = false,
+    readonly = false,
+    resizable = true,
+    draggable = true,
+    fence = true,
+    fixRatio = false,
+    focus = false,
+    zIndex = 100,
+    namespace = "telebox",
+    titleBar,
+    content,
+    footer,
+    styles,
+    containerRect = {
+      x: 0,
+      y: 0,
+      width: window.innerWidth,
+      height: window.innerHeight
+    },
+    collectorRect
+  } = {}) {
+    this._renderSideEffect = new o();
+    this.handleTrackStart = (ev) => {
+      var _a;
+      return (_a = this._handleTrackStart) == null ? void 0 : _a.call(this, ev);
+    };
+    this._sideEffect = new o();
+    this._valSideEffectBinder = c(this._sideEffect);
+    const { combine, createVal } = this._valSideEffectBinder;
+    this.id = id;
+    this.namespace = namespace;
+    this.events = new EventEmitter();
+    this._delegateEvents = new EventEmitter();
+    const prefersColorScheme$ = createVal(prefersColorScheme);
+    prefersColorScheme$.reaction((prefersColorScheme2, _, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_EVENT.PrefersColorScheme, prefersColorScheme2);
+      }
+    });
+    const darkMode$ = createVal(Boolean(darkMode));
+    if (darkMode == null) {
+      prefersColorScheme$.subscribe((prefersColorScheme2, _, skipUpdate) => {
+        this._sideEffect.add(() => {
+          if (prefersColorScheme2 === "auto") {
+            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+            if (prefersDark) {
+              darkMode$.setValue(prefersDark.matches, skipUpdate);
+              const handler = (evt) => {
+                darkMode$.setValue(evt.matches, skipUpdate);
+              };
+              prefersDark.addListener(handler);
+              return () => prefersDark.removeListener(handler);
+            } else {
+              return noop;
+            }
+          } else {
+            darkMode$.setValue(prefersColorScheme2 === "dark", skipUpdate);
+            return noop;
+          }
+        }, "prefers-color-scheme");
+      });
+    }
+    darkMode$.reaction((darkMode2, _, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_EVENT.DarkMode, darkMode2);
+      }
+    });
+    const containerRect$ = createVal(containerRect, shallowequal);
+    const collectorRect$ = createVal(collectorRect, shallowequal);
+    const title$ = createVal(title);
+    const visible$ = createVal(visible);
+    visible$.reaction((visible2, _, skipUpdate) => {
+      if (!skipUpdate && !visible2) {
+        this.events.emit(TELE_BOX_EVENT.Close);
+      }
+    });
+    const readonly$ = createVal(readonly);
+    readonly$.reaction((readonly2, _, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_EVENT.Readonly, readonly2);
+      }
+    });
+    const resizable$ = createVal(resizable);
+    const draggable$ = createVal(draggable);
+    const fence$ = createVal(fence);
+    const fixRatio$ = createVal(fixRatio);
+    const zIndex$ = createVal(zIndex);
+    zIndex$.reaction((zIndex2, _, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_EVENT.ZIndex, zIndex2);
+      }
+    });
+    const focus$ = createVal(focus);
+    focus$.reaction((focus2, _, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(focus2 ? TELE_BOX_EVENT.Focus : TELE_BOX_EVENT.Blur);
+      }
+    });
+    const minimized$ = createVal(minimized);
+    minimized$.reaction((minimized2, _, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_EVENT.Minimized, minimized2);
+      }
+    });
+    const maximized$ = createVal(maximized);
+    maximized$.reaction((maximized2, _, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_EVENT.Maximized, maximized2);
+      }
+    });
+    const state$ = combine([minimized$, maximized$], ([minimized2, maximized2]) => minimized2 ? TELE_BOX_STATE.Minimized : maximized2 ? TELE_BOX_STATE.Maximized : TELE_BOX_STATE.Normal);
+    state$.reaction((state, _, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_EVENT.State, state);
+      }
+    });
+    const minSize$ = createVal({
+      width: clamp(minWidth, 0, 1),
+      height: clamp(minHeight, 0, 1)
+    }, shallowequal);
+    const intrinsicSize$ = createVal({
+      width: clamp(width, minSize$.value.width, 1),
+      height: clamp(height, minSize$.value.height, 1)
+    }, shallowequal);
+    minSize$.reaction((minSize, _, skipUpdate) => {
+      intrinsicSize$.setValue({
+        width: clamp(width, minSize.width, 1),
+        height: clamp(height, minSize.height, 1)
+      }, skipUpdate);
+    });
+    intrinsicSize$.reaction((size, _, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_EVENT.IntrinsicResize, size);
+      }
+    });
+    const size$ = combine([intrinsicSize$, maximized$], ([intrinsicSize, maximized2]) => {
+      if (maximized2) {
+        return { width: 1, height: 1 };
+      }
+      return intrinsicSize;
+    }, shallowequal);
+    size$.reaction((size, _, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_EVENT.Resize, size);
+      }
+    });
+    const visualSize$ = combine([size$, minimized$, containerRect$, collectorRect$], ([size, minimized2, containerRect2, collectorRect2]) => {
+      if (minimized2 && collectorRect2) {
+        return {
+          width: collectorRect2.width / size.width / containerRect2.width,
+          height: collectorRect2.height / size.height / containerRect2.height
+        };
+      }
+      return size;
+    }, shallowequal);
+    visualSize$.reaction((size, _, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_EVENT.VisualResize, size);
+      }
+    });
+    const intrinsicCoord$ = createVal({ x: clamp(x, 0, 1), y: clamp(y, 0, 1) }, shallowequal);
+    intrinsicCoord$.reaction((coord, _, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_EVENT.IntrinsicMove, coord);
+      }
+    });
+    const coord$ = combine([
+      intrinsicCoord$,
+      intrinsicSize$,
+      containerRect$,
+      collectorRect$,
+      minimized$,
+      maximized$
+    ], ([
+      intrinsicCoord,
+      intrinsicSize,
+      containerRect2,
+      collectorRect2,
+      minimized2,
+      maximized2
+    ]) => {
+      if (minimized2 && collectorRect2) {
+        if (maximized2) {
+          return {
+            x: (collectorRect2.x + collectorRect2.width / 2) / containerRect2.width - 1 / 2,
+            y: (collectorRect2.y + collectorRect2.height / 2) / containerRect2.height - 1 / 2
+          };
+        }
+        return {
+          x: (collectorRect2.x + collectorRect2.width / 2) / containerRect2.width - intrinsicSize.width / 2,
+          y: (collectorRect2.y + collectorRect2.height / 2) / containerRect2.height - intrinsicSize.height / 2
+        };
+      }
+      if (maximized2) {
+        return { x: 0, y: 0 };
+      }
+      return intrinsicCoord;
+    }, shallowequal);
+    coord$.reaction((coord, _, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_EVENT.Move, coord);
+      }
+    });
+    this.titleBar = titleBar || new DefaultTitleBar({
+      readonly: readonly$.value,
+      title: title$.value,
+      namespace: this.namespace,
+      onDragStart: (event) => {
+        var _a;
+        return (_a = this._handleTrackStart) == null ? void 0 : _a.call(this, event);
+      },
+      onEvent: (event) => {
+        if (this._delegateEvents.listeners.length > 0) {
+          this._delegateEvents.emit(event.type);
+        } else {
+          switch (event.type) {
+            case TELE_BOX_DELEGATE_EVENT.Maximize: {
+              maximized$.setValue(!maximized$.value);
+              break;
+            }
+            case TELE_BOX_DELEGATE_EVENT.Minimize: {
+              minimized$.setValue(true);
+              break;
+            }
+            case TELE_BOX_DELEGATE_EVENT.Close: {
+              visible$.setValue(false);
+              break;
+            }
+            default: {
+              console.error("Unsupported titleBar event:", event);
+              break;
+            }
+          }
+        }
+      }
+    });
+    readonly$.reaction((readonly2) => {
+      this.titleBar.setReadonly(readonly2);
+    });
+    const $userContent$ = createVal(content);
+    const $userFooter$ = createVal(footer);
+    const $userStyles$ = createVal(styles);
+    const valConfig = {
+      prefersColorScheme: prefersColorScheme$,
+      darkMode: darkMode$,
+      containerRect: containerRect$,
+      collectorRect: collectorRect$,
+      title: title$,
+      visible: visible$,
+      readonly: readonly$,
+      resizable: resizable$,
+      draggable: draggable$,
+      fence: fence$,
+      fixRatio: fixRatio$,
+      focus: focus$,
+      zIndex: zIndex$,
+      minimized: minimized$,
+      maximized: maximized$,
+      $userContent: $userContent$,
+      $userFooter: $userFooter$,
+      $userStyles: $userStyles$
+    };
+    i(this, valConfig);
+    this._state$ = state$;
+    this._minSize$ = minSize$;
+    this._size$ = size$;
+    this._intrinsicSize$ = intrinsicSize$;
+    this._visualSize$ = visualSize$;
+    this._coord$ = coord$;
+    this._intrinsicCoord$ = intrinsicCoord$;
+    if (this.fixRatio) {
+      this.transform(coord$.value.x, coord$.value.y, size$.value.width, size$.value.height, true);
+    }
+    this.$box = this.render();
+  }
+  get darkMode() {
+    return this._darkMode$.value;
+  }
+  get state() {
+    return this._state$.value;
+  }
+  setState(state, skipUpdate = false) {
+    switch (state) {
+      case TELE_BOX_STATE.Maximized: {
+        this.setMinimized(false, skipUpdate);
+        this.setMaximized(true, skipUpdate);
+        break;
+      }
+      case TELE_BOX_STATE.Minimized: {
+        this.setMinimized(true, skipUpdate);
+        this.setMaximized(false, skipUpdate);
+        break;
+      }
+      default: {
+        this.setMinimized(false, skipUpdate);
+        this.setMaximized(false, skipUpdate);
+        break;
+      }
+    }
+    return this;
+  }
+  get minWidth() {
+    return this._minSize$.value.width;
+  }
+  get minHeight() {
+    return this._minSize$.value.height;
+  }
+  setMinWidth(minWidth, skipUpdate = false) {
+    this._minSize$.setValue({ width: minWidth, height: this.minHeight }, skipUpdate);
+    return this;
+  }
+  setMinHeight(minHeight, skipUpdate = false) {
+    this._minSize$.setValue({ width: this.minWidth, height: minHeight }, skipUpdate);
+    return this;
+  }
+  get intrinsicWidth() {
+    return this._intrinsicSize$.value.width;
+  }
+  get intrinsicHeight() {
+    return this._intrinsicSize$.value.height;
+  }
+  resize(width, height, skipUpdate = false) {
+    this._intrinsicSize$.setValue({ width, height }, skipUpdate);
+    return this;
+  }
+  get width() {
+    return this._size$.value.width;
+  }
+  get height() {
+    return this._size$.value.height;
+  }
+  get absoluteWidth() {
+    return this.width * this.containerRect.width;
+  }
+  get absoluteHeight() {
+    return this.height * this.containerRect.height;
+  }
+  get visualWidth() {
+    return this._visualSize$.value.width;
+  }
+  get visualHeight() {
+    return this._visualSize$.value.height;
+  }
+  get intrinsicX() {
+    return this._intrinsicCoord$.value.x;
+  }
+  get intrinsicY() {
+    return this._intrinsicCoord$.value.y;
+  }
+  move(x, y, skipUpdate = false) {
+    this._intrinsicCoord$.setValue({ x, y }, skipUpdate);
+    return this;
+  }
+  get x() {
+    return this._coord$.value.x;
+  }
+  get y() {
+    return this._coord$.value.y;
+  }
+  transform(x, y, width, height, skipUpdate = false) {
+    if (this.fixRatio) {
+      const newHeight = this.intrinsicHeight / this.intrinsicWidth * width;
+      if (y !== this.intrinsicY) {
+        y -= newHeight - height;
+      }
+      height = newHeight;
+    }
+    if (y < 0) {
+      y = 0;
+      if (height > this.intrinsicHeight) {
+        height = this.intrinsicHeight;
+      }
+    }
+    this._intrinsicCoord$.setValue({
+      x: width >= this.minWidth ? x : this.intrinsicX,
+      y: height >= this.minHeight ? y : this.intrinsicY
+    }, skipUpdate);
+    this._intrinsicSize$.setValue({
+      width: clamp(width, this.minWidth, 1),
+      height: clamp(height, this.minHeight, 1)
+    }, skipUpdate);
+    return this;
+  }
+  mount(container) {
+    container.appendChild(this.render());
+    return this;
+  }
+  unmount() {
+    if (this.$box) {
+      this.$box.remove();
+    }
+    return this;
+  }
+  mountContent(content) {
+    this.set$userContent(content);
+    return this;
+  }
+  unmountContent() {
+    this.set$userContent(void 0);
+    return this;
+  }
+  mountFooter(footer) {
+    this.set$userFooter(footer);
+    return this;
+  }
+  unmountFooter() {
+    this.set$userFooter(void 0);
+    return this;
+  }
+  getUserStyles() {
+    return this.$userStyles;
+  }
+  mountStyles(styles) {
+    let $styles;
+    if (typeof styles === "string") {
+      $styles = document.createElement("style");
+      $styles.textContent = styles;
+    } else {
+      $styles = styles;
+    }
+    this.set$userStyles($styles);
+    return this;
+  }
+  unmountStyles() {
+    this.set$userStyles(void 0);
+    return this;
+  }
+  render(root) {
+    if (root) {
+      if (root === this.$box) {
+        return this.$box;
+      } else {
+        this.$box = root;
+      }
+    } else {
+      if (this.$box) {
+        return this.$box;
+      } else {
+        this.$box = document.createElement("div");
+      }
+    }
+    this._renderSideEffect.flushAll();
+    this.$box.classList.add(this.wrapClassName("box"));
+    const bindClassName = (el, val, className, predicate = isTruthy) => {
+      return this._renderSideEffect.add(() => {
+        const wrappedClassName = this.wrapClassName(className);
+        return val.subscribe((value) => {
+          el.classList.toggle(wrappedClassName, predicate(value));
+        });
+      });
+    };
+    bindClassName(this.$box, this._readonly$, "readonly");
+    bindClassName(this.$box, this._draggable$, "no-drag", isFalsy);
+    bindClassName(this.$box, this._resizable$, "no-resize", isFalsy);
+    bindClassName(this.$box, this._focus$, "blur", isFalsy);
+    bindClassName(this.$box, this._darkMode$, "color-scheme-dark");
+    bindClassName(this.$box, this._darkMode$, "color-scheme-light", isFalsy);
+    this._renderSideEffect.add(() => {
+      const minimizedClassName = this.wrapClassName("minimized");
+      const maximizedClassName = this.wrapClassName("maximized");
+      const MAXIMIZED_TIMER_ID = "box-maximized-timer";
+      return this._state$.subscribe((state) => {
+        this.$box.classList.toggle(minimizedClassName, state === TELE_BOX_STATE.Minimized);
+        if (state === TELE_BOX_STATE.Maximized) {
+          this._renderSideEffect.flush(MAXIMIZED_TIMER_ID);
+          this.$box.classList.toggle(maximizedClassName, true);
+        } else {
+          this._renderSideEffect.setTimeout(() => {
+            this.$box.classList.toggle(maximizedClassName, false);
+          }, 0, MAXIMIZED_TIMER_ID);
+        }
+      });
+    });
+    this._renderSideEffect.add(() => this._visible$.subscribe((visible) => {
+      this.$box.style.display = visible ? "block" : "none";
+    }));
+    this._renderSideEffect.add(() => this._zIndex$.subscribe((zIndex) => {
+      this.$box.style.zIndex = String(zIndex);
+    }));
+    const boxStyler = index(this.$box);
+    this.$box.dataset.teleBoxID = this.id;
+    this.$box.style.width = this.absoluteWidth + "px";
+    this.$box.style.height = this.absoluteHeight + "px";
+    const translateX = this.x * this.containerRect.width + this.containerRect.x;
+    const translateY = this.y * this.containerRect.height + this.containerRect.y;
+    this.$box.style.transform = `translate(${translateX - 10}px,${translateY - 10}px)`;
+    this._valSideEffectBinder.combine([
+      this._coord$,
+      this._size$,
+      this._minimized$,
+      this._containerRect$,
+      this._collectorRect$
+    ], ([coord, size, minimized, containerRect, collectorRect]) => {
+      const absoluteWidth = size.width * containerRect.width;
+      const absoluteHeight = size.height * containerRect.height;
+      return {
+        width: absoluteWidth + (minimized && collectorRect ? 1 : 0),
+        height: absoluteHeight + (minimized && collectorRect ? 1 : 0),
+        x: coord.x * containerRect.width,
+        y: coord.y * containerRect.height,
+        scaleX: minimized && collectorRect ? collectorRect.width / absoluteWidth : 1,
+        scaleY: minimized && collectorRect ? collectorRect.height / absoluteHeight : 1
+      };
+    }, shallowequal).subscribe((styles) => {
+      boxStyler.set(styles);
+    });
+    boxStyler.set({ x: translateX, y: translateY });
+    const $boxMain = document.createElement("div");
+    $boxMain.className = this.wrapClassName("box-main");
+    this.$box.appendChild($boxMain);
+    const $titleBar = document.createElement("div");
+    $titleBar.className = this.wrapClassName("titlebar-wrap");
+    $titleBar.appendChild(this.titleBar.render());
+    this.$titleBar = $titleBar;
+    const $contentWrap = document.createElement("div");
+    $contentWrap.className = this.wrapClassName("content-wrap");
+    const $content = document.createElement("div");
+    $content.className = this.wrapClassName("content") + " tele-fancy-scrollbar";
+    this.$content = $content;
+    this._renderSideEffect.add(() => {
+      let last$userStyles;
+      return this._$userStyles$.subscribe(($userStyles) => {
+        if (last$userStyles) {
+          last$userStyles.remove();
+        }
+        last$userStyles = $userStyles;
+        if ($userStyles) {
+          $contentWrap.appendChild($userStyles);
+        }
+      });
+    });
+    this._renderSideEffect.add(() => {
+      let last$userContent;
+      return this._$userContent$.subscribe(($userContent) => {
+        if (last$userContent) {
+          last$userContent.remove();
+        }
+        last$userContent = $userContent;
+        if ($userContent) {
+          $content.appendChild($userContent);
+        }
+      });
+    });
+    $contentWrap.appendChild($content);
+    const $footer = document.createElement("div");
+    $footer.className = this.wrapClassName("footer-wrap");
+    this.$footer = $footer;
+    this._renderSideEffect.add(() => {
+      let last$userFooter;
+      return this._$userFooter$.subscribe(($userFooter) => {
+        if (last$userFooter) {
+          last$userFooter.remove();
+        }
+        last$userFooter = $userFooter;
+        if ($userFooter) {
+          $footer.appendChild($userFooter);
+        }
+      });
+    });
+    $boxMain.appendChild($titleBar);
+    $boxMain.appendChild($contentWrap);
+    $boxMain.appendChild($footer);
+    this._renderResizeHandlers();
+    return this.$box;
+  }
+  _renderResizeHandlers() {
+    const $resizeHandles = document.createElement("div");
+    $resizeHandles.className = this.wrapClassName("resize-handles");
+    Object.values(TELE_BOX_RESIZE_HANDLE).forEach((handleType) => {
+      const $handle = document.createElement("div");
+      $handle.className = this.wrapClassName(handleType) + " " + this.wrapClassName("resize-handle");
+      $handle.dataset.teleBoxHandle = handleType;
+      $resizeHandles.appendChild($handle);
+    });
+    this.$box.appendChild($resizeHandles);
+    const TRACKING_DISPOSER_ID = "handle-tracking-listener";
+    const transformingClassName = this.wrapClassName("transforming");
+    let $trackMask;
+    let trackStartX = 0;
+    let trackStartY = 0;
+    let trackStartWidth = 0;
+    let trackStartHeight = 0;
+    let trackStartPageX = 0;
+    let trackStartPageY = 0;
+    let trackingHandle;
+    const handleTracking = (ev) => {
+      if (this.state !== TELE_BOX_STATE.Normal) {
+        return;
+      }
+      preventEvent(ev);
+      let { pageX, pageY } = flattenEvent(ev);
+      if (pageY < 0) {
+        pageY = 0;
+      }
+      const offsetX = (pageX - trackStartPageX) / this.containerRect.width;
+      const offsetY = (pageY - trackStartPageY) / this.containerRect.height;
+      switch (trackingHandle) {
+        case TELE_BOX_RESIZE_HANDLE.North: {
+          this.transform(this.x, trackStartY + offsetY, this.width, trackStartHeight - offsetY);
+          break;
+        }
+        case TELE_BOX_RESIZE_HANDLE.South: {
+          this.transform(this.x, this.y, this.width, trackStartHeight + offsetY);
+          break;
+        }
+        case TELE_BOX_RESIZE_HANDLE.West: {
+          this.transform(trackStartX + offsetX, this.y, trackStartWidth - offsetX, this.height);
+          break;
+        }
+        case TELE_BOX_RESIZE_HANDLE.East: {
+          this.transform(this.x, this.y, trackStartWidth + offsetX, this.height);
+          break;
+        }
+        case TELE_BOX_RESIZE_HANDLE.NorthWest: {
+          this.transform(trackStartX + offsetX, trackStartY + offsetY, trackStartWidth - offsetX, trackStartHeight - offsetY);
+          break;
+        }
+        case TELE_BOX_RESIZE_HANDLE.NorthEast: {
+          this.transform(this.x, trackStartY + offsetY, trackStartWidth + offsetX, trackStartHeight - offsetY);
+          break;
+        }
+        case TELE_BOX_RESIZE_HANDLE.SouthEast: {
+          this.transform(this.x, this.y, trackStartWidth + offsetX, trackStartHeight + offsetY);
+          break;
+        }
+        case TELE_BOX_RESIZE_HANDLE.SouthWest: {
+          this.transform(trackStartX + offsetX, this.y, trackStartWidth - offsetX, trackStartHeight + offsetY);
+          break;
+        }
+        default: {
+          if (this.fence) {
+            this.move(clamp(trackStartX + offsetX, 0, 1 - this.width), clamp(trackStartY + offsetY, 0, 1 - this.height));
+          } else {
+            const xOverflowOffset = 20 / this.containerRect.width;
+            const yOverflowOffset = 20 / this.containerRect.height;
+            this.move(clamp(trackStartX + offsetX, xOverflowOffset - this.width, 1 - xOverflowOffset), clamp(trackStartY + offsetY, 0, 1 - yOverflowOffset));
+          }
+          break;
+        }
+      }
+    };
+    const handleTrackEnd = (ev) => {
+      trackingHandle = void 0;
+      if (!$trackMask) {
+        return;
+      }
+      preventEvent(ev);
+      this.$box.classList.toggle(transformingClassName, false);
+      this._sideEffect.flush(TRACKING_DISPOSER_ID);
+      $trackMask.remove();
+    };
+    const handleTrackStart = (ev) => {
+      var _a;
+      if (this.readonly) {
+        return;
+      }
+      if (ev.button != null && ev.button !== 0) {
+        return;
+      }
+      if (!this.draggable || trackingHandle || this.state !== TELE_BOX_STATE.Normal) {
+        return;
+      }
+      const target = ev.target;
+      if ((_a = target.dataset) == null ? void 0 : _a.teleBoxHandle) {
+        preventEvent(ev);
+        trackStartX = this.x;
+        trackStartY = this.y;
+        trackStartWidth = this.width;
+        trackStartHeight = this.height;
+        ({ pageX: trackStartPageX, pageY: trackStartPageY } = flattenEvent(ev));
+        trackingHandle = target.dataset.teleBoxHandle;
+        if (!$trackMask) {
+          $trackMask = document.createElement("div");
+        }
+        const cursor = trackingHandle ? this.wrapClassName(`cursor-${trackingHandle}`) : "";
+        $trackMask.className = this.wrapClassName(`track-mask${cursor ? ` ${cursor}` : ""}`);
+        this.$box.appendChild($trackMask);
+        this.$box.classList.add(transformingClassName);
+        this._sideEffect.add(() => {
+          window.addEventListener("mousemove", handleTracking);
+          window.addEventListener("touchmove", handleTracking, {
+            passive: false
+          });
+          window.addEventListener("mouseup", handleTrackEnd);
+          window.addEventListener("touchend", handleTrackEnd, {
+            passive: false
+          });
+          window.addEventListener("touchcancel", handleTrackEnd, {
+            passive: false
+          });
+          return () => {
+            window.removeEventListener("mousemove", handleTracking);
+            window.removeEventListener("touchmove", handleTracking);
+            window.removeEventListener("mouseup", handleTrackEnd);
+            window.removeEventListener("touchend", handleTrackEnd);
+            window.removeEventListener("touchcancel", handleTrackEnd);
+          };
+        }, TRACKING_DISPOSER_ID);
+      }
+    };
+    this._handleTrackStart = handleTrackStart;
+    this._sideEffect.addEventListener($resizeHandles, "mousedown", handleTrackStart, {}, "box-resizeHandles-mousedown");
+    this._sideEffect.addEventListener($resizeHandles, "touchstart", handleTrackStart, { passive: false }, "box-resizeHandles-touchstart");
+  }
+  destroy() {
+    this.$box.remove();
+    this.events.emit(TELE_BOX_EVENT.Destroyed);
+    this._sideEffect.flushAll();
+    this._renderSideEffect.flushAll();
+    this.events.removeAllListeners();
+    this._delegateEvents.removeAllListeners();
+  }
+  wrapClassName(className) {
+    return `${this.namespace}-${className}`;
+  }
+}
+function noop() {
+  return;
+}
+const useUpdateEffect = (effect, deps) => {
+  const isFirst = useRef(true);
+  useEffect(() => {
+    if (isFirst.current) {
+      isFirst.current = false;
+      return;
+    }
+    return effect();
+  }, deps);
+};
+const TeleBoxReact = (props) => {
+  const [teleBox] = useState(() => new TeleBox(props));
+  useUpdateEffect(() => {
+    if (props.prefersColorScheme != null) {
+      teleBox.setPrefersColorScheme(props.prefersColorScheme);
+    }
+  }, [teleBox, props.prefersColorScheme]);
+  useUpdateEffect(() => {
+    if (props.minWidth != null) {
+      teleBox.setMinWidth(props.minWidth);
+    }
+  }, [teleBox, props.minWidth]);
+  useUpdateEffect(() => {
+    if (props.minHeight != null) {
+      teleBox.setMinHeight(props.minHeight);
+    }
+  }, [teleBox, props.minHeight]);
+  useUpdateEffect(() => {
+    var _a, _b;
+    teleBox.resize((_a = props.width) != null ? _a : teleBox.width, (_b = props.height) != null ? _b : teleBox.height, true);
+  }, [teleBox, props.width, props.height]);
+  useUpdateEffect(() => {
+    var _a, _b;
+    teleBox.move((_a = props.x) != null ? _a : teleBox.x, (_b = props.y) != null ? _b : teleBox.y, true);
+  }, [teleBox, props.x, props.y]);
+  useUpdateEffect(() => {
+    if (props.title != null) {
+      teleBox.setTitle(props.title);
+    }
+  }, [teleBox, props.title]);
+  useUpdateEffect(() => {
+    if (props.visible != null) {
+      teleBox.setVisible(props.visible);
+    }
+  }, [teleBox, props.visible]);
+  useUpdateEffect(() => {
+    if (props.minimized != null) {
+      teleBox.setMinimized(props.minimized, true);
+    }
+  }, [teleBox, props.minimized]);
+  useUpdateEffect(() => {
+    if (props.maximized != null) {
+      teleBox.setMaximized(props.maximized, true);
+    }
+  }, [teleBox, props.maximized]);
+  useUpdateEffect(() => {
+    if (props.state != null) {
+      teleBox.setState(props.state, true);
+    }
+  }, [teleBox, props.state]);
+  useUpdateEffect(() => {
+    if (props.draggable != null) {
+      teleBox.setDraggable(props.draggable);
+    }
+  }, [teleBox, props.draggable]);
+  useUpdateEffect(() => {
+    if (props.resizable != null) {
+      teleBox.setResizable(props.resizable);
+    }
+  }, [teleBox, props.resizable]);
+  useUpdateEffect(() => {
+    if (props.fence != null) {
+      teleBox.setFence(props.fence);
+    }
+  }, [teleBox, props.fence]);
+  useUpdateEffect(() => {
+    if (props.containerRect != null) {
+      teleBox.setContainerRect(props.containerRect);
+    }
+  }, [teleBox, props.containerRect]);
+  useUpdateEffect(() => {
+    if (props.fixRatio != null) {
+      teleBox.setFixRatio(props.fixRatio);
+    }
+  }, [teleBox, props.fixRatio]);
+  useEffect(() => {
+    if (props.onResize) {
+      teleBox.events.on(TELE_BOX_EVENT.Resize, props.onResize);
+      return () => {
+        teleBox.events.off(TELE_BOX_EVENT.Resize, props.onResize);
+      };
+    }
+    return;
+  }, [teleBox, props.onResize]);
+  useEffect(() => {
+    if (props.onMove) {
+      teleBox.events.on(TELE_BOX_EVENT.Move, props.onMove);
+      return () => {
+        teleBox.events.off(TELE_BOX_EVENT.Move, props.onMove);
+      };
+    }
+    return;
+  }, [teleBox, props.onMove]);
+  useEffect(() => {
+    if (props.onClose) {
+      teleBox.events.on(TELE_BOX_EVENT.Close, props.onClose);
+      return () => {
+        teleBox.events.off(TELE_BOX_EVENT.Close, props.onClose);
+      };
+    }
+    return;
+  }, [teleBox, props.onClose]);
+  useEffect(() => {
+    if (props.onFocus) {
+      teleBox.events.on(TELE_BOX_EVENT.Focus, props.onFocus);
+      return () => {
+        teleBox.events.off(TELE_BOX_EVENT.Focus, props.onFocus);
+      };
+    }
+    return;
+  }, [teleBox, props.onFocus]);
+  useEffect(() => {
+    if (props.onBlur) {
+      teleBox.events.on(TELE_BOX_EVENT.Blur, props.onBlur);
+      return () => {
+        teleBox.events.off(TELE_BOX_EVENT.Blur, props.onBlur);
+      };
+    }
+    return;
+  }, [teleBox, props.onBlur]);
+  useEffect(() => {
+    if (props.onStateChanged) {
+      teleBox.events.on(TELE_BOX_EVENT.State, props.onStateChanged);
+      return () => {
+        teleBox.events.off(TELE_BOX_EVENT.State, props.onStateChanged);
+      };
+    }
+    return;
+  }, [teleBox, props.onStateChanged]);
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: (node) => node && teleBox.render(node),
+    className: teleBox.wrapClassName("box")
+  });
+};
+var style$1 = ".telebox-collector {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  visibility: hidden;\n  display: block;\n  position: absolute;\n  z-index: 200;\n  width: 40px;\n  height: 40px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  font-size: 0;\n  border-radius: 50%;\n  background: #fff;\n  box-shadow: 0px 2px 6px 0px rgba(47, 65, 146, 0.15);\n  cursor: pointer;\n  user-select: none;\n  pointer-events: none;\n  background-repeat: no-repeat;\n  background-size: 18px 16px;\n  background-position: center;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.telebox-collector-visible {\n  visibility: visible;\n  pointer-events: initial;\n}\n\n.telebox-collector-readonly {\n  cursor: not-allowed;\n}\n\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n\n.telebox-color-scheme-dark.telebox-collector {\n  background-color: #43434d;\n}";
+var collectorSVG = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K";
+class TeleBoxCollector {
+  constructor({
+    visible = true,
+    readonly = false,
+    darkMode = false,
+    namespace = "telebox",
+    styles = {},
+    onClick
+  } = {}) {
+    this.handleCollectorClick = () => {
+      if (!this._readonly && this.onClick) {
+        this.onClick();
+      }
+    };
+    this._visible = visible;
+    this._readonly = readonly;
+    this._darkMode = darkMode;
+    this.namespace = namespace;
+    this.styles = styles;
+    this.onClick = onClick;
+  }
+  get visible() {
+    return this._visible;
+  }
+  get readonly() {
+    return this._readonly;
+  }
+  get darkMode() {
+    return this._darkMode;
+  }
+  mount(root) {
+    root.appendChild(this.render());
+    return this;
+  }
+  unmount() {
+    if (this.$collector) {
+      this.$collector.remove();
+    }
+    return this;
+  }
+  setVisible(visible) {
+    if (this._visible !== visible) {
+      this._visible = visible;
+      if (this.$collector) {
+        this.$collector.classList.toggle(this.wrapClassName("collector-visible"), visible);
+      }
+    }
+    return this;
+  }
+  setReadonly(readonly) {
+    if (this._readonly !== readonly) {
+      this._readonly = readonly;
+      if (this.$collector) {
+        this.$collector.classList.toggle(this.wrapClassName("collector-readonly"), readonly);
+      }
+    }
+    return this;
+  }
+  setDarkMode(darkMode) {
+    if (this._darkMode !== darkMode) {
+      this._darkMode = darkMode;
+      if (this.$collector) {
+        this.$collector.classList.toggle(this.wrapClassName("color-scheme-dark"), darkMode);
+        this.$collector.classList.toggle(this.wrapClassName("color-scheme-light"), !darkMode);
+      }
+    }
+    return this;
+  }
+  setStyles(styles) {
+    Object.assign(this.styles, styles);
+    if (this.$collector) {
+      const $collector = this.$collector;
+      Object.keys(styles).forEach((key) => {
+        const value = styles[key];
+        if (value != null) {
+          $collector.style[key] = value;
+        }
+      });
+    }
+    return this;
+  }
+  render() {
+    if (!this.$collector) {
+      this.$collector = document.createElement("button");
+      this.$collector.className = this.wrapClassName("collector");
+      this.$collector.style.backgroundImage = `url('${collectorSVG}')`;
+      this.$collector.addEventListener("click", this.handleCollectorClick);
+      if (this._visible) {
+        this.$collector.classList.add(this.wrapClassName("collector-visible"));
+      }
+      if (this._readonly) {
+        this.$collector.classList.add(this.wrapClassName("collector-readonly"));
+      }
+      this.$collector.classList.add(this.wrapClassName(this._darkMode ? "color-scheme-dark" : "color-scheme-light"));
+      this.setStyles(this.styles);
+    }
+    return this.$collector;
+  }
+  destroy() {
+    if (this.$collector) {
+      this.$collector.removeEventListener("click", this.handleCollectorClick);
+      this.$collector.remove();
+      this.$collector = void 0;
+    }
+    this.onClick = void 0;
+  }
+  wrapClassName(className) {
+    return `${this.namespace}-${className}`;
+  }
+}
+var TELE_BOX_MANAGER_EVENT;
+(function(TELE_BOX_MANAGER_EVENT2) {
+  TELE_BOX_MANAGER_EVENT2["Focused"] = "focused";
+  TELE_BOX_MANAGER_EVENT2["Blurred"] = "blurred";
+  TELE_BOX_MANAGER_EVENT2["Created"] = "created";
+  TELE_BOX_MANAGER_EVENT2["Removed"] = "removed";
+  TELE_BOX_MANAGER_EVENT2["State"] = "state";
+  TELE_BOX_MANAGER_EVENT2["Maximized"] = "maximized";
+  TELE_BOX_MANAGER_EVENT2["Minimized"] = "minimized";
+  TELE_BOX_MANAGER_EVENT2["Move"] = "move";
+  TELE_BOX_MANAGER_EVENT2["Resize"] = "resize";
+  TELE_BOX_MANAGER_EVENT2["IntrinsicMove"] = "intrinsic_move";
+  TELE_BOX_MANAGER_EVENT2["IntrinsicResize"] = "intrinsic_resize";
+  TELE_BOX_MANAGER_EVENT2["VisualResize"] = "visual_resize";
+  TELE_BOX_MANAGER_EVENT2["ZIndex"] = "z_index";
+  TELE_BOX_MANAGER_EVENT2["PrefersColorScheme"] = "prefers_color_scheme";
+  TELE_BOX_MANAGER_EVENT2["DarkMode"] = "dark_mode";
+})(TELE_BOX_MANAGER_EVENT || (TELE_BOX_MANAGER_EVENT = {}));
+var style = ".telebox-max-titlebar {\n  user-select: none;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  display: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 50000;\n}\n.telebox-max-titlebar .telebox-title {\n  display: none;\n}\n.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-titles {\n  display: none;\n}\n.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-title {\n  display: block;\n}\n.telebox-max-titlebar-maximized {\n  display: flex;\n}\n.telebox-titles {\n  height: 100%;\n  margin: 0;\n  overflow-y: hidden;\n  overflow-x: scroll;\n  overflow-x: overlay;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  scrollbar-width: auto;\n}\n.telebox-titles::-webkit-scrollbar {\n  height: 8px;\n  width: 8px;\n}\n.telebox-titles::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.telebox-titles::-webkit-scrollbar-thumb {\n  background-color: rgba(238, 238, 247, 0.8);\n  background-color: transparent;\n  border-radius: 4px;\n  transition: background-color 0.4s;\n}\n.telebox-titles:hover::-webkit-scrollbar-thumb {\n  background-color: rgba(238, 238, 247, 0.8);\n}\n.telebox-titles::-webkit-scrollbar-thumb:hover {\n  background-color: #eeeef7;\n}\n.telebox-titles::-webkit-scrollbar-thumb:active {\n  background-color: #eeeef7;\n}\n.telebox-titles::-webkit-scrollbar-thumb:vertical {\n  min-height: 50px;\n}\n.telebox-titles::-webkit-scrollbar-thumb:horizontal {\n  min-width: 50px;\n}\n.telebox-titles-content {\n  height: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  padding: 0;\n}\n.telebox-titles-tab {\n  height: 100%;\n  overflow: hidden;\n  max-width: 182px;\n  min-width: 50px;\n  padding: 0 26px 0 16px;\n  outline: none;\n  font-size: 13px;\n  font-family: PingFangSC-Regular, PingFang SC;\n  font-weight: 400;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  word-break: keep-all;\n  border: none;\n  border-right: 1px solid #e5e5f0;\n  color: #7b88a0;\n  background: transparent;\n  cursor: pointer;\n  user-select: none;\n}\n.telebox-titles-tab-focus {\n  color: #357bf6;\n}\n.telebox-readonly .telebox-titles-tab {\n  cursor: not-allowed;\n}\n.telebox-color-scheme-dark {\n  color-scheme: dark;\n}\n.telebox-color-scheme-dark.telebox-titlebar {\n  color: #e9e9e9;\n  background: #43434d;\n  border-bottom: none;\n}\n.telebox-color-scheme-dark .telebox-titles-tab {\n  border-right-color: #7b88a0;\n}\n.telebox-color-scheme-dark .telebox-title {\n  color: #e9e9e9;\n}";
+class MaxTitleBar extends DefaultTitleBar {
+  constructor(config) {
+    super(config);
+    this.boxes = config.boxes;
+    this.focusedBox = config.focusedBox;
+    this.containerRect = config.containerRect;
+    this.darkMode = config.darkMode;
+  }
+  focusBox(box) {
+    var _a;
+    if (this.focusedBox && this.focusedBox === box) {
+      return;
+    }
+    if (this.$titles && this.state === TELE_BOX_STATE.Maximized) {
+      const { children } = this.$titles.firstElementChild;
+      for (let i2 = children.length - 1; i2 >= 0; i2 -= 1) {
+        const $tab = children[i2];
+        const id = (_a = $tab.dataset) == null ? void 0 : _a.teleBoxID;
+        if (id) {
+          if (box && id === box.id) {
+            $tab.classList.toggle(this.wrapClassName("titles-tab-focus"), true);
+          } else if (this.focusedBox && id === this.focusedBox.id) {
+            $tab.classList.toggle(this.wrapClassName("titles-tab-focus"), false);
+          }
+        }
+      }
+    }
+    this.focusedBox = box;
+  }
+  setContainerRect(rect) {
+    this.containerRect = rect;
+    if (this.$titleBar) {
+      const { x, y, width } = rect;
+      this.$titleBar.style.transform = `translate(${x}px, ${y}px)`;
+      this.$titleBar.style.width = width + "px";
+    }
+  }
+  setBoxes(boxes) {
+    this.boxes = boxes;
+    this.updateTitles();
+  }
+  setState(state) {
+    super.setState(state);
+    if (this.$titleBar) {
+      this.$titleBar.classList.toggle(this.wrapClassName("max-titlebar-maximized"), state === TELE_BOX_STATE.Maximized);
+    }
+    this.updateTitles();
+  }
+  setReadonly(readonly) {
+    super.setReadonly(readonly);
+    if (this.$titleBar) {
+      this.$titleBar.classList.toggle(this.wrapClassName("readonly"), this.readonly);
+    }
+  }
+  setDarkMode(darkMode) {
+    if (darkMode !== this.darkMode) {
+      this.darkMode = darkMode;
+      if (this.$titleBar) {
+        this.$titleBar.classList.toggle(this.wrapClassName("color-scheme-dark"), darkMode);
+        this.$titleBar.classList.toggle(this.wrapClassName("color-scheme-light"), !darkMode);
+      }
+    }
+  }
+  render() {
+    const $titleBar = super.render();
+    const { x, y, width } = this.containerRect;
+    $titleBar.style.transform = `translate(${x}px, ${y}px)`;
+    $titleBar.style.width = width + "px";
+    $titleBar.classList.add(this.wrapClassName("max-titlebar"));
+    $titleBar.classList.toggle(this.wrapClassName("max-titlebar-maximized"), this.state === TELE_BOX_STATE.Maximized);
+    $titleBar.classList.toggle(this.wrapClassName("readonly"), this.readonly);
+    $titleBar.classList.add(this.wrapClassName(this.darkMode ? "color-scheme-dark" : "color-scheme-light"));
+    const $titlesArea = document.createElement("div");
+    $titlesArea.classList.add(this.wrapClassName("titles-area"));
+    $titleBar.insertBefore($titlesArea, $titleBar.firstElementChild);
+    this.updateTitles();
+    return $titleBar;
+  }
+  destroy() {
+    super.destroy();
+    this.$titles = void 0;
+    this.boxes.length = 0;
+    this.focusedBox = void 0;
+  }
+  updateTitles() {
+    if (this.$titleBar && this.state === TELE_BOX_STATE.Maximized) {
+      this.$titleBar.classList.toggle(this.wrapClassName("max-titlebar-single-title"), this.boxes.length === 1);
+      if (this.boxes.length === 1) {
+        this.setTitle(this.boxes[0].title);
+      } else {
+        this.$titleBar.replaceChild(this.renderTitles(), this.$titleBar.firstElementChild);
+      }
+    }
+  }
+  renderTitles() {
+    this.$titles = document.createElement("div");
+    this.$titles.className = this.wrapClassName("titles");
+    this.$titles.addEventListener("wheel", (ev) => {
+      ev.currentTarget.scrollBy({
+        left: ev.deltaY > 0 ? 250 : -250,
+        behavior: "smooth"
+      });
+    }, { passive: false });
+    const $content = document.createElement("div");
+    $content.className = this.wrapClassName("titles-content");
+    this.$titles.appendChild($content);
+    this.boxes.forEach((box) => {
+      const $tab = document.createElement("button");
+      $tab.className = this.wrapClassName("titles-tab");
+      $tab.textContent = box.title;
+      $tab.dataset.teleBoxID = box.id;
+      $tab.dataset.teleTitleBarNoDblClick = "true";
+      if (this.focusedBox && box.id === this.focusedBox.id) {
+        $tab.classList.add(this.wrapClassName("titles-tab-focus"));
+      }
+      $content.appendChild($tab);
+    });
+    return this.$titles;
+  }
+}
+class TeleBoxManager {
+  constructor({
+    root = document.body,
+    prefersColorScheme = TELE_BOX_COLOR_SCHEME.Light,
+    minimized = false,
+    maximized = false,
+    fence = true,
+    containerRect = {
+      x: 0,
+      y: 0,
+      width: window.innerWidth,
+      height: window.innerHeight
+    },
+    collector,
+    namespace = "telebox",
+    readonly = false
+  } = {}) {
+    this.events = new EventEmitter();
+    this._sideEffect = new o();
+    const { combine, createVal } = c(this._sideEffect);
+    this.root = root;
+    this.namespace = namespace;
+    this.boxes$ = createVal([]);
+    this.topBox$ = this.boxes$.derive((boxes) => {
+      if (boxes.length > 0) {
+        const topBox = boxes.reduce((topBox2, box) => topBox2.zIndex > box.zIndex ? topBox2 : box);
+        return topBox;
+      }
+      return;
+    });
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+    const prefersDark$ = createVal(false);
+    if (prefersDark) {
+      prefersDark$.setValue(prefersDark.matches);
+      this._sideEffect.add(() => {
+        const handler = (evt) => {
+          prefersDark$.setValue(evt.matches);
+        };
+        prefersDark.addListener(handler);
+        return () => prefersDark.removeListener(handler);
+      });
+    }
+    const prefersColorScheme$ = createVal(prefersColorScheme);
+    prefersColorScheme$.reaction((prefersColorScheme2, _, skipUpdate) => {
+      this.boxes.forEach((box) => box.setPrefersColorScheme(prefersColorScheme2, skipUpdate));
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_MANAGER_EVENT.PrefersColorScheme, prefersColorScheme2);
+      }
+    });
+    this._darkMode$ = combine([prefersDark$, prefersColorScheme$], ([prefersDark2, prefersColorScheme2]) => prefersColorScheme2 === "auto" ? prefersDark2 : prefersColorScheme2 === "dark");
+    this._darkMode$.reaction((darkMode, _, skipUpdate) => {
+      this.boxes.forEach((box) => box.setDarkMode(darkMode, skipUpdate));
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_MANAGER_EVENT.DarkMode, darkMode);
+      }
+    });
+    const readonly$ = createVal(readonly);
+    readonly$.reaction((readonly2, _, skipUpdate) => {
+      this.boxes.forEach((box) => box.setReadonly(readonly2, skipUpdate));
+    });
+    const minimized$ = createVal(minimized);
+    const maximized$ = createVal(maximized);
+    maximized$.reaction((maximized2, _, skipUpdate) => {
+      this.boxes.forEach((box) => box.setMaximized(maximized2, skipUpdate));
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_MANAGER_EVENT.Maximized, maximized2);
+      }
+    });
+    const state$ = combine([minimized$, maximized$], ([minimized2, maximized2]) => minimized2 ? TELE_BOX_STATE.Minimized : maximized2 ? TELE_BOX_STATE.Maximized : TELE_BOX_STATE.Normal);
+    state$.reaction((state, _, skipUpdate) => {
+      this.maxTitleBar.setState(state);
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_MANAGER_EVENT.State, state);
+      }
+    });
+    const fence$ = createVal(fence);
+    fence$.subscribe((fence2, _, skipUpdate) => {
+      this.boxes.forEach((box) => box.setFence(fence2, skipUpdate));
+    });
+    const containerRect$ = createVal(containerRect, shallowequal);
+    containerRect$.reaction((containerRect2, _, skipUpdate) => {
+      this.boxes.forEach((box) => box.setContainerRect(containerRect2, skipUpdate));
+      this.maxTitleBar.setContainerRect(containerRect2);
+    });
+    const collector$ = createVal(collector === null ? null : collector || new TeleBoxCollector({
+      visible: minimized,
+      readonly,
+      namespace
+    }).mount(root));
+    collector$.subscribe((collector2) => {
+      if (collector2) {
+        collector2.setVisible(minimized$.value);
+        collector2.setReadonly(readonly$.value);
+        collector2.setDarkMode(this._darkMode$.value);
+        this._sideEffect.add(() => {
+          collector2.onClick = () => {
+            if (!readonly$.value) {
+              minimized$.setValue(false);
+            }
+          };
+          return () => collector2.destroy();
+        }, "collect-onClick");
+      }
+    });
+    readonly$.subscribe((readonly2) => {
+      var _a;
+      return (_a = collector$.value) == null ? void 0 : _a.setReadonly(readonly2);
+    });
+    this._darkMode$.subscribe((darkMode) => {
+      var _a;
+      (_a = collector$.value) == null ? void 0 : _a.setDarkMode(darkMode);
+    });
+    const calcCollectorRect = () => {
+      var _a;
+      if ((_a = collector$.value) == null ? void 0 : _a.$collector) {
+        const { x, y, width, height } = collector$.value.$collector.getBoundingClientRect();
+        const rootRect = this.root.getBoundingClientRect();
+        return {
+          x: x - rootRect.x,
+          y: y - rootRect.y,
+          width,
+          height
+        };
+      }
+      return;
+    };
+    const collectorRect$ = createVal(minimized$.value ? calcCollectorRect() : void 0);
+    collectorRect$.subscribe((collectorRect, _, skipUpdate) => {
+      this.boxes.forEach((box) => {
+        box.setCollectorRect(collectorRect, skipUpdate);
+      });
+    });
+    minimized$.subscribe((minimized2, _, skipUpdate) => {
+      var _a, _b;
+      (_a = collector$.value) == null ? void 0 : _a.setVisible(minimized2);
+      if (minimized2) {
+        if ((_b = collector$.value) == null ? void 0 : _b.$collector) {
+          collectorRect$.setValue(calcCollectorRect());
+        }
+      }
+      this.boxes.forEach((box) => box.setMinimized(minimized2, skipUpdate));
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_MANAGER_EVENT.Minimized, minimized2);
+      }
+    });
+    const closeBtnClassName = this.wrapClassName("titlebar-icon-close");
+    const checkFocusBox = (ev) => {
+      var _a;
+      if (readonly$.value) {
+        return;
+      }
+      const target = ev.target;
+      if (!target.tagName) {
+        return;
+      }
+      for (let el = target; el; el = el.parentElement) {
+        if (el.classList && el.classList.contains(closeBtnClassName)) {
+          return;
+        }
+        const id = (_a = el.dataset) == null ? void 0 : _a.teleBoxID;
+        if (id) {
+          const box = this.getBox(id);
+          if (box) {
+            this.focusBox(box);
+            this.makeBoxTop(box);
+            return;
+          }
+        }
+      }
+    };
+    this._sideEffect.addEventListener(window, "mousedown", checkFocusBox, true);
+    this._sideEffect.addEventListener(window, "touchstart", checkFocusBox, true);
+    this.maxTitleBar = new MaxTitleBar({
+      darkMode: this.darkMode,
+      readonly: readonly$.value,
+      namespace: this.namespace,
+      state: state$.value,
+      boxes: this.boxes$.value,
+      containerRect: containerRect$.value,
+      onEvent: (event) => {
+        switch (event.type) {
+          case TELE_BOX_DELEGATE_EVENT.Maximize: {
+            maximized$.setValue(!maximized$.value);
+            break;
+          }
+          case TELE_BOX_DELEGATE_EVENT.Minimize: {
+            minimized$.setValue(true);
+            break;
+          }
+          case TELE_BOX_EVENT.Close: {
+            this.removeTopBox();
+            this.focusTopBox();
+            break;
+          }
+        }
+      }
+    });
+    readonly$.subscribe((readonly2) => this.maxTitleBar.setReadonly(readonly2));
+    this._darkMode$.subscribe((darkMode) => {
+      this.maxTitleBar.setDarkMode(darkMode);
+    });
+    this.boxes$.reaction((boxes) => {
+      this.maxTitleBar.setBoxes(boxes);
+    });
+    const valConfig = {
+      prefersColorScheme: prefersColorScheme$,
+      containerRect: containerRect$,
+      collector: collector$,
+      collectorRect: collectorRect$,
+      readonly: readonly$,
+      fence: fence$,
+      minimized: minimized$,
+      maximized: maximized$
+    };
+    i(this, valConfig);
+    this._state$ = state$;
+    this.root.appendChild(this.maxTitleBar.render());
+  }
+  get boxes() {
+    return this.boxes$.value;
+  }
+  get topBox() {
+    return this.topBox$.value;
+  }
+  get darkMode() {
+    return this._darkMode$.value;
+  }
+  get state() {
+    return this._state$.value;
+  }
+  setState(state, skipUpdate = false) {
+    switch (state) {
+      case TELE_BOX_STATE.Maximized: {
+        this.setMinimized(false, skipUpdate);
+        this.setMaximized(true, skipUpdate);
+        break;
+      }
+      case TELE_BOX_STATE.Minimized: {
+        this.setMinimized(true, skipUpdate);
+        this.setMaximized(false, skipUpdate);
+        break;
+      }
+      default: {
+        this.setMinimized(false, skipUpdate);
+        this.setMaximized(false, skipUpdate);
+        break;
+      }
+    }
+    return this;
+  }
+  create(config = {}, smartPosition = true) {
+    const box = new TeleBox(__spreadProps(__spreadValues({
+      zIndex: this.topBox ? this.topBox.zIndex + 1 : 100
+    }, smartPosition ? this.smartPosition(config) : config), {
+      darkMode: this.darkMode,
+      prefersColorScheme: this.prefersColorScheme,
+      maximized: this.maximized,
+      minimized: this.minimized,
+      fence: this.fence,
+      namespace: this.namespace,
+      containerRect: this.containerRect,
+      readonly: this.readonly,
+      collectorRect: this.collectorRect
+    }));
+    box.mount(this.root);
+    if (box.focus) {
+      this.focusBox(box);
+      if (smartPosition) {
+        this.makeBoxTop(box);
+      }
+    }
+    this.boxes$.setValue([...this.boxes, box]);
+    box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Maximize, () => {
+      this.setMaximized(!this.maximized);
+    });
+    box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Minimize, () => {
+      this.setMinimized(true);
+    });
+    box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Close, () => {
+      this.remove(box);
+      this.focusTopBox();
+    });
+    box._coord$.reaction((_, __, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_MANAGER_EVENT.Move, box);
+      }
+    });
+    box._size$.reaction((_, __, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_MANAGER_EVENT.Resize, box);
+      }
+    });
+    box._intrinsicCoord$.reaction((_, __, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicMove, box);
+      }
+    });
+    box._intrinsicSize$.reaction((_, __, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_MANAGER_EVENT.IntrinsicResize, box);
+      }
+    });
+    box._visualSize$.reaction((_, __, skipUpdate) => {
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_MANAGER_EVENT.VisualResize, box);
+      }
+    });
+    box._zIndex$.reaction((_, __, skipUpdate) => {
+      if (this.boxes.length > 0) {
+        const topBox = this.boxes.reduce((topBox2, box2) => topBox2.zIndex > box2.zIndex ? topBox2 : box2);
+        this.topBox$.setValue(topBox);
+      }
+      if (!skipUpdate) {
+        this.events.emit(TELE_BOX_MANAGER_EVENT.ZIndex, box);
+      }
+    });
+    this.events.emit(TELE_BOX_MANAGER_EVENT.Created, box);
+    return box;
+  }
+  query(config) {
+    return config ? this.boxes.filter(this.teleBoxMatcher(config)) : [...this.boxes];
+  }
+  queryOne(config) {
+    return config ? this.boxes.find(this.teleBoxMatcher(config)) : this.boxes[0];
+  }
+  update(boxID, config, skipUpdate = false) {
+    const box = this.boxes.find((box2) => box2.id === boxID);
+    if (box) {
+      return this.updateBox(box, config, skipUpdate);
+    }
+  }
+  updateAll(config, skipUpdate = false) {
+    this.boxes.forEach((box) => {
+      this.updateBox(box, config, skipUpdate);
+    });
+  }
+  remove(boxOrID, skipUpdate = false) {
+    const index2 = this.getBoxIndex(boxOrID);
+    if (index2 >= 0) {
+      const boxes = this.boxes.slice();
+      const deletedBoxes = boxes.splice(index2, 1);
+      this.boxes$.setValue(boxes);
+      deletedBoxes.forEach((box) => box.destroy());
+      if (!skipUpdate) {
+        if (this.boxes.length <= 0) {
+          this.setMaximized(false);
+          this.setMinimized(false);
+        }
+        this.events.emit(TELE_BOX_MANAGER_EVENT.Removed, deletedBoxes);
+      }
+      return deletedBoxes[0];
+    }
+    return;
+  }
+  removeTopBox() {
+    if (this.topBox) {
+      return this.remove(this.topBox);
+    }
+    return;
+  }
+  removeAll(skipUpdate = false) {
+    const deletedBoxes = this.boxes$.value;
+    this.boxes$.setValue([]);
+    deletedBoxes.forEach((box) => box.destroy());
+    if (!skipUpdate) {
+      if (this.boxes.length <= 0) {
+        this.setMaximized(false);
+        this.setMinimized(false);
+      }
+      this.events.emit(TELE_BOX_MANAGER_EVENT.Removed, deletedBoxes);
+    }
+    return deletedBoxes;
+  }
+  destroy(skipUpdate = false) {
+    this.events.removeAllListeners();
+    this._sideEffect.flushAll();
+    this.removeAll(skipUpdate);
+    Object.keys(this).forEach((key) => {
+      const value = this[key];
+      if (value instanceof r) {
+        value.destroy();
+      }
+    });
+  }
+  wrapClassName(className) {
+    return `${this.namespace}-${className}`;
+  }
+  focusBox(boxOrID, skipUpdate = false) {
+    const targetBox = this.getBox(boxOrID);
+    if (targetBox) {
+      this.boxes.forEach((box) => {
+        if (targetBox === box) {
+          let focusChanged = false;
+          if (!targetBox.focus) {
+            focusChanged = true;
+            targetBox.setFocus(true, skipUpdate);
+          }
+          if (focusChanged && !skipUpdate) {
+            this.events.emit(TELE_BOX_MANAGER_EVENT.Focused, targetBox);
+          }
+        } else if (box.focus) {
+          this.blurBox(box, skipUpdate);
+        }
+      });
+      this.maxTitleBar.focusBox(targetBox);
+    }
+  }
+  focusTopBox() {
+    if (this.topBox && !this.topBox.focus) {
+      return this.focusBox(this.topBox);
+    }
+  }
+  blurBox(boxOrID, skipUpdate = false) {
+    const targetBox = this.getBox(boxOrID);
+    if (targetBox) {
+      if (targetBox.focus) {
+        targetBox.setFocus(false, skipUpdate);
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.Blurred, targetBox);
+        }
+      }
+      if (this.maxTitleBar.focusedBox === targetBox) {
+        this.maxTitleBar.focusBox();
+      }
+    }
+  }
+  blurAll(skipUpdate = false) {
+    this.boxes.forEach((box) => {
+      if (box.focus) {
+        box.setFocus(false, skipUpdate);
+        if (!skipUpdate) {
+          this.events.emit(TELE_BOX_MANAGER_EVENT.Blurred, box);
+        }
+      }
+    });
+    if (this.maxTitleBar.focusedBox) {
+      this.maxTitleBar.focusBox();
+    }
+  }
+  teleBoxMatcher(config) {
+    const keys = Object.keys(config);
+    return (box) => keys.every((key) => config[key] === box[key]);
+  }
+  updateBox(box, config, skipUpdate = false) {
+    if (config.x != null || config.y != null) {
+      box.move(config.x == null ? box.intrinsicX : config.x, config.y == null ? box.intrinsicY : config.y, skipUpdate);
+    }
+    if (config.width != null || config.height != null) {
+      box.resize(config.width == null ? box.intrinsicWidth : config.width, config.height == null ? box.intrinsicHeight : config.height, skipUpdate);
+    }
+    if (config.title != null) {
+      box.setTitle(config.title);
+      this.maxTitleBar.updateTitles();
+    }
+    if (config.visible != null) {
+      box.setVisible(config.visible, skipUpdate);
+    }
+    if (config.minHeight != null) {
+      box.setMinHeight(config.minHeight, skipUpdate);
+    }
+    if (config.minWidth != null) {
+      box.setMinWidth(config.minWidth, skipUpdate);
+    }
+    if (config.resizable != null) {
+      box.setResizable(config.resizable, skipUpdate);
+    }
+    if (config.draggable != null) {
+      box.setDraggable(config.draggable, skipUpdate);
+    }
+    if (config.fixRatio != null) {
+      box.setFixRatio(config.fixRatio, skipUpdate);
+    }
+    if (config.zIndex != null) {
+      box.setZIndex(config.zIndex, skipUpdate);
+    }
+    if (config.content != null) {
+      box.mountContent(config.content);
+    }
+    if (config.footer != null) {
+      box.mountFooter(config.footer);
+    }
+  }
+  smartPosition(config = {}) {
+    let { x, y } = config;
+    const { width = 0.5, height = 0.5 } = config;
+    if (x == null) {
+      let vx = 20;
+      if (this.topBox) {
+        vx = this.topBox.intrinsicX * this.containerRect.width + 20;
+        if (vx > this.containerRect.width - width * this.containerRect.width) {
+          vx = 20;
+        }
+      }
+      x = vx / this.containerRect.width;
+    }
+    if (y == null) {
+      let vy = 20;
+      if (this.topBox) {
+        vy = this.topBox.intrinsicY * this.containerRect.height + 20;
+        if (vy > this.containerRect.height - height * this.containerRect.height) {
+          vy = 20;
+        }
+      }
+      y = vy / this.containerRect.height;
+    }
+    return __spreadProps(__spreadValues({}, config), { x, y, width, height });
+  }
+  makeBoxTop(box, skipUpdate = false) {
+    if (this.topBox) {
+      if (box !== this.topBox) {
+        box.setZIndex(this.topBox.zIndex + 1, skipUpdate);
+      }
+    }
+  }
+  getBoxIndex(boxOrID) {
+    return typeof boxOrID === "string" ? this.boxes.findIndex((box) => box.id === boxOrID) : this.boxes.findIndex((box) => box === boxOrID);
+  }
+  getBox(boxOrID) {
+    return typeof boxOrID === "string" ? this.boxes.find((box) => box.id === boxOrID) : boxOrID;
+  }
+}
+export { DefaultTitleBar, TELE_BOX_COLOR_SCHEME, TELE_BOX_DELEGATE_EVENT, TELE_BOX_EVENT, TELE_BOX_MANAGER_EVENT, TELE_BOX_RESIZE_HANDLE, TELE_BOX_STATE, TeleBox, TeleBoxCollector, TeleBoxDragHandleType, TeleBoxManager, TeleBoxReact };
 //# sourceMappingURL=telebox-insider.es.js.map