uiik 1.1.0 → 1.3.0-alpha

package/index.js

@@ -1,7 +1,2630 @@
 /**
- * uiik v1.1.0
+ * uiik v1.3.0-alpha
  * A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.
  * https://github.com/holyhigh2/uiik
  * c) 2021-2023 @holyhigh2 may be freely distributed under the MIT license
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("myfx/is"),require("myfx/collection"),require("myfx/object"),require("myfx/string"),require("myfx/tree"),require("myfx/array"),require("myfx/utils")):"function"==typeof define&&define.amd?define(["exports","myfx/is","myfx/collection","myfx/object","myfx/string","myfx/tree","myfx/array","myfx/utils"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).uiik={},e.is,e.collection,e.object,e.string,e.tree,e.array,e.utils)}(this,(function(e,t,s,o,n,i,l,r){"use strict";function a(e,t,s,o){if("a"===s&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===s?o:"a"===s?o.call(e):o?o.value:t.get(e)}function c(e,t,s,o,n){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?n.call(e,s):n?n.value=s:t.set(e,s),s}var d;class p{constructor(e,o){if(this.enabled=!0,d.set(this,[]),this.opts=o||{},t.isArrayLike(e)&&!t.isString(e))this.ele=s.map(e,(e=>{let s=t.isString(e)?document.querySelector(e):e;return t.isElement(s)?s:(console.error('Invalid element "'+e+'"'),!1)}));else{const o=t.isString(e)?document.querySelectorAll(e):e;if(!t.isElement(o)&&!t.isArrayLike(o))return void console.error('Invalid element "'+e+'"');this.ele=t.isArrayLike(o)?s.toArray(o):[o]}}destroy(){s.each(a(this,d,"f"),(e=>{e[0].removeEventListener(e[1],e[2],e[3])})),c(this,d,[],"f")}registerEvent(e,t,s,o=!1){const n=(e=>{this.enabled&&s(e)}).bind(this);e.addEventListener(t,n,o),a(this,d,"f").push([e,t,n,o])}disable(){this.enabled=!1}enable(){this.enabled=!0}getOptions(){return this.opts}getOption(e){return this.opts[e]}setOptions(e){o.assign(this.opts,e),this.onOptionChanged(this.opts)}setOption(e,t){this.opts[e]=t,this.onOptionChanged(this.opts)}onOptionChanged(e){}}function u(e,t){const s={x:0,y:0};let o=e.offsetParent;for(;o&&t&&o!==t;){const e=window.getComputedStyle(o);s.x+=o.offsetLeft+parseFloat(e.borderLeftWidth),s.y+=o.offsetTop+parseFloat(e.borderTopWidth),o=o.offsetParent}return s.x+=e.offsetLeft,s.y+=e.offsetTop,s}d=new WeakMap;const h=5,f="body * { pointer-events: none; }";let m;function v(){m=function(){document.styleSheets.length<1&&document.head.appendChild(document.createElement("style"));const e=s.find(document.styleSheets,(e=>!e.href));e||document.head.appendChild(document.createElement("style"));return e||s.find(document.styleSheets,(e=>!e.href))}(),null==m||m.insertRule(f,0)}function g(){null==m||m.deleteRule(0)}let y={html:"",body:""};function b(){y.body=document.body.style.cursor,y.html=document.documentElement.style.cursor}function x(e){document.body.style.cursor=document.documentElement.style.cursor=e}function w(){document.body.style.cursor=y.body,document.documentElement.style.cursor=y.html}var L,E,C;const S="uii-splittable",T="uii-splittable-handle-active";class z extends p{constructor(e,n){super(e,o.assign({handleSize:10,minSize:0,sticky:!1,inside:!1,ghost:!1},n)),L.add(this),s.each(this.ele,(e=>{"static"===window.getComputedStyle(e).position&&(e.style.position="relative"),e.classList.toggle(S,!0);const o=e.querySelectorAll(this.opts.handle),n=s.reject(e.children,(e=>!!s.includes(o,e))),i=a(this,L,"m",E).call(this,e);e.classList.toggle("v"===i?"uii-splittable-v":"uii-splittable-h",!0);const l=s.map(n,((e,s)=>t.isArray(this.opts.minSize)?this.opts.minSize[s]||0:this.opts.minSize)),r=s.map(n,((e,s)=>t.isArray(this.opts.sticky)?this.opts.sticky[s]||!1:this.opts.sticky));if(t.isEmpty(o)){const e=n.length-1;for(let t=0;t<e;t++)a(this,L,"m",C).call(this,l.slice(t,t+2),r.slice(t,t+2),this.opts,i,n[t],n[t+1])}else s.each(o,((t,s)=>{let o,n;t.parentNode.classList.contains(S)?(o=t.previousElementSibling,n=t.nextElementSibling):(n=function(e,t){let s=e.parentNode;for(;s&&s.parentNode!==t;)s=s.parentNode;return s}(t,e),o=n.previousElementSibling),a(this,L,"m",C).call(this,l.slice(s,s+2),r.slice(s,s+2),this.opts,i,o,n,t)}))}))}}function D(e,t){return new z(e,t)}L=new WeakSet,E=function(e){let t="h";let o=e.children[0].offsetTop;return s.each(e.children,(e=>{if(e.offsetTop!=o)return t="v",!1})),t},C=function(e,t,s,o,n,i,l){var r;const a=s.handleSize;if(!l){l=document.createElement("div");let e=0;s.inside||(e="v"===o?i.offsetTop:i.offsetLeft);const t=`width:${a}px;height:100%;top:0;left:${e-a/2}px;z-index:9;`,n=`height:${a}px;width:100%;left:0;top:${e-a/2}px;z-index:9;`;l.style.cssText="position: absolute;"+("v"===o?n:t),s.inside&&i.appendChild(l),null===(r=i.parentNode)||void 0===r||r.insertBefore(l,i)}l.style.cursor="v"===o?"s-resize":"e-resize",l.dataset.cursor=l.style.cursor,l.classList.add("uii-splittable-handle");const c=e[0],d=e[1];let p=t[0],u=t[1];const h=s.onStart,f=s.onSplit,m=s.onEnd,y=s.onSticky,L=s.onClone,E=s.oneSideMode,C=!E||"start"===E,S=!E||"end"===E;l.onmousedown=function(e){let t=0,r=0;const E=e.clientX,z=e.clientY;let D=1,k=0;switch(o){case"v":t=n.offsetHeight,r=i.offsetHeight,D=l.offsetHeight;break;case"h":t=n.offsetWidth,r=i.offsetWidth,D=l.offsetWidth}k=D+t+r;const M=n.style,N=i.style,$=s.ghost,W=s.ghostClass;let A=null,I="none";t<c/2?I="start":k-t-D<d/2&&(I="end");let O=!1;b();let F,q,Y="v"===o?n.offsetTop:n.offsetLeft;const R=s=>{var n;const m=s.clientX-E,g=s.clientY-z;if(!O){if(!(Math.abs(m)>1||Math.abs(g)>1))return s.preventDefault(),!1;O=!0,null==l||l.classList.add(T),$&&(A=l.cloneNode(!0),A.style.opacity="0.3",A.style.pointerEvents="none",A.classList.add("uii-splittable-handle-ghost"),A&&(W&&(A.className=A.className.replace(W,"")+" "+W),null===(n=null==l?void 0:l.parentNode)||void 0===n||n.appendChild(A),L&&L({clone:A},e))),v(),x((null==l?void 0:l.dataset.cursor)||""),h&&h({size1:t,size2:r},s)}let b=!1;if(F="v"===o?t+g:t+m,F<c/2&&p&&c>0?("none"==I&&(b=!0,I="start"),F=0):F<c?(F=c,"start"==I&&p&&(b=!0,I="none")):k-F-D<d/2&&u?("none"==I&&(b=!0,I="end"),F=k-D):k-F-D<d&&(F=k-d-D,"end"==I&&u&&(b=!0,I="none")),q=k-F-D,A)"v"===o?A.style.top=Y+F-a/2+"px":A.style.left=Y+F-a/2+"px";else{const e="v"===o?"height":"width";C&&M.setProperty(e,F+"px","important"),S&&N.setProperty(e,q+"px","important"),b&&y&&y({size1:F,size2:q,position:I},s),"v"===o?l.style.top=i.offsetTop-a/2+"px":l.style.left=i.offsetLeft-a/2+"px"}return f&&f({size1:F,size2:q},s),s.preventDefault(),!1},X=e=>{var s,c;if(document.removeEventListener("mousemove",R,!1),document.removeEventListener("mouseup",X,!1),window.removeEventListener("blur",X,!1),O){switch(o){case"v":t=(null==n?void 0:n.offsetHeight)||-1,r=(null==i?void 0:i.offsetHeight)||-1;break;case"h":t=(null==n?void 0:n.offsetWidth)||-1,r=(null==i?void 0:i.offsetWidth)||-1}if(null==l||l.classList.remove(T),A){const e="v"===o?"height":"width";C&&M.setProperty(e,F+"px","important"),S&&N.setProperty(e,q+"px","important"),"v"===o?l.style.top=Y+F-a/2+"px":l.style.left=Y+F-a/2+"px",(null===(s=A.parentNode)||void 0===s?void 0:s.contains(A))&&(null===(c=A.parentNode)||void 0===c||c.removeChild(A))}g(),w(),m&&m({size1:t,size2:r},e)}};return document.addEventListener("mousemove",R,!1),document.addEventListener("mouseup",X,!1),window.addEventListener("blur",X,!1),e.preventDefault(),!1}};const k=2,M="uii-resizable-handle",N="uii-resizable-handle-",$="uii-resizable-handle-active";class W extends p{constructor(e,n){super(e,o.assign({handleSize:8,minSize:50,dir:["n","s","e","w","ne","nw","se","sw"],ghost:!1,offset:0},n)),s.each(this.ele,(e=>{!function(e,o){const n=o.handleSize,i=o.offset||0;s.each(o.dir||["n","s","e","w","ne","nw","se","sw"],(s=>{const l=document.createElement("div");l.classList.add(M,N+s),l.setAttribute("name","handle");let r="";switch(s){case"n":r=`left:0px;top:${-i}px;width:100%;height:${n}px;`;break;case"s":r=`left:0px;bottom:${-i}px;width:100%;height:${n}px;`;break;case"w":r=`top:0px;left:${-i}px;width:${n}px;height:100%;`;break;case"e":r=`top:0px;right:${-i}px;width:${n}px;height:100%;`;break;default:switch(r=`width:${n}px;height:${n}px;z-index:9;`,s){case"ne":r+=`top:${-i}px;right:${-i}px;`;break;case"nw":r+=`top:${-i}px;left:${-i}px;`;break;case"se":r+=`bottom:${-i}px;right:${-i}px;`;break;case"sw":r+=`bottom:${-i}px;left:${-i}px;`}}!function(e,s,o,n){const i=n.onStart,l=n.onResize,r=n.onEnd,a=n.onClone;e.onmousedown=function(c){const d=o.offsetWidth,p=o.offsetHeight,u=o.offsetLeft,h=o.offsetTop;let f=!1,m=!1,y=!1,L=!1;switch(s){case"s":m=!0;break;case"e":f=!0;break;case"n":L=!0,m=!0;break;case"w":y=!0,f=!0;break;case"se":f=!0,m=!0;break;case"sw":y=!0,f=!0,m=!0;break;case"ne":L=!0,f=!0,m=!0;break;case"nw":y=!0,L=!0,f=!0,m=!0}const E=c.clientX,C=c.clientY;let S,T,z,D;t.isArray(n.minSize)?(S=n.minSize[0],T=n.minSize[1]):t.isNumber(n.minSize)&&(S=n.minSize,T=n.minSize),t.isArray(n.maxSize)?(z=n.maxSize[0],D=n.maxSize[1]):t.isNumber(n.maxSize)&&(z=n.maxSize,D=n.maxSize);const M=z?u-z+d:null,N=D?h-D+p:null,W=S?u+d-S:null,A=T?h+p-T:null,I=n.ghost,O=n.ghostClass;let F=null;const q=n.aspectRatio,Y=o.style;let R=Y,X=d,H=p,P=!1;b();const B=n=>{var r;const c=n.clientX-E,g=n.clientY-C;if(!P){if(!(Math.abs(c)>k||Math.abs(g)>k))return n.preventDefault(),!1;P=!0,e.classList.add($),I&&(t.isFunction(I)?F=I():(F=o.cloneNode(!0),F.style.opacity="0.3",F.style.pointerEvents="none"),F&&(O&&(F.className=F.className.replace(O,"")+" "+O),null===(r=o.parentNode)||void 0===r||r.appendChild(F),a&&a({clone:F},n)),R=null==F?void 0:F.style),v(),x(e.dataset.cursor||""),i&&i({w:d,h:p},n)}let b=d,w=p,Y=h,B=u;return f&&(b=d+c*(y?-1:1),S&&b<S&&(b=S),z&&b>z&&(b=z)),m&&(w=p+g*(L?-1:1),T&&w<T&&(w=T),D&&w>D&&(w=D)),L&&(Y=h+g,N&&Y<N&&(Y=N),A&&Y>A&&(Y=A)),y&&(B=u+c,M&&B<M&&(B=M),W&&B>W&&(B=W)),q?(f&&(R.width=b+"px",R.height=b/q+"px"),m&&"sw"!==s&&("nw"===s?Y=h-b/q+p:(R.width=w*q+"px",R.height=w+"px"))):(f&&(R.width=b+"px"),m&&(R.height=w+"px")),L&&(R.top=Y+"px"),y&&(R.left=B+"px"),X=b,H=w,l&&l({w:b,h:w},n),n.preventDefault(),!1},j=t=>{var s,n;document.removeEventListener("mousemove",B,!1),document.removeEventListener("mouseup",j,!1),window.removeEventListener("blur",j,!1),I&&F&&((null===(s=o.parentNode)||void 0===s?void 0:s.contains(F))&&(null===(n=o.parentNode)||void 0===n||n.removeChild(F)),Y.left=F.style.left,Y.top=F.style.top,Y.width=F.style.width,Y.height=F.style.height),P&&(e.classList.remove($),g(),w(),r&&r({w:X,h:H},t))};return document.addEventListener("mousemove",B,!1),document.addEventListener("mouseup",j,!1),window.addEventListener("blur",j,!1),c.preventDefault(),!1}}(l,s,e,o),l.style.cssText=`position: absolute;cursor: ${s}-resize;`+r,l.dataset.cursor=`${s}-resize`,e.appendChild(l)}))}(e,this.opts)}))}}function A(e,t){return new W(e,t)}var I;const O={},F="uii-draggable-active",q="uii-draggable-ghost";class Y extends p{constructor(e,r){super(e,o.assign({container:!1,threshold:0,ghost:!1,direction:"",scroll:!0,snapOptions:{tolerance:10}},r)),I.set(this,new WeakMap),this.opts.handle&&s.each(this.ele,(e=>{const t=e.querySelector(this.opts.handle);if(!t)return console.error('No handle found "'+this.opts.handle+'"'),!1;a(this,I,"f").set(e,t)})),this.onOptionChanged(this.opts),this.opts.group&&(O[this.opts.group]||(O[this.opts.group]=[]),O[this.opts.group].push(...this.ele)),s.each(this.ele,(e=>{!function(e,o,r,a){e(o,"mousedown",(e=>{var c;let d=e.currentTarget,p=e.target;if(!p)return;let f=a.get(d);if(f&&!f.contains(p))return;const m=r.filter;if(m&&s.some(o.querySelectorAll(m),(e=>e.contains(p))))return;const y=window.getComputedStyle(d),L=d.offsetParent||document.body,E=r.container,C=r.threshold||0,S=r.ghost,T=r.ghostClass,z=r.direction,D=r.onStart,k=r.onDrag,M=r.onEnd,N=r.onClone,$=y.zIndex;let W=r.zIndex||$;const A=r.classes||"",I=r.group;if(I){let e=-1;s.each(O[I],(t=>{const s=parseInt(window.getComputedStyle(t).zIndex)||0;s>e&&(e=s)})),W=e+1}const Y=r.scroll,R=r.scrollSpeed||10;let X,H;const P=r.grid;t.isArray(P)?(X=P[0],H=P[1]):t.isNumber(P)&&(X=H=P);const B=r.snap;let j;const _=(null===(c=r.snapOptions)||void 0===c?void 0:c.tolerance)||10,U=r.onSnap;let V="",Z="",G="",J=0,K=0;B&&(j=s.map(document.querySelectorAll(B),(e=>{let t=0,s=0;return i.closest(e,(e=>(t+=e.offsetLeft,s+=e.offsetTop,!1)),"offsetParent"),{x1:t,y1:s,x2:t+e.offsetWidth,y2:s+e.offsetHeight,el:e}})),i.closest(d,((e,t)=>(t>0&&(J+=e.offsetLeft,K+=e.offsetTop),!1)),"offsetParent"));const Q=d.offsetWidth+parseFloat(y.borderLeftWidth)+parseFloat(y.borderRightWidth),ee=d.offsetHeight+parseFloat(y.borderTopWidth)+parseFloat(y.borderBottomWidth);let te=0,se=0,oe=0,ne=0;E&&(oe=L.scrollWidth-Q,ne=L.scrollHeight-ee),oe<0&&(oe=0),ne<0&&(ne=0);const ie=L.getBoundingClientRect(),le=u(p,L),re=e.offsetX||0,ae=e.offsetY||0;let ce=le.x+re+L.scrollLeft,de=le.y+ae+L.scrollTop,pe=re,ue=e.offsetY;if(e.target!==d){const e=u(p,d),t=window.getComputedStyle(p);pe=e.x+re+parseFloat(t.borderLeftWidth),ue=e.y+ae+parseFloat(t.borderTopWidth)}const he=r.cursorAt;if(he){const e=he.left,s=he.top;pe=t.isString(e)?parseFloat(e)/100*d.offsetWidth:e,ue=t.isString(s)?parseFloat(s)/100*d.offsetWidth:s}const fe=d.style;let me,ve=!1,ge=null,ye=!1,be=!1,xe=!1,we=!1;b();const Le=e=>{var o;const i=e.clientX-ie.x+L.scrollLeft,a=e.clientY-ie.y+L.scrollTop;let c=i-ce,p=a-de;if(!ve){if(!(Math.abs(c)>C||Math.abs(p)>C))return e.preventDefault(),!1;{ve=!0,S&&(t.isFunction(S)?me=S(d):(me=d.cloneNode(!0),me.style.opacity="0.3",me.style.pointerEvents="none",me.style.position="absolute"),me.style.left=d.style.left,me.style.top=d.style.top,me.style.zIndex=W+"",T&&me.classList.add(...l.compact(n.split(T," "))),me.classList.add(...l.compact(n.split(A," "))),me.classList.toggle(q,!0),null===(o=d.parentNode)||void 0===o||o.appendChild(me),N&&N({clone:me},e)),d.classList.add(...l.compact(n.split(A," "))),me||(d.style.zIndex=W+""),d.classList.toggle(F,!0),D&&D({draggable:d},e),v(),r.cursor&&x(r.cursor.active||"move");const s=new Event("uii-dragactive",{bubbles:!0,cancelable:!1});d.dispatchEvent(s)}}if(Y){const t=e.clientX-ie.x,s=e.clientY-ie.y,o=ie.x+ie.width-e.clientX,n=ie.y+ie.height-e.clientY;ye=t<h,be=s<h,xe=o<h,we=n<h,ye||be||xe||we?ge||(ge=setInterval((()=>{ye?L.scrollLeft-=R:xe&&(L.scrollLeft+=R),be?L.scrollTop-=R:we&&(L.scrollTop+=R)}),20)):ge&&(clearInterval(ge),ge=null)}let u=i-pe,f=a-ue;t.isNumber(X)&&t.isNumber(H)&&(u=(u/X>>0)*X,f=(f/H>>0)*H),E&&(u<te&&(u=te),f<se&&(f=se),u>oe&&(u=oe),f>ne&&(f=ne));let m=!0,g=!1;if(B){const t=J+u,o=K+f,n=t+Q,i=o+ee;let l,r,a,c,p=NaN,h=NaN;z&&"v"!==z||s.each(j,(e=>{if(Math.abs(e.y1-o)<=_?(h=e.y1,c="t2t"):Math.abs(e.y2-o)<=_?(h=e.y2,c="t2b"):Math.abs(e.y1-i)<=_?(h=e.y1-ee,c="b2t"):Math.abs(e.y2-i)<=_&&(h=e.y2-ee,c="b2b"),h)return V=c,r=e.el,!1})),z&&"h"!==z||s.each(j,(e=>{if(Math.abs(e.x1-t)<=_?(p=e.x1,a="l2l"):Math.abs(e.x2-t)<=_?(p=e.x2,a="l2r"):Math.abs(e.x1-n)<=_?(p=e.x1-Q,a="r2l"):Math.abs(e.x2-n)<=_&&(p=e.x2-Q,a="r2r"),p)return Z=a,l=e.el,!1})),p||h?(p&&(u=p-J),h&&(f=h-K),U&&G!==Z+""+V&&(setTimeout((()=>{U({el:me||d,targetH:l,targetV:r,dirH:a,dirV:c},e)}),0),G=Z+""+V),g=!0):Z=V=G=""}return k&&!g&&!1===k({draggable:d,ox:c,oy:p,x:u,y:f},e)&&(m=!1),m&&(me?"v"===z?me.style.top=`${f}px`:"h"===z?me.style.left=`${u}px`:(me.style.left=`${u}px`,me.style.top=`${f}px`):"v"===z?fe.top=`${f}px`:"h"===z?fe.left=`${u}px`:(fe.left=`${u}px`,fe.top=`${f}px`)),e.preventDefault(),!1},Ee=e=>{var t,s;document.removeEventListener("mousemove",Le),document.removeEventListener("mouseup",Ee),window.removeEventListener("blur",Ee),Y&&ge&&(clearInterval(ge),ge=null),d.classList.remove(...l.compact(n.split(A," "))),d.style.zIndex=$,d.classList.remove(F);let o=!0;ve&&M&&(o=!1!==M({draggable:d},e));const i=new Event("uii-dragdeactive",{bubbles:!0,cancelable:!1});d.dispatchEvent(i),ve&&(g(),w(),S&&((null===(t=d.parentNode)||void 0===t?void 0:t.contains(me))&&(null===(s=d.parentNode)||void 0===s||s.removeChild(me)),!1!==o&&(fe.left=me.style.left,fe.top=me.style.top)))};return document.addEventListener("mousemove",Le),document.addEventListener("mouseup",Ee),window.addEventListener("blur",Ee),e.preventDefault(),!1}))}(this.registerEvent.bind(this),e,this.opts,a(this,I,"f")),t.isDefined(this.opts.type)&&(e.dataset.dropType=this.opts.type),e.classList.toggle("uii-draggable",!0);(a(this,I,"f").get(e)||e).classList.toggle("uii-draggable-handle",!0),t.isDefined(this.opts.cursor)&&(e.style.cursor=this.opts.cursor.default||"move",t.isDefined(this.opts.cursor.over)&&(e.dataset.cursorOver=this.opts.cursor.over,e.dataset.cursorActive=this.opts.cursor.active||"move"))}))}onOptionChanged(e){const s=e.droppable;t.isFunction(s)||(t.isUndefined(s)?e.droppable=()=>{}:t.isString(s)?e.droppable=()=>document.querySelectorAll(s):t.isArrayLike(s)?e.droppable=()=>s:t.isElement(s)&&(e.droppable=()=>[s]))}}function R(e,t){return new Y(e,t)}var X;I=new WeakMap;const H=[];class P extends p{constructor(e,t){super(e,o.assign({},t)),X.set(this,void 0),H.push(this)}bindEvent(e,t){this.registerEvent(e,"mouseenter",(o=>{a(this,X,"f")&&(t.hoverClass&&s.each(n.split(t.hoverClass," "),(t=>{e.classList.toggle(t,!0)})),a(this,X,"f").dataset.cursorOver&&x(a(this,X,"f").dataset.cursorOver),t.onEnter&&t.onEnter({draggable:a(this,X,"f"),droppable:e},o))})),this.registerEvent(e,"mouseleave",(o=>{a(this,X,"f")&&(t.hoverClass&&s.each(n.split(t.hoverClass," "),(t=>{e.classList.toggle(t,!1)})),a(this,X,"f").dataset.cursorOver&&x(a(this,X,"f").dataset.cursorActive||""),t.onLeave&&t.onLeave({draggable:a(this,X,"f"),droppable:e},o))})),this.registerEvent(e,"mousemove",(s=>{a(this,X,"f")&&t.onOver&&t.onOver({draggable:a(this,X,"f"),droppable:e},s)})),this.registerEvent(e,"mouseup",(o=>{a(this,X,"f")&&(t.hoverClass&&s.each(n.split(t.hoverClass," "),(t=>{e.classList.toggle(t,!1)})),t.onDrop&&t.onDrop({draggable:a(this,X,"f"),droppable:e},o))}))}active(e){let o=!0;const i=this.opts;t.isString(i.accepts)?o=!!e.dataset.dropType&&n.test(i.accepts,e.dataset.dropType):t.isFunction(i.accepts)&&(o=i.accepts(this.ele,e)),o&&(c(this,X,e,"f"),i.activeClass&&s.each(this.ele,(e=>{s.each(n.split(i.activeClass||""," "),(t=>{e.classList.toggle(t,!0)}))})),i.onActive&&i.onActive({draggable:e,droppables:this.ele}),s.each(this.ele,(e=>{e.classList.toggle("uii-droppable",!0),e.style.pointerEvents="initial",this.bindEvent(e,i)})))}deactive(e){if(!a(this,X,"f"))return;c(this,X,null,"f");const t=this.opts;t.activeClass&&s.each(this.ele,(e=>{s.each(n.split(t.activeClass||""," "),(t=>{e.classList.toggle(t,!1)}))})),t.onDeactive&&t.onDeactive({draggable:e,droppables:this.ele}),this.destroy()}}function B(e,t){return new P(e,t)}X=new WeakMap,document.addEventListener("uii-dragactive",(e=>{s.each(H,(t=>{t.active(e.target)}))})),document.addEventListener("uii-dragdeactive",(e=>{s.each(H,(t=>{t.deactive(e.target)}))}));const j=180/Math.PI,_=2,U="uii-rotatable",V="uii-rotatable-handle",Z="uii-rotatable-active";class G extends p{constructor(e,o){super(e,o),s.each(this.ele,(e=>{!function(e,s){var o;const n=document.createElement("div");n.className=V,n.style.cssText="\n    position:absolute;\n    width:12px;\n    height:12px;\n    border-radius:50%;\n    left: calc(50% - 6px);\n    top: -24px;\n    ",n.style.cursor=(null===(o=s.cursor)||void 0===o?void 0:o.default)||"crosshair",function(e,s,o){const n=o.onStart,i=o.onRotate,l=o.onEnd;e.onmousedown=function(e){var r,a;const c=(window.getComputedStyle(s).transformOrigin||"").split(" "),d=s.cloneNode();d.style.cssText="transform:rotate(0);z-index:-999;position:absolute;",null===(r=s.parentElement)||void 0===r||r.appendChild(d);const p=d.getBoundingClientRect();null===(a=s.parentElement)||void 0===a||a.removeChild(d);let u=parseFloat(c[0])+p.x,h=parseFloat(c[1])+p.y,f=0,m=0;const y=window.getComputedStyle(s).transform;if(y.indexOf("matrix")>-1){const e=y.replace(/^matrix\(|\)$/gm,"").split(",");f=parseFloat(e[0]),m=parseFloat(e[1])}let L=Math.atan2(m,f)*j;L<0&&(L=360-L),L>360&&(L=360-L%360);const E=s.style;let C=Math.atan2(e.clientY-h,e.clientX-u)*j+90;C<0&&(C=360+C);const S=C-L;let T=!1;b();const z=e=>{var l;const r=e.clientX-u,a=e.clientY-h;if(!T){if(!(Math.abs(r)>_||Math.abs(a)>_))return e.preventDefault(),!1;T=!0,s.classList.toggle(Z,!0),n&&n({deg:L},e),v(),t.isDefined(o.cursor)&&x((null===(l=o.cursor)||void 0===l?void 0:l.active)||"crosshair")}return L=Math.atan2(a,r)*j+90-S,L<0&&(L=360+L),i&&i({deg:L},e),E.transform=E.transform.replace(/rotateZ\(.*?\)/,"")+" rotateZ("+L+"deg)",e.preventDefault(),!1},D=e=>{document.removeEventListener("mousemove",z,!1),document.removeEventListener("mouseup",D,!1),window.removeEventListener("blur",D,!1),T&&(g(),w(),s.classList.toggle(Z,!1),l&&l({deg:L},e))};return document.addEventListener("mousemove",z,!1),document.addEventListener("mouseup",D,!1),window.addEventListener("blur",D,!1),e.preventDefault(),!1}}(n,e,s),e.classList.toggle(U,!0),e.appendChild(n)}(e,this.opts)}))}}function J(e,t){return new G(e,t)}var K,Q,ee,te,se;class oe{constructor(e,s,n){K.set(this,void 0),c(this,K,s,"f"),this.opts={container:document.body},this.opts=o.assign(this.opts,n);const i=t.isString(e)?document.querySelector(e):e;if(!i)return void console.error('Invalid selector "'+e+'"');const l=i;this.el=i;const r=u(l,this.opts.container),a={x:r.x,y:r.y,width:l.offsetWidth,height:l.offsetHeight};this.elData={x1:a.x,y1:a.y,x2:a.x+a.width,y2:a.y+a.height},this.update()}update(){let e;e=t.isFunction(a(this,K,"f"))?a(this,K,"f").call(this):t.isString(a(this,K,"f"))?this.opts.container.querySelectorAll(a(this,K,"f")):t.isElement(a(this,K,"f"))?[a(this,K,"f")]:a(this,K,"f"),this.targetsData=s.flatMap(e,(e=>{if(!e)return[];if(!t.isElement(e))return[];const s=u(e,this.opts.container),o={x:s.x,y:s.y,width:e.offsetWidth,height:e.offsetHeight};return{x1:o.x,y1:o.y,x2:o.x+o.width,y2:o.y+o.height,el:e}}))}getOverlaps(e,t,o,n){let i=this.elData;return e&&o&&t&&n&&(i={x1:e,y1:t,x2:o,y2:n}),s.flatMap(this.targetsData,((e,t)=>i.x2<e.x1||i.x1>e.x2||i.y2<e.y1||i.y1>e.y2?[]:e.el))}getInclusions(e,t,o,n){let i=this.elData;return e&&o&&t&&n&&(i={x1:e,y1:t,x2:o,y2:n}),s.flatMap(this.targetsData,((e,t)=>i.x2>=e.x2&&i.x1<=e.x1&&i.y2>=e.y2&&i.y1<=e.y1?e.el:[]))}}function ne(e,t,s){return new oe(e,t,s)}K=new WeakMap;const ie="uii-selecting",le="uii-selected";class re extends p{constructor(e,t){super(e,o.assign({targets:[],scroll:!0},t)),Q.add(this),ee.set(this,void 0),te.set(this,void 0);const s=this.ele[0],n=document.createElement("div");n.className="uii-selector",n.style.cssText="\n      position:absolute;\n      left:-9999px;\n    ",this.opts.class?n.className+=" "+this.opts.class:n.style.cssText+="border:1px dashed #000;",s.appendChild(n),c(this,ee,ne(n,this.opts.targets,{container:s}),"f"),a(this,Q,"m",se).call(this,n,s)}updateTargets(){a(this,ee,"f").update()}onOptionChanged(){this.updateTargets()}}function ae(e,t){return new re(e,t)}var ce;ee=new WeakMap,te=new WeakMap,Q=new WeakSet,se=function(e,o){const i=this,r=this.opts;this.registerEvent(o,"mousedown",(d=>{const p=d.target,f=r.onStart,m=r.onSelect,v=r.onEnd,g=r.mode||"overlap",y=r.scroll,b=r.scrollSpeed||10,x=r.filter,w=l.compact(n.split(r.selectingClass," ")),L=l.compact(n.split(r.selectedClass," "));if(x)if(t.isFunction(x)){if(x(p))return}else if(s.some(o.querySelectorAll(x),(e=>e.contains(p))))return;let E="";const C=o.getBoundingClientRect(),S=window.getComputedStyle(o),T=parseFloat(S.borderLeftWidth),z=parseFloat(S.borderTopWidth);let D=d.offsetX+o.scrollLeft,k=d.offsetY+o.scrollTop;if(p!==o){const e=u(p,o),t=window.getComputedStyle(p);D=e.x+d.offsetX+parseFloat(t.borderLeftWidth),k=e.y+d.offsetY+parseFloat(t.borderTopWidth)}const M=e.style;let N=[],$=[],W=D,A=k,I=!1,O=null,F=!1,q=!1,Y=!1,R=!1;const X=e=>{const t=e.clientX-C.x+o.scrollLeft-T,n=e.clientY-C.y+o.scrollTop-z,l=t-D,r=n-k;if(!I){if(!(Math.abs(l)>2||Math.abs(r)>2))return e.preventDefault(),!1;I=!0,a(this,ee,"f").update();"static"===window.getComputedStyle(o).position&&(E=o.style.position,o.style.position="relative"),s.each(a(this,te,"f"),(e=>{e.classList.toggle(le,!1)})),f&&f({selection:a(this,te,"f"),selectable:o},e)}if(y){const t=e.clientX-C.x,s=e.clientY-C.y,n=C.x+C.width-e.clientX,i=C.y+C.height-e.clientY;F=t<h,q=s<h,Y=n<h,R=i<h,F||q||Y||R?O||(O=setInterval((()=>{F?o.scrollLeft-=b:Y&&(o.scrollLeft+=b),q?o.scrollTop-=b:R&&(o.scrollTop+=b)}),20)):O&&(clearInterval(O),O=null)}let c=D,d=k,p=Math.abs(l),u=Math.abs(r);l>0&&r>0?(W=D,A=k):l<0&&r<0?(c=W=t,d=A=n):l<0?c=W=t:r<0&&(d=A=n),M.left=c+"px",M.top=d+"px",M.width=p+"px",M.height=u+"px","overlap"===g?N=a(i,ee,"f").getOverlaps(W,A,W+p,A+u):"inclusion"===g&&(N=a(i,ee,"f").getInclusions(W,A,W+p,A+u)),s.each($,(e=>{s.includes(N,e)||(e.classList.toggle(ie,!1),s.each(w,(t=>{e.classList.toggle(t,!1)})))})),s.each(N,(e=>{e.classList.toggle(ie,!0),s.each(w,(t=>{e.classList.toggle(t,!0)}))}));const v=$.length!=N.length;return $=N,v&&m&&m({selection:N,selectable:o},e),e.preventDefault(),!1},H=e=>{M.left="-9999px",M.width=M.height="0px",document.removeEventListener("mousemove",X,!1),document.removeEventListener("mouseup",H,!1),window.removeEventListener("blur",H,!1),y&&O&&(clearInterval(O),O=null),E&&(o.style.position=E),s.each(N,(e=>{s.each(w,(t=>{e.classList.toggle(t,!1)})),s.each(L,(t=>{e.classList.toggle(t,!0)})),e.classList.toggle(ie,!1),e.classList.toggle(le,!0)})),c(this,te,N,"f"),I&&v&&v({selection:N,selectable:o},e)};return document.addEventListener("mousemove",X,!1),document.addEventListener("mouseup",H,!1),window.addEventListener("blur",H,!1),d.preventDefault(),!1}))};const de={},pe="uii-sortable-ghost",ue="uii-sortable-active",he="uii-sortable-active",fe=2;class me extends p{constructor(e,i){super(e,o.merge({move:{from:!0,to:!0},scroll:!0,sort:!0},i)),ce.set(this,void 0),s.size(this.ele)>1&&!this.opts.group&&(this.opts.group="uii_sortable_"+r.alphaId()),s.each(this.ele,(e=>{e.classList.add("uii-sortable-container"),e.style.position="relative",e.style.pointerEvents="initial",function(e,o,i){e(o,"mousedown",(e=>{var r;let a=e.currentTarget,c=e.target;if(c===a)return;const d=i.filter?`:not(${i.filter})`:"",p=a.querySelectorAll(":scope > *"+d),u=i.handle?s.map(p,(e=>e.querySelector(i.handle||""))):s.toArray(p),h=l.findIndex(u,(e=>e.contains(c)));if(h<0)return;const f=p[h],m=i.ghostContainer||a,y=i.onStart,x=i.onEnd,L=i.ghostClass,E=i.group;let C=null===(r=i.move)||void 0===r?void 0:r.to;const S="copy"===C,T=(t.isFunction(C)?C:()=>!!C)(f,a),z=i.sort;i.scroll,i.scrollSpeed;let D=e.offsetX+a.scrollLeft,k=e.offsetY+a.scrollTop;b();let M=!1,N=null,$=null;const W=e=>{const r=e.clientX,c=e.clientY;let d=r-D,u=c-k;if(!M){if(!(Math.abs(d)>fe||Math.abs(u)>fe))return e.preventDefault(),!1;{let r;M=!0,N=f.cloneNode(!0),N.style.opacity="0.3",N.style.pointerEvents="none",N.style.position="fixed",N.style.zIndex="999",N.style.left=f.style.left,N.style.top=f.style.top,L&&N.classList.add(...l.compact(n.split(L," "))),N.classList.toggle(pe,!0),m.appendChild(N),S||f.classList.toggle(ue,!0),S&&(r=f.cloneNode(!0),r.classList.toggle(ue,!0)),ve={item:f,fromIndex:h,fromContainer:a,toContainer:a,moveTo:S?"copy":T,spill:i.spill,copy:r},y&&y({item:f,from:a,index:h},e),v(),z&&($=ge(i,a,S?f:r,p,h)),T&&E&&de[E]&&s.each(de[E],(([e,n])=>{const i=s.reject(n,(e=>e===o));t.isEmpty(i)||e.active(S?f:r,o,i,e.getOptions())}))}}return N.style.left=r+"px",N.style.top=c+"px",e.preventDefault(),!1},A=n=>{var i;if(document.removeEventListener("mousemove",W),document.removeEventListener("mouseup",A),window.removeEventListener("blur",A),M){g(),w(),N&&m.removeChild(N);const n=null==ve?void 0:ve.toContainer;null==ve||ve.item.classList.remove(ue),null===(i=null==ve?void 0:ve.copy)||void 0===i||i.classList.remove(ue),ve=null,$&&$(),E&&de[E]&&s.each(de[E],(([e,n])=>{const i=s.reject(n,(e=>e===o));t.isEmpty(i)||e.deactive(f,o,i,e.getOptions())})),x&&x({item:f,from:o,to:n},e)}};return document.addEventListener("mousemove",W),document.addEventListener("mouseup",A),window.addEventListener("blur",A),e.preventDefault(),!1})),e(o,"mouseleave",(e=>{var t,s;if(ve&&(i.onLeave&&i.onLeave({item:ve.item,from:ve.fromContainer,to:o},e),"copy"!==ve.moveTo))if("remove"===ve.spill)null===(t=ve.item.parentElement)||void 0===t||t.removeChild(ve.item);else if("revert"===ve.spill){null===(s=ve.item.parentElement)||void 0===s||s.removeChild(ve.item);const e=ve.fromContainer.children[ve.fromIndex];ve.fromContainer.insertBefore(ve.item,e)}})),e(o,"mouseenter",(e=>{var s;if(!ve)return;let n=ve.item;n.parentElement;const l=e.clientX,r=e.clientY,a=o.getBoundingClientRect(),c=a.width/2,d=a.height/2,p=l-a.x,u=r-a.y;let h="";if(p<c&&u<d?h="tl":p>c&&u>d?h="br":p<c&&u>d?h="bl":p>c&&u<d&&(h="tr"),i.onEnter&&i.onEnter({item:ve.item,from:ve.fromContainer,to:o,dir:h},e),ve.toContainer=o,o.getAttribute(he)){let l=!0;const r=null===(s=i.move)||void 0===s?void 0:s.from;if(l=(t.isFunction(r)?r:()=>!!r)(ve.item,ve.fromContainer,o),!l)return;if(o.contains(n))return;"copy"===ve.moveTo&&(n=ve.copy),n.parentElement&&n.parentElement.removeChild(n);let a=0;"t"===h[0]?o.insertBefore(n,o.children[0]):(o.appendChild(n),a=o.children.length-1),i.onAdd&&i.onAdd({item:n,from:ve.fromContainer,to:o,index:a},e)}else if(o===ve.fromContainer)if(ve.copy){let e=ve.copy.parentElement;e&&e.removeChild(null==ve?void 0:ve.copy)}else n.parentElement&&n.parentElement.removeChild(n),"t"===h[0]?o.insertBefore(n,o.children[0]):(o.appendChild(n),o.children.length)}))}(this.registerEvent.bind(this),e,this.opts)})),this.opts.group&&(de[this.opts.group]||(de[this.opts.group]=[]),de[this.opts.group].push([this,this.ele]))}active(e,o,i,l){var r;const a=null===(r=l.move)||void 0===r?void 0:r.from,d=t.isFunction(a)?a:()=>!!a,p=s.flatMap(i,(t=>d(e,o,t)?t:[]));s.each(p,(e=>{e.setAttribute(he,"1"),l.activeClass&&s.each(n.split(l.activeClass||""," "),(t=>{e.classList.toggle(t,!0)}))})),c(this,ce,s.map(p,(t=>{const s=t.querySelectorAll(":scope > *");return ge(l,t,e,s)})),"f"),l.onActive&&l.onActive({item:e,from:o})}deactive(e,t,o,i){s.each(o,(e=>{e.removeAttribute(he),i.activeClass&&s.each(n.split(i.activeClass||""," "),(t=>{e.classList.toggle(t,!1)}))})),s.each(a(this,ce,"f"),(e=>{e()})),i.onDeactive&&i.onDeactive({item:e,from:t})}onOptionChanged(){}}ce=new WeakMap;let ve=null;function ge(e,t,o,n,i=0){const l=s=>{const o=s.currentTarget;if(o.style.transform)return;const n=o._uiik_i;let l=(null==ve?void 0:ve.copy)||(null==ve?void 0:ve.item);t===(null==ve?void 0:ve.fromContainer)&&(l=null==ve?void 0:ve.item);let r=l.parentElement;null==r||r.removeChild(l);r===o.parentElement||(r=o.parentElement);const a=i;n>i?(i=n,null==r||r.insertBefore(l,o.nextElementSibling)):(i=n-1,null==r||r.insertBefore(l,o)),e.onChange&&e.onChange({item:l,from:null==ve?void 0:ve.fromContainer,to:t,fromIndex:a,toIndex:i},s);const c=o.offsetLeft,d=o.offsetTop,p=l.offsetLeft,u=l.offsetTop;o.style.transform=`translate3d(${p-c}px,${u-d}px,0)`,l.style.transform=`translate3d(${c-p}px,${d-u}px,0)`,l.offsetHeight,o.offsetHeight,l.style.transition="transform .15s",l.style.transform="translate3d(0px,0px,0)",o.style.transition="transform .15s",o.style.transform="translate3d(0px,0px,0)",setTimeout((()=>{o.style.transition="",o.style.transform="",l.style.transition="",l.style.transform=""}),150),s.stopPropagation(),s.preventDefault()};return s.each(n,((e,t)=>{e.style.position="relative",e!==o&&(e.style.pointerEvents="initial",e._uiik_i=t,e.addEventListener("mouseenter",l))})),()=>{s.each(n,((e,t)=>{e!==o&&e.removeEventListener("mouseenter",l)}))}}function ye(e,t){return new me(e,t)}var be="1.1.0";if(!globalThis.welcome){const e=[];["102,227,255","59,208,251","67,180,255"].forEach(((t,s)=>{const o="background:rgb("+t+");";e[s]=s<2?e[4-s]=o:"color:#fff;"+o})),console.info(`%c %c %c Uiik - UI interactions kit | v${be} %c %c `,...e,"💎 https://github.com/holyhigh2/uiik"),globalThis.welcome=!0}const xe=be;var we={VERSION:be,newSplittable:D,newResizable:A,newDraggable:R,newDroppable:B,newRotatable:J,newSelectable:ae,newSortable:ye};e.CollisionDetector=oe,e.Draggable=Y,e.Droppable=P,e.Resizable=W,e.Rotatable=G,e.Selectable=re,e.Sortable=me,e.Splittable=z,e.Uii=p,e.VERSION=xe,e.default=we,e.newCollisionDetector=ne,e.newDraggable=R,e.newDroppable=B,e.newResizable=A,e.newRotatable=J,e.newSelectable=ae,e.newSortable=ye,e.newSplittable=D,Object.defineProperty(e,"__esModule",{value:!0})}));
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('myfx/is'), require('myfx/collection'), require('myfx/object'), require('myfx/string'), require('myfx/array'), require('myfx'), require('myfx/utils')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'myfx/is', 'myfx/collection', 'myfx/object', 'myfx/string', 'myfx/array', 'myfx', 'myfx/utils'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.uiik = {}, global.is, global.collection, global.object, global.string, global.array, null, global.utils));
+})(this, (function (exports, is, collection, object, string, array, myfx, utils) { 'use strict';
+
+    /******************************************************************************
+    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.
+    ***************************************************************************** */
+
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    }
+
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m") throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+        var e = new Error(message);
+        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
+
+    const UtMap = new WeakMap();
+    const EXP_MATRIX$1 = /matrix\((?<a>[\d-.]+)\s*,\s*(?<b>[\d-.]+)\s*,\s*(?<c>[\d-.]+)\s*,\s*(?<d>[\d-.]+)\s*,\s*(?<x>[\d-.]+)\s*,\s*(?<y>[\d-.]+)\)/gim;
+    class UiiTransformer {
+        constructor(el) {
+            this.angle = 0;
+            this.el = el;
+            this.normalize(el);
+            UtMap.set(el, this);
+        }
+        normalize(el) {
+            let { x, y } = normalize(el);
+            this.x = x;
+            this.y = y;
+            return this;
+        }
+        moveTo(x, y) {
+            this.x = x;
+            this.y = y;
+            moveTo(this.el, this.x, this.y);
+        }
+        moveToX(x) {
+            this.x = x;
+            moveTo(this.el, this.x, this.y);
+        }
+        moveToY(y) {
+            this.y = y;
+            moveTo(this.el, this.x, this.y);
+        }
+    }
+    function normalize(el) {
+        const style = window.getComputedStyle(el);
+        let x = 0, y = 0;
+        if (el instanceof HTMLElement) {
+            x = (parseFloat(style.left) || 0) + (parseFloat(style.marginLeft) || 0);
+            y = (parseFloat(style.top) || 0) + (parseFloat(style.marginTop) || 0);
+            el.style.setProperty("left", "0", "important");
+            el.style.setProperty("top", "0", "important");
+            el.style.setProperty("margin", "0", "important");
+        }
+        else {
+            x = parseFloat(style.x || style.cx) || 0;
+            y = parseFloat(style.y || style.cy) || 0;
+            el.removeAttribute("x");
+            el.removeAttribute("y");
+            el.removeAttribute("cx");
+            el.removeAttribute("cy");
+        }
+        EXP_MATRIX$1.lastIndex = 0;
+        const rs = EXP_MATRIX$1.exec(window.getComputedStyle(el).transform);
+        if (rs && rs.groups) {
+            x += parseFloat(rs.groups.x) || 0;
+            y += parseFloat(rs.groups.y) || 0;
+        }
+        moveTo(el, x, y);
+        return { x, y };
+    }
+    function wrapper(el) {
+        let ut = UtMap.get(el);
+        if (ut)
+            return ut.normalize(el);
+        return new UiiTransformer(el);
+    }
+    function transformMove(transofrmStr, x, y, unit = false) {
+        return (`translate(${x}${unit ? "px" : ""},${y}${unit ? "px" : ""})` +
+            transofrmStr.replace(/translate\([^)]+?\)/, ""));
+    }
+    function getTranslate(el) {
+        let xVal = NaN, yVal = NaN;
+        let transformStr = "";
+        if (el instanceof SVGGraphicsElement) {
+            transformStr = el.getAttribute("transform") || "";
+        }
+        else {
+            let style = el.style;
+            transformStr = style.transform || "";
+        }
+        EXP_GET_TRANSLATE.lastIndex = 0;
+        const xy = EXP_GET_TRANSLATE.exec(transformStr);
+        if (xy && xy.groups) {
+            xVal = parseFloat(xy.groups.x);
+            yVal = parseFloat(xy.groups.y);
+        }
+        else {
+            EXP_GET_TRANSLATE_XY.lastIndex = 0;
+            const xy = EXP_GET_TRANSLATE_XY.exec(transformStr);
+            if (xy && xy.groups) {
+                if (xy.groups.dir == "X") {
+                    xVal = parseFloat(xy.groups.v);
+                }
+                else {
+                    yVal = parseFloat(xy.groups.v);
+                }
+            }
+        }
+        return { x: xVal, y: yVal };
+    }
+    function moveTo(el, x, y) {
+        if (el instanceof SVGGraphicsElement) {
+            el.setAttribute("transform", transformMove(el.getAttribute("transform") || "", x, y));
+        }
+        else {
+            let style = el.style;
+            style.transform = transformMove(style.transform || "", x, y, true);
+        }
+    }
+    const EXP_GET_TRANSLATE = /translate\(\s*(?<x>[\d.-]+)\D*,\s*(?<y>[\d.-]+)\D*\)/gim;
+    const EXP_GET_TRANSLATE_XY = /translate(?<dir>X|Y)\(\s*(?<v>[\d.-]+)\D*\)/gim;
+    function moveBy(el, x, y) {
+        const xy = getTranslate(el);
+        if (el instanceof SVGGraphicsElement) {
+            el.setAttribute("transform", transformMove(el.getAttribute("transform") || "", xy.x + x, xy.y + y));
+        }
+        else {
+            let style = el.style;
+            style.transform = transformMove(style.transform || "", xy.x + x, xy.y + y, true);
+        }
+    }
+    function rotateTo(el, deg, cx, cy) {
+        if (el instanceof SVGGraphicsElement) {
+            let transformStr = el.getAttribute("transform") || "";
+            let originPos = is.isDefined(cx) && is.isDefined(cy);
+            let origin = "";
+            if (originPos) {
+                if (el.x instanceof SVGAnimatedLength) {
+                    cx += el.x.animVal.value;
+                    cy += el.y.animVal.value;
+                }
+                else if (el.cx instanceof SVGAnimatedLength) {
+                    cx += el.cx.animVal.value;
+                    cy += el.cy.animVal.value;
+                }
+                origin = `,${cx},${cy}`;
+            }
+            transformStr =
+                transformStr.replace(/rotate\([^)]+?\)/, "") + ` rotate(${deg}${origin})`;
+            el.setAttribute("transform", transformStr);
+        }
+        else {
+            let style = el.style;
+            style.transform =
+                style.transform.replace(/rotate\([^)]+?\)/, "").replace(/rotateZ\([^)]+?\)/, "") +
+                    " rotateZ(" +
+                    deg +
+                    "deg)";
+        }
+    }
+
+    const ONE_ANG = Math.PI / 180;
+    const ONE_RAD = 180 / Math.PI;
+    function getBox(child, parent) {
+        const rect = child.getBoundingClientRect();
+        const rs = { x: 0, y: 0, w: rect.width, h: rect.height };
+        parent =
+            parent ||
+                child.offsetParent ||
+                child.ownerSVGElement ||
+                child.parentElement ||
+                document.body;
+        const parentRect = parent.getBoundingClientRect();
+        const parentStyle = window.getComputedStyle(parent);
+        const parentBorderLeft = parseFloat(parentStyle.borderLeftWidth);
+        const parentBorderTop = parseFloat(parentStyle.borderTopWidth);
+        rs.x = rect.x - parentRect.x + parent.scrollLeft;
+        rs.y = rect.y - parentRect.y + parent.scrollTop;
+        if (child instanceof SVGElement) ;
+        else {
+            rs.x -= parentBorderLeft;
+            rs.y -= parentBorderTop;
+        }
+        return rs;
+    }
+    function getPointOffset(e, pos) {
+        let ox = e.offsetX || 0, oy = e.offsetY || 0;
+        if (e.target instanceof SVGElement) {
+            ox -= pos.x;
+            oy -= pos.y;
+        }
+        return [ox, oy];
+    }
+    function isSVGEl(el) {
+        return el instanceof SVGElement;
+    }
+    const EDGE_THRESHOLD = 5;
+    const DRAGGING_RULE = "body * { pointer-events: none; }";
+    let lockSheet;
+    function lockPage() {
+        lockSheet = getFirstSS();
+        lockSheet === null || lockSheet === void 0 ? void 0 : lockSheet.insertRule(DRAGGING_RULE, 0);
+    }
+    function unlockPage() {
+        lockSheet === null || lockSheet === void 0 ? void 0 : lockSheet.deleteRule(0);
+    }
+    function getFirstSS() {
+        if (document.styleSheets.length < 1) {
+            document.head.appendChild(document.createElement("style"));
+        }
+        const sheet = collection.find(document.styleSheets, (ss) => !ss.href);
+        if (!sheet) {
+            document.head.appendChild(document.createElement("style"));
+        }
+        return sheet || collection.find(document.styleSheets, (ss) => !ss.href);
+    }
+    let cursor = { html: "", body: "" };
+    function saveCursor() {
+        cursor.body = document.body.style.cursor;
+        cursor.html = document.documentElement.style.cursor;
+    }
+    function setCursor(cursor) {
+        document.body.style.cursor = document.documentElement.style.cursor = cursor;
+    }
+    function restoreCursor() {
+        document.body.style.cursor = cursor.body;
+        document.documentElement.style.cursor = cursor.html;
+    }
+    function getStyleXy(el) {
+        const style = window.getComputedStyle(el);
+        let x = 0, y = 0;
+        if (el instanceof SVGGraphicsElement) {
+            x = parseFloat(style.x || style.cx) || 0;
+            y = parseFloat(style.y || style.cy) || 0;
+        }
+        else {
+            x = parseFloat(style.left) || 0;
+            y = parseFloat(style.top) || 0;
+        }
+        return { x, y };
+    }
+    const EXP_MATRIX = /matrix\((?<a>[\d.-]+)\s*,\s*(?<b>[\d.-]+)\s*,\s*(?<c>[\d.-]+)\s*,\s*(?<d>[\d.-]+)\s*,\s*(?<x>[\d.-]+)\s*,\s*(?<y>[\d.-]+)\s*\)/;
+    function getMatrixInfo(elCStyle) {
+        let a = 1, b = 0, x = 0, y = 0;
+        let e = undefined, f = undefined;
+        if (elCStyle instanceof SVGGraphicsElement) {
+            const transMatrix = elCStyle.transform.animVal[0];
+            if (transMatrix) {
+                e = transMatrix.matrix.e;
+                f = transMatrix.matrix.f;
+            }
+            elCStyle = window.getComputedStyle(elCStyle);
+        }
+        else {
+            if (elCStyle instanceof HTMLElement) {
+                elCStyle = window.getComputedStyle(elCStyle);
+            }
+        }
+        const matched = elCStyle.transform.match(EXP_MATRIX);
+        if (matched && matched.groups) {
+            a = parseFloat(matched.groups.a);
+            b = parseFloat(matched.groups.b);
+            parseFloat(matched.groups.c);
+            parseFloat(matched.groups.d);
+            x = parseFloat(matched.groups.x);
+            y = parseFloat(matched.groups.y);
+        }
+        if (e && f) {
+            x = e;
+            y = f;
+        }
+        const rs = { scale: 1, angle: 0, x, y };
+        rs.scale = Math.sqrt(a * a + b * b);
+        rs.angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
+        return rs;
+    }
+    function getPointInContainer(event, el, elRect, elCStyle, matrixInfo) {
+        if (!elRect) {
+            elRect = el.getBoundingClientRect();
+        }
+        if (!elCStyle) {
+            elCStyle = window.getComputedStyle(el);
+        }
+        if (!matrixInfo) {
+            matrixInfo = getMatrixInfo(elCStyle);
+        }
+        const scale = matrixInfo.scale;
+        let x = event.clientX -
+            elRect.x -
+            (parseFloat(elCStyle.borderLeftWidth) || 0) * scale +
+            el.scrollLeft * scale;
+        let y = event.clientY -
+            elRect.y -
+            (parseFloat(elCStyle.borderTopWidth) || 0) * scale +
+            el.scrollTop * scale;
+        return { x: x / scale, y: y / scale };
+    }
+    function getRectInContainer(el, container) {
+        const elRect = el.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        const elCStyle = window.getComputedStyle(container);
+        const matrixInfo = getMatrixInfo(elCStyle);
+        const scale = matrixInfo.scale;
+        let x = elRect.x -
+            containerRect.x -
+            (parseFloat(elCStyle.borderLeftWidth) || 0) * scale +
+            container.scrollLeft * scale;
+        let y = elRect.y -
+            containerRect.y -
+            (parseFloat(elCStyle.borderTopWidth) || 0) * scale +
+            container.scrollTop * scale;
+        return {
+            x: x / scale,
+            y: y / scale,
+            w: elRect.width / scale,
+            h: elRect.height / scale,
+        };
+    }
+    function getCenterXy(el) {
+        const cStyle = window.getComputedStyle(el);
+        const center = cStyle.transformOrigin;
+        const centerPair = center.split(" ");
+        const ox = parseFloat(centerPair[0]);
+        const oy = parseFloat(centerPair[1]);
+        const shadowDom = el.cloneNode();
+        rotateTo(shadowDom, 0);
+        const parentEl = el.parentElement;
+        let startX = 0, startY = 0;
+        if (parentEl) {
+            parentEl.appendChild(shadowDom);
+            const offsetXY = getRectInContainer(shadowDom, parentEl);
+            (startX = offsetXY.x), (startY = offsetXY.y);
+            parentEl.removeChild(shadowDom);
+        }
+        return { sx: startX, sy: startY, x: startX + ox, y: startY + oy, ox, oy };
+    }
+
+    var _Uii_listeners;
+    class Uii {
+        constructor(ele, opts) {
+            this.enabled = true;
+            _Uii_listeners.set(this, []);
+            this.opts = opts || {};
+            if (is.isArrayLike(ele) && !is.isString(ele)) {
+                this.ele = collection.map(ele, (el) => {
+                    let e = is.isString(el) ? document.querySelector(el) : el;
+                    if (!is.isElement(e)) {
+                        console.error('Invalid element "' + el + '"');
+                        return false;
+                    }
+                    return e;
+                });
+            }
+            else {
+                if (is.isString(ele)) {
+                    this.eleString = ele;
+                }
+                const el = is.isString(ele) ? document.querySelectorAll(ele) : ele;
+                if (!is.isElement(el) && !is.isArrayLike(el)) {
+                    console.error('Invalid element "' + ele + '"');
+                    return;
+                }
+                this.ele = is.isArrayLike(el) ? collection.toArray(el) : [el];
+            }
+        }
+        destroy() {
+            collection.each(__classPrivateFieldGet(this, _Uii_listeners, "f"), (ev) => {
+                ev[0].removeEventListener(ev[1], ev[2], ev[3]);
+            });
+            __classPrivateFieldSet(this, _Uii_listeners, [], "f");
+        }
+        addPointerDown(el, pointerDown, opts) {
+            const onPointerDown = pointerDown;
+            const threshold = opts.threshold || 0;
+            const toLockPage = opts.lockPage || false;
+            const uiiOptions = this.opts;
+            this.registerEvent(el, 'mousedown', (e) => {
+                let t = e.target;
+                if (!t)
+                    return;
+                const hasCursor = !is.isEmpty(object.get(uiiOptions, 'cursor.active'));
+                const currentStyle = el.style;
+                const currentCStyle = window.getComputedStyle(el);
+                const currentRect = el.getBoundingClientRect();
+                let dragging = false;
+                const originPosX = e.clientX;
+                const originPosY = e.clientY;
+                if (hasCursor) {
+                    saveCursor();
+                }
+                let onPointerStart;
+                let onPointerMove;
+                let onPointerEnd;
+                onPointerDown({
+                    onPointerMove: (pm) => { onPointerMove = pm; },
+                    onPointerStart: (ps) => { onPointerStart = ps; },
+                    onPointerEnd: (pe) => { onPointerEnd = pe; },
+                    ev: e,
+                    pointX: e.clientX, pointY: e.clientY, target: t,
+                    currentTarget: el, currentStyle, currentCStyle, currentRect
+                });
+                const pointerMove = (ev) => {
+                    const offX = ev.clientX - originPosX;
+                    const offY = ev.clientY - originPosY;
+                    if (!dragging) {
+                        if (Math.abs(offX) > threshold || Math.abs(offY) > threshold) {
+                            dragging = true;
+                            if (toLockPage) {
+                                lockPage();
+                            }
+                            if (hasCursor) {
+                                setCursor(uiiOptions.cursor.active);
+                            }
+                            onPointerMove && onPointerStart({ ev });
+                        }
+                        else {
+                            ev.preventDefault();
+                            return false;
+                        }
+                    }
+                    onPointerMove && onPointerMove({ ev, pointX: ev.clientX, pointY: ev.clientY, offX, offY, currentStyle, currentCStyle });
+                };
+                const pointerEnd = (ev) => {
+                    document.removeEventListener('mousemove', pointerMove, false);
+                    document.removeEventListener('mouseup', pointerEnd, false);
+                    window.removeEventListener('blur', pointerEnd, false);
+                    if (dragging) {
+                        if (toLockPage) {
+                            unlockPage();
+                        }
+                        if (hasCursor) {
+                            restoreCursor();
+                        }
+                        onPointerEnd && onPointerEnd({ ev, currentStyle });
+                    }
+                };
+                document.addEventListener("mousemove", pointerMove);
+                document.addEventListener("mouseup", pointerEnd);
+                window.addEventListener("blur", pointerEnd);
+                e.preventDefault();
+                return false;
+            }, true);
+        }
+        registerEvent(el, event, hook, useCapture = false) {
+            const wrapper = ((ev) => {
+                if (!this.enabled)
+                    return;
+                hook(ev);
+            }).bind(this);
+            el.addEventListener(event, wrapper, useCapture);
+            __classPrivateFieldGet(this, _Uii_listeners, "f").push([el, event, wrapper, useCapture]);
+        }
+        disable() {
+            this.enabled = false;
+        }
+        enable() {
+            this.enabled = true;
+        }
+        getOptions() {
+            return this.opts;
+        }
+        getOption(name) {
+            return this.opts[name];
+        }
+        setOptions(options) {
+            object.assign(this.opts, options);
+            this.onOptionChanged(this.opts);
+        }
+        setOption(name, value) {
+            this.opts[name] = value;
+            this.onOptionChanged(this.opts);
+        }
+        onOptionChanged(opts) { }
+    }
+    _Uii_listeners = new WeakMap();
+
+    var _Splittable_instances, _Splittable_checkDirection, _Splittable_bindHandle;
+    const THRESHOLD$4 = 1;
+    const CLASS_SPLITTABLE = "uii-splittable";
+    const CLASS_SPLITTABLE_HANDLE = "uii-splittable-handle";
+    const CLASS_SPLITTABLE_HANDLE_GHOST = "uii-splittable-handle-ghost";
+    const CLASS_SPLITTABLE_HANDLE_ACTIVE = "uii-splittable-handle-active";
+    const CLASS_SPLITTABLE_V = "uii-splittable-v";
+    const CLASS_SPLITTABLE_H = "uii-splittable-h";
+    function getRootEl(el, root) {
+        let rs = el.parentNode;
+        while (rs && rs.parentNode !== root) {
+            rs = rs.parentNode;
+        }
+        return rs;
+    }
+    class Splittable extends Uii {
+        constructor(container, opts) {
+            super(container, object.assign({
+                handleSize: 10,
+                minSize: 0,
+                sticky: false,
+                inside: false,
+                ghost: false
+            }, opts));
+            _Splittable_instances.add(this);
+            collection.each(this.ele, con => {
+                const pos = window.getComputedStyle(con).position;
+                if (pos === "static") {
+                    con.style.position = "relative";
+                }
+                con.classList.toggle(CLASS_SPLITTABLE, true);
+                const handleDoms = con.querySelectorAll(this.opts.handle);
+                const children = collection.reject(con.children, c => {
+                    if (collection.includes(handleDoms, c))
+                        return true;
+                    return false;
+                });
+                const dir = __classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_checkDirection).call(this, con);
+                con.classList.toggle(dir === 'v' ? CLASS_SPLITTABLE_V : CLASS_SPLITTABLE_H, true);
+                const minSizeAry = collection.map(children, (c, i) => {
+                    if (is.isArray(this.opts.minSize)) {
+                        return this.opts.minSize[i] || 0;
+                    }
+                    else {
+                        return this.opts.minSize;
+                    }
+                });
+                const stickyAry = collection.map(children, (c, i) => {
+                    if (is.isArray(this.opts.sticky)) {
+                        return this.opts.sticky[i] || false;
+                    }
+                    else {
+                        return this.opts.sticky;
+                    }
+                });
+                if (is.isEmpty(handleDoms)) {
+                    const len = children.length - 1;
+                    for (let i = 0; i < len; i++) {
+                        __classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_bindHandle).call(this, minSizeAry.slice(i, i + 2), stickyAry.slice(i, i + 2), this.opts, dir, children[i], children[i + 1]);
+                    }
+                }
+                else {
+                    collection.each(handleDoms, (h, i) => {
+                        const isRoot = h.parentNode.classList.contains(CLASS_SPLITTABLE);
+                        let dom1, dom2;
+                        if (isRoot) {
+                            dom1 = h.previousElementSibling;
+                            dom2 = h.nextElementSibling;
+                        }
+                        else {
+                            dom2 = getRootEl(h, con);
+                            dom1 = dom2.previousElementSibling;
+                        }
+                        __classPrivateFieldGet(this, _Splittable_instances, "m", _Splittable_bindHandle).call(this, minSizeAry.slice(i, i + 2), stickyAry.slice(i, i + 2), this.opts, dir, dom1, dom2, h);
+                    });
+                }
+            });
+        }
+    }
+    _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Splittable_checkDirection(container) {
+        let dir = 'h';
+        const child = container.children[0];
+        let lastY = child.offsetTop;
+        collection.each(container.children, c => {
+            if (c.offsetTop != lastY) {
+                dir = 'v';
+                return false;
+            }
+        });
+        return dir;
+    }, _Splittable_bindHandle = function _Splittable_bindHandle(minSizeAry, stickyAry, opts, dir, dom1, dom2, handle) {
+        var _a;
+        const handleSize = opts.handleSize;
+        if (!handle) {
+            handle = document.createElement('div');
+            let initPos = 0;
+            if (!opts.inside) {
+                initPos = (dir === 'v' ? dom2.offsetTop : dom2.offsetLeft);
+            }
+            const sensorHCss = `width:${handleSize}px;height:100%;top:0;left:${initPos - handleSize / 2}px;z-index:9;`;
+            const sensorVCss = `height:${handleSize}px;width:100%;left:0;top:${initPos - handleSize / 2}px;z-index:9;`;
+            handle.style.cssText =
+                'position: absolute;' + (dir === 'v' ? sensorVCss : sensorHCss);
+            if (opts.inside) {
+                dom2.appendChild(handle);
+            }
+            (_a = dom2.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(handle, dom2);
+        }
+        handle.style.cursor = dir === 'v' ? 's-resize' : 'e-resize';
+        handle.dataset.cursor = handle.style.cursor;
+        handle.classList.add(CLASS_SPLITTABLE_HANDLE);
+        const minSize1 = minSizeAry[0];
+        const minSize2 = minSizeAry[1];
+        let sticky1 = stickyAry[0];
+        let sticky2 = stickyAry[1];
+        const onStart = opts.onStart;
+        const onSplit = opts.onSplit;
+        const onEnd = opts.onEnd;
+        const onSticky = opts.onSticky;
+        const onClone = opts.onClone;
+        const oneSideMode = opts.oneSideMode;
+        const updateStart = !oneSideMode || oneSideMode === 'start';
+        const updateEnd = !oneSideMode || oneSideMode === 'end';
+        this.addPointerDown(handle, ({ currentTarget, onPointerStart, onPointerMove, onPointerEnd }) => {
+            let originSize = 0;
+            let originSize1 = 0;
+            let splitterSize = 1;
+            let blockSize = 0;
+            switch (dir) {
+                case 'v':
+                    originSize = dom1.offsetHeight;
+                    originSize1 = dom2.offsetHeight;
+                    splitterSize = currentTarget.offsetHeight;
+                    break;
+                case 'h':
+                    originSize = dom1.offsetWidth;
+                    originSize1 = dom2.offsetWidth;
+                    splitterSize = currentTarget.offsetWidth;
+                    break;
+            }
+            blockSize = splitterSize + originSize + originSize1;
+            const dom1Style = dom1.style;
+            const dom2Style = dom2.style;
+            const ghost = opts.ghost;
+            const ghostClass = opts.ghostClass;
+            let ghostNode = null;
+            let sticked = 'none';
+            if (originSize < minSize1 / 2) {
+                sticked = 'start';
+            }
+            else if (blockSize - originSize - splitterSize < minSize2 / 2) {
+                sticked = 'end';
+            }
+            let startPos = dir === 'v' ? dom1.offsetTop : dom1.offsetLeft;
+            let ds1, anotherSize;
+            onPointerStart(function (args) {
+                const { ev } = args;
+                currentTarget.classList.add(CLASS_SPLITTABLE_HANDLE_ACTIVE);
+                if (ghost) {
+                    ghostNode = currentTarget.cloneNode(true);
+                    ghostNode.style.opacity = '0.3';
+                    ghostNode.style.pointerEvents = 'none';
+                    ghostNode.classList.add(CLASS_SPLITTABLE_HANDLE_GHOST);
+                    if (ghostNode) {
+                        if (ghostClass) {
+                            ghostNode.className =
+                                ghostNode.className.replace(ghostClass, '') + ' ' + ghostClass;
+                        }
+                        currentTarget.parentNode.appendChild(ghostNode);
+                        onClone && onClone({ clone: ghostNode }, ev);
+                    }
+                }
+                onStart && onStart({ size1: originSize, size2: originSize1 }, ev);
+            });
+            onPointerMove((args) => {
+                const { ev, offX, offY, currentStyle } = args;
+                let doSticky = false;
+                ds1 = dir === 'v' ? originSize + offY : originSize + offX;
+                if (ds1 < minSize1 / 2 && sticky1 && minSize1 > 0) {
+                    if (sticked == 'none') {
+                        doSticky = true;
+                        sticked = 'start';
+                    }
+                    ds1 = 0;
+                }
+                else if (ds1 < minSize1) {
+                    ds1 = minSize1;
+                    if (sticked == 'start' && sticky1) {
+                        doSticky = true;
+                        sticked = 'none';
+                    }
+                }
+                else if (blockSize - ds1 - splitterSize < minSize2 / 2 &&
+                    sticky2) {
+                    if (sticked == 'none') {
+                        doSticky = true;
+                        sticked = 'end';
+                    }
+                    ds1 = blockSize - splitterSize;
+                }
+                else if (blockSize - ds1 - splitterSize < minSize2) {
+                    ds1 = blockSize - minSize2 - splitterSize;
+                    if (sticked == 'end' && sticky2) {
+                        doSticky = true;
+                        sticked = 'none';
+                    }
+                }
+                anotherSize = blockSize - ds1 - splitterSize;
+                if (ghostNode) {
+                    if (dir === 'v') {
+                        ghostNode.style.top = startPos + ds1 - handleSize / 2 + 'px';
+                    }
+                    else {
+                        ghostNode.style.left = startPos + ds1 - handleSize / 2 + 'px';
+                        console.log(ghostNode.style.left);
+                    }
+                }
+                else {
+                    const updateProp = dir === 'v' ? 'height' : 'width';
+                    if (updateStart) {
+                        dom1Style.setProperty(updateProp, ds1 + 'px', 'important');
+                    }
+                    if (updateEnd) {
+                        dom2Style.setProperty(updateProp, anotherSize + 'px', 'important');
+                    }
+                    if (doSticky) {
+                        onSticky && onSticky({ size1: ds1, size2: anotherSize, position: sticked }, ev);
+                    }
+                    if (dir === 'v') {
+                        currentStyle.top = dom2.offsetTop - handleSize / 2 + 'px';
+                    }
+                    else {
+                        currentStyle.left = dom2.offsetLeft - handleSize / 2 + 'px';
+                    }
+                }
+                onSplit && onSplit({ size1: ds1, size2: anotherSize }, ev);
+            });
+            onPointerEnd((args) => {
+                var _a, _b;
+                const { ev, currentStyle } = args;
+                switch (dir) {
+                    case 'v':
+                        originSize = (dom1 === null || dom1 === void 0 ? void 0 : dom1.offsetHeight) || -1;
+                        originSize1 = (dom2 === null || dom2 === void 0 ? void 0 : dom2.offsetHeight) || -1;
+                        break;
+                    case 'h':
+                        originSize = (dom1 === null || dom1 === void 0 ? void 0 : dom1.offsetWidth) || -1;
+                        originSize1 = (dom2 === null || dom2 === void 0 ? void 0 : dom2.offsetWidth) || -1;
+                        break;
+                }
+                handle === null || handle === void 0 ? void 0 : handle.classList.remove(CLASS_SPLITTABLE_HANDLE_ACTIVE);
+                if (ghostNode) {
+                    const updateProp = dir === 'v' ? 'height' : 'width';
+                    if (updateStart) {
+                        dom1Style.setProperty(updateProp, ds1 + 'px', 'important');
+                    }
+                    if (updateEnd) {
+                        dom2Style.setProperty(updateProp, anotherSize + 'px', 'important');
+                    }
+                    if (dir === 'v') {
+                        currentStyle.top = startPos + ds1 - handleSize / 2 + 'px';
+                    }
+                    else {
+                        currentStyle.left = startPos + ds1 - handleSize / 2 + 'px';
+                    }
+                    ((_a = ghostNode.parentNode) === null || _a === void 0 ? void 0 : _a.contains(ghostNode)) && ((_b = ghostNode.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(ghostNode));
+                }
+                onEnd && onEnd({ size1: originSize, size2: originSize1 }, ev);
+            });
+        }, {
+            threshold: THRESHOLD$4,
+            lockPage: true
+        });
+    };
+    function newSplittable(container, opts) {
+        return new Splittable(container, opts);
+    }
+
+    const THRESHOLD$3 = 2;
+    const CLASS_RESIZABLE_HANDLE = "uii-resizable-handle";
+    const CLASS_RESIZABLE_HANDLE_DIR = "uii-resizable-handle-";
+    const CLASS_RESIZABLE_HANDLE_ACTIVE = "uii-resizable-handle-active";
+    const EXP_DIR = new RegExp(CLASS_RESIZABLE_HANDLE_DIR + "(?<dir>[nesw]+)");
+    class Resizable extends Uii {
+        constructor(els, opts) {
+            super(els, object.assign({
+                handleSize: 8,
+                minSize: 50,
+                dir: ["n", "s", "e", "w", "ne", "nw", "se", "sw"],
+                ghost: false,
+                offset: 0,
+            }, opts));
+            collection.each(this.ele, (el) => {
+                this.initHandle(el);
+            });
+        }
+        bindHandle(handle, dir, panel, opts) {
+            const onStart = opts.onStart;
+            const onResize = opts.onResize;
+            const onEnd = opts.onEnd;
+            const onClone = opts.onClone;
+            const uiik = this;
+            this.addPointerDown(handle, ({ ev, onPointerStart, onPointerMove, onPointerEnd }) => {
+                const onPointerDown = opts.onPointerDown;
+                if (onPointerDown && onPointerDown(ev) === false)
+                    return;
+                let matrixInfo = getMatrixInfo(panel);
+                const offset = getRectInContainer(panel, panel.parentElement);
+                const offsetParentRect = panel.parentElement.getBoundingClientRect();
+                const offsetParentCStyle = window.getComputedStyle(panel.parentElement);
+                const panelCStyle = window.getComputedStyle(panel);
+                const originW = parseFloat(panelCStyle.width);
+                const originH = parseFloat(panelCStyle.height);
+                const originX = offset.x;
+                const originY = offset.y;
+                let changeW = false;
+                let changeH = false;
+                let changeX = false;
+                let changeY = false;
+                let toTransformOrigin = "";
+                switch (dir) {
+                    case "s":
+                        changeH = true;
+                        break;
+                    case "e":
+                        changeW = true;
+                        break;
+                    case "se":
+                        changeW = true;
+                        changeH = true;
+                        break;
+                    case "n":
+                        changeX = true;
+                        changeY = true;
+                        changeH = true;
+                        toTransformOrigin = "0 0";
+                        break;
+                    case "w":
+                        changeX = true;
+                        changeY = true;
+                        changeW = true;
+                        toTransformOrigin = "0 0";
+                        break;
+                    case "sw":
+                    case "ne":
+                    case "nw":
+                        changeX = true;
+                        changeY = true;
+                        changeW = true;
+                        changeH = true;
+                        toTransformOrigin = "0 0";
+                        break;
+                }
+                let minWidth;
+                let minHeight;
+                let maxWidth;
+                let maxHeight;
+                if (is.isArray(opts.minSize)) {
+                    minWidth = opts.minSize[0];
+                    minHeight = opts.minSize[1];
+                }
+                else if (is.isNumber(opts.minSize)) {
+                    minWidth = opts.minSize;
+                    minHeight = opts.minSize;
+                }
+                if (is.isArray(opts.maxSize)) {
+                    maxWidth = opts.maxSize[0];
+                    maxHeight = opts.maxSize[1];
+                }
+                else if (is.isNumber(opts.maxSize)) {
+                    maxWidth = opts.maxSize;
+                    maxHeight = opts.maxSize;
+                }
+                const ghost = opts.ghost;
+                const ghostClass = opts.ghostClass;
+                let ghostNode = null;
+                const aspectRatio = opts.aspectRatio;
+                const panelStyle = panel.style;
+                let style = panelStyle;
+                let currentW = originW;
+                let currentH = originH;
+                let transformer;
+                let lastX = 0, lastY = 0;
+                let originalTransformOrigin = "";
+                let originVertex;
+                let vertexBeforeTransform;
+                let currentVertex;
+                let refPoint;
+                let k1;
+                onPointerStart(function (args) {
+                    var _a;
+                    const { ev } = args;
+                    handle.classList.add(CLASS_RESIZABLE_HANDLE_ACTIVE);
+                    if (ghost) {
+                        if (is.isFunction(ghost)) {
+                            ghostNode = ghost(panel);
+                        }
+                        else {
+                            ghostNode = panel.cloneNode(true);
+                            ghostNode.style.opacity = "0.3";
+                            ghostNode.style.pointerEvents = "none";
+                        }
+                        if (ghostNode) {
+                            if (ghostClass) {
+                                ghostNode.className =
+                                    ghostNode.className.replace(ghostClass, "") +
+                                        " " +
+                                        ghostClass;
+                            }
+                            (_a = panel.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(ghostNode);
+                            transformer = wrapper(ghostNode);
+                            onClone && onClone({ clone: ghostNode }, ev);
+                        }
+                        style = ghostNode === null || ghostNode === void 0 ? void 0 : ghostNode.style;
+                    }
+                    else {
+                        transformer = wrapper(panel);
+                    }
+                    const { x, y, sx, sy } = getCenterXy(panel);
+                    let centerX = x, centerY = y;
+                    const deg = matrixInfo.angle * ONE_ANG;
+                    originVertex = [
+                        { x: 0, y: 0 },
+                        { x: originW, y: 0 },
+                        { x: 0, y: originH },
+                        { x: originW, y: originH },
+                    ];
+                    currentVertex = vertexBeforeTransform = collection.map(originVertex, ({ x, y }) => {
+                        const nx = (x - centerX + sx) * Math.cos(deg) -
+                            (y - centerY + sy) * Math.sin(deg);
+                        const ny = (x - centerX + sx) * Math.sin(deg) +
+                            (y - centerY + sy) * Math.cos(deg);
+                        return { x: centerX + nx, y: centerY + ny };
+                    });
+                    switch (dir) {
+                        case "s":
+                        case "e":
+                        case "se":
+                            refPoint = currentVertex[0];
+                            break;
+                        case "n":
+                        case "w":
+                        case "nw":
+                            refPoint = currentVertex[3];
+                            break;
+                        case "sw":
+                            refPoint = currentVertex[1];
+                            break;
+                        case "ne":
+                            refPoint = currentVertex[2];
+                            break;
+                    }
+                    k1 =
+                        (currentVertex[1].y - refPoint.y) /
+                            (currentVertex[1].x - refPoint.x);
+                    style.transition = "none";
+                    originalTransformOrigin = style.transformOrigin;
+                    if (toTransformOrigin) {
+                        style.transformOrigin = toTransformOrigin;
+                    }
+                    else {
+                        style.transformOrigin = `${centerX - transformer.x}px ${centerY - transformer.y}px`;
+                    }
+                    onStart && onStart.call(uiik, { w: originW, h: originH }, ev);
+                });
+                onPointerMove((args) => {
+                    const { ev } = args;
+                    const currentXy = getPointInContainer(ev, panel.parentElement, offsetParentRect, offsetParentCStyle);
+                    let newX = currentXy.x;
+                    let newY = currentXy.y;
+                    let angle = Math.atan2(newY - refPoint.y, newX - refPoint.x) * ONE_RAD -
+                        matrixInfo.angle;
+                    let hyLen = Math.sqrt((newX - refPoint.x) * (newX - refPoint.x) +
+                        (newY - refPoint.y) * (newY - refPoint.y));
+                    let pl1 = Math.abs(k1 === Infinity
+                        ? newY - refPoint.y
+                        : hyLen * Math.cos(angle * ONE_ANG));
+                    let pl2 = Math.sqrt(hyLen * hyLen - pl1 * pl1);
+                    let w = originW;
+                    let h = originH;
+                    let y = originY;
+                    let x = originX;
+                    let angl = 0;
+                    switch (dir) {
+                        case "s":
+                            h = pl2;
+                            break;
+                        case "e":
+                            w = pl1;
+                            break;
+                        case "se":
+                            w = pl1;
+                            h = pl2;
+                            break;
+                        case "n":
+                            h = pl2;
+                            angl =
+                                Math.atan2(currentVertex[0].y - currentVertex[2].y, currentVertex[0].x - currentVertex[2].x) * ONE_RAD;
+                            let plh;
+                            if (angl === 90) {
+                                h = newY - currentVertex[2].y;
+                                x = currentVertex[2].x;
+                                y = newY;
+                            }
+                            else if (currentVertex[2].y > currentVertex[0].y) {
+                                plh = h * Math.cos(angl * ONE_ANG);
+                                x = currentVertex[2].x + plh;
+                                y = currentVertex[2].y - Math.sqrt(h * h - plh * plh);
+                            }
+                            else {
+                                plh = h * Math.cos((180 - angl) * ONE_ANG);
+                                x = currentVertex[2].x - plh;
+                                y = currentVertex[2].y + Math.sqrt(h * h - plh * plh);
+                            }
+                            break;
+                        case "w":
+                            w = pl1;
+                            angl =
+                                Math.atan2(currentVertex[0].y - currentVertex[1].y, currentVertex[0].x - currentVertex[1].x) * ONE_RAD;
+                            let plw;
+                            if (angl === 0) {
+                                w = newX - currentVertex[1].x;
+                                x = newX;
+                                y = currentVertex[1].y;
+                            }
+                            else if (currentVertex[1].y > currentVertex[0].y) {
+                                plw = w * Math.cos((180 - angl) * ONE_ANG);
+                                x = currentVertex[1].x - plw;
+                                y = currentVertex[1].y - Math.sqrt(w * w - plw * plw);
+                            }
+                            else {
+                                plw = w * Math.cos(angl * ONE_ANG);
+                                x = currentVertex[1].x + plw;
+                                y = currentVertex[1].y + Math.sqrt(w * w - plw * plw);
+                            }
+                            break;
+                        case "nw":
+                            w = pl1;
+                            h = pl2;
+                            x = newX;
+                            y = newY;
+                            if (matrixInfo.angle === 180) {
+                                w = newX - currentVertex[3].x;
+                                h = newY - currentVertex[3].y;
+                            }
+                            break;
+                        case "sw":
+                            w = pl1;
+                            h = pl2;
+                            angl =
+                                Math.atan2(currentVertex[0].y - currentVertex[1].y, currentVertex[0].x - currentVertex[1].x) * ONE_RAD;
+                            let plw1;
+                            if (angl === 0) {
+                                x = newX;
+                                y = currentVertex[0].y;
+                            }
+                            else if (currentVertex[1].y > currentVertex[0].y) {
+                                plw1 = w * Math.cos((180 - angl) * ONE_ANG);
+                                x = currentVertex[1].x - plw1;
+                                y = currentVertex[1].y - Math.sqrt(w * w - plw1 * plw1);
+                            }
+                            else {
+                                plw1 = w * Math.cos((180 - angl) * ONE_ANG);
+                                x = currentVertex[1].x - plw1;
+                                y = currentVertex[1].y + Math.sqrt(w * w - plw1 * plw1);
+                            }
+                            break;
+                        case "ne":
+                            w = pl1;
+                            h = pl2;
+                            angl =
+                                Math.atan2(currentVertex[0].y - currentVertex[2].y, currentVertex[0].x - currentVertex[2].x) * ONE_RAD;
+                            let plne;
+                            if (angl === 0) {
+                                x = newX;
+                                y = currentVertex[0].y;
+                            }
+                            else if (currentVertex[1].x > currentVertex[0].x) {
+                                plne = h * Math.cos((180 - angl) * ONE_ANG);
+                                x = currentVertex[2].x - plne;
+                                y = currentVertex[2].y - Math.sqrt(h * h - plne * plne);
+                            }
+                            else {
+                                plne = h * Math.cos(angl * ONE_ANG);
+                                x = currentVertex[2].x + plne;
+                                y = currentVertex[2].y + Math.sqrt(h * h - plne * plne);
+                            }
+                            break;
+                    }
+                    if (changeW) {
+                        if (minWidth && w < minWidth)
+                            w = minWidth;
+                        if (maxWidth && w > maxWidth)
+                            w = maxWidth;
+                    }
+                    if (changeH) {
+                        if (minHeight && h < minHeight)
+                            h = minHeight;
+                        if (maxHeight && h > maxHeight)
+                            h = maxHeight;
+                    }
+                    if (aspectRatio) {
+                        if (changeW) {
+                            style.width = w + "px";
+                            style.height = w / aspectRatio + "px";
+                        }
+                        if (changeH && dir !== "sw") {
+                            if (dir === "nw") {
+                                y = originY - w / aspectRatio + originH;
+                            }
+                            else {
+                                style.width = h * aspectRatio + "px";
+                                style.height = h + "px";
+                            }
+                        }
+                    }
+                    else {
+                        if (changeW) {
+                            style.width = w + "px";
+                        }
+                        if (changeH) {
+                            style.height = h + "px";
+                        }
+                    }
+                    if (changeY) {
+                        transformer.moveToY(y);
+                    }
+                    if (changeX) {
+                        transformer.moveToX(x);
+                    }
+                    lastX = x;
+                    lastY = y;
+                    currentW = w;
+                    currentH = h;
+                    onResize &&
+                        onResize.call(uiik, { w, h, ow: w - originW, oh: h - originH }, ev);
+                });
+                onPointerEnd((args) => {
+                    var _a, _b;
+                    const { ev } = args;
+                    if (ghost && ghostNode) {
+                        ((_a = panel.parentNode) === null || _a === void 0 ? void 0 : _a.contains(ghostNode)) &&
+                            ((_b = panel.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(ghostNode));
+                        panelStyle.left = ghostNode.style.left;
+                        panelStyle.top = ghostNode.style.top;
+                        moveTo(panel, lastX / matrixInfo.scale, lastY / matrixInfo.scale);
+                        panelStyle.width = ghostNode.style.width;
+                        panelStyle.height = ghostNode.style.height;
+                    }
+                    panel.style.transformOrigin = originalTransformOrigin;
+                    const { x, y, sx, sy } = getCenterXy(panel);
+                    let centerX = x, centerY = y;
+                    const deg = matrixInfo.angle * ONE_ANG;
+                    const currentVertex = collection.map(originVertex, ({ x, y }) => {
+                        const nx = (x - centerX + sx) * Math.cos(deg) -
+                            (y - centerY + sy) * Math.sin(deg);
+                        const ny = (x - centerX + sx) * Math.sin(deg) +
+                            (y - centerY + sy) * Math.cos(deg);
+                        return { x: centerX + nx, y: centerY + ny };
+                    });
+                    if (changeX || changeY) {
+                        transformer.moveTo(transformer.x - (currentVertex[0].x - lastX), transformer.y - (currentVertex[0].y - lastY));
+                    }
+                    else {
+                        transformer.moveTo(transformer.x - (currentVertex[0].x - vertexBeforeTransform[0].x), transformer.y - (currentVertex[0].y - vertexBeforeTransform[0].y));
+                    }
+                    handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
+                    onEnd && onEnd.call(uiik, { w: currentW, h: currentH }, ev);
+                });
+            }, {
+                threshold: THRESHOLD$3,
+                lockPage: true,
+            });
+        }
+        initHandle(panel) {
+            const opts = this.opts;
+            let handleStr = opts.handle;
+            let handles;
+            if (is.isString(handleStr)) {
+                handles = document.querySelectorAll(handleStr);
+            }
+            else if (is.isFunction(handleStr)) {
+                handles = handleStr(panel);
+            }
+            if (!handles) {
+                console.error('Can not find handles with "' + panel.outerHTML + '"');
+                return;
+            }
+            handles = is.isArrayLike(handles) ? handles : [handles];
+            collection.each(handles, (h) => {
+                const className = h.getAttribute("class") || "";
+                const matchRs = className.match(EXP_DIR);
+                let dir = "se";
+                if (matchRs) {
+                    dir = matchRs.groups.dir;
+                }
+                h.classList.add(CLASS_RESIZABLE_HANDLE);
+                this.bindHandle(h, dir, panel, opts);
+                h.style.cursor = `${dir}-resize`;
+                h.dataset.cursor = `${dir}-resize`;
+                h.setAttribute("name", "handle");
+            });
+        }
+    }
+    function newResizable(els, opts) {
+        return new Resizable(els, opts);
+    }
+
+    var _Draggable_instances, _Draggable_handleMap, _Draggable_container, _Draggable_initStyle;
+    const DRAGGER_GROUPS = {};
+    const CLASS_DRAGGABLE = "uii-draggable";
+    const CLASS_DRAGGABLE_HANDLE = "uii-draggable-handle";
+    const CLASS_DRAGGABLE_ACTIVE = "uii-draggable-active";
+    const CLASS_DRAGGABLE_GHOST = "uii-draggable-ghost";
+    class Draggable extends Uii {
+        constructor(els, opts) {
+            super(els, object.assign({
+                containment: false,
+                watch: true,
+                threshold: 0,
+                ghost: false,
+                direction: "",
+                scroll: true,
+                snapOptions: {
+                    tolerance: 10,
+                }
+            }, opts));
+            _Draggable_instances.add(this);
+            _Draggable_handleMap.set(this, new WeakMap());
+            _Draggable_container.set(this, null);
+            if (this.opts.handle) {
+                collection.each(this.ele, (el) => {
+                    const h = el.querySelector(this.opts.handle);
+                    if (!h) {
+                        console.error('No handle found "' + this.opts.handle + '"');
+                        return false;
+                    }
+                    __classPrivateFieldGet(this, _Draggable_handleMap, "f").set(el, h);
+                });
+            }
+            this.onOptionChanged(this.opts);
+            if (this.opts.group) {
+                if (!DRAGGER_GROUPS[this.opts.group]) {
+                    DRAGGER_GROUPS[this.opts.group] = [];
+                }
+                DRAGGER_GROUPS[this.opts.group].push(...this.ele);
+            }
+            __classPrivateFieldGet(this, _Draggable_instances, "m", _Draggable_initStyle).call(this, this.ele);
+            if (this.opts.containment) {
+                if (is.isBoolean(this.opts.containment)) {
+                    __classPrivateFieldSet(this, _Draggable_container, is.isEmpty(this.ele) ? null : this.ele[0].parentElement, "f");
+                }
+                else if (is.isString(this.opts.containment)) {
+                    __classPrivateFieldSet(this, _Draggable_container, document.querySelector(this.opts.containment), "f");
+                }
+                else if (is.isElement(this.opts.containment)) {
+                    __classPrivateFieldSet(this, _Draggable_container, this.opts.containment, "f");
+                }
+            }
+            if (this.opts.watch && this.eleString) {
+                let con;
+                if (is.isString(this.opts.watch)) {
+                    con = document.querySelector(this.opts.watch);
+                }
+                else {
+                    con = is.isEmpty(this.ele) ? null : this.ele[0].parentElement;
+                }
+                this.bindEvent(con || document.body, this.opts, __classPrivateFieldGet(this, _Draggable_handleMap, "f"));
+            }
+            else {
+                collection.each(this.ele, (el) => {
+                    this.bindEvent(el, this.opts, __classPrivateFieldGet(this, _Draggable_handleMap, "f"));
+                });
+            }
+        }
+        bindEvent(bindTarget, opts, handleMap) {
+            const container = __classPrivateFieldGet(this, _Draggable_container, "f");
+            let draggableList = this.ele;
+            const eleString = this.eleString;
+            const initStyle = __classPrivateFieldGet(this, _Draggable_instances, "m", _Draggable_initStyle).bind(this);
+            this.addPointerDown(bindTarget, ({ ev, currentTarget, currentStyle, currentCStyle, pointX, pointY, onPointerStart, onPointerMove, onPointerEnd }) => {
+                var _a;
+                let t = ev.target;
+                if (!t)
+                    return;
+                if (opts.watch && eleString) {
+                    draggableList = bindTarget.querySelectorAll(eleString);
+                    initStyle(draggableList);
+                }
+                let findRs = collection.find(draggableList, el => el.contains(t));
+                if (!findRs)
+                    return;
+                const dragDom = findRs;
+                let handle = handleMap.get(dragDom);
+                if (handle && !handle.contains(t)) {
+                    return;
+                }
+                const onPointerDown = opts.onPointerDown;
+                if (onPointerDown && onPointerDown({ draggable: dragDom }, ev) === false)
+                    return;
+                const filter = opts.filter;
+                if (filter) {
+                    if (collection.some(dragDom.querySelectorAll(filter), ele => ele.contains(t)))
+                        return;
+                }
+                const offsetParent = dragDom instanceof HTMLElement ? dragDom.offsetParent || document.body : dragDom.ownerSVGElement;
+                const offsetParentRect = offsetParent.getBoundingClientRect();
+                const offsetParentCStyle = window.getComputedStyle(offsetParent);
+                const offsetXy = getPointInContainer(ev, dragDom);
+                let offsetPointX = offsetXy.x;
+                let offsetPointY = offsetXy.y;
+                const matrixInfo = getMatrixInfo(dragDom);
+                const currentXy = getPointInContainer(ev, offsetParent, offsetParentRect, offsetParentCStyle);
+                if (matrixInfo.angle != 0) {
+                    offsetPointX = currentXy.x - matrixInfo.x;
+                    offsetPointY = currentXy.y - matrixInfo.y;
+                }
+                const inContainer = !!container;
+                const ghost = opts.ghost;
+                const ghostClass = opts.ghostClass;
+                const direction = opts.direction;
+                const onStart = opts.onStart;
+                const onDrag = opts.onDrag;
+                const onEnd = opts.onEnd;
+                const onClone = opts.onClone;
+                const originalZIndex = currentCStyle.zIndex;
+                let zIndex = opts.zIndex || originalZIndex;
+                const classes = opts.classes || '';
+                const group = opts.group;
+                if (group) {
+                    let i = -1;
+                    collection.each(DRAGGER_GROUPS[group], el => {
+                        const z = parseInt(currentCStyle.zIndex) || 0;
+                        if (z > i)
+                            i = z;
+                    });
+                    zIndex = i + 1;
+                }
+                const scroll = opts.scroll;
+                const scrollSpeed = opts.scrollSpeed || 10;
+                let gridX, gridY;
+                const grid = opts.grid;
+                if (is.isArray(grid)) {
+                    gridX = grid[0];
+                    gridY = grid[1];
+                }
+                else if (is.isNumber(grid)) {
+                    gridX = gridY = grid;
+                }
+                const snapOn = opts.snap;
+                let snappable;
+                const snapTolerance = ((_a = opts.snapOptions) === null || _a === void 0 ? void 0 : _a.tolerance) || 10;
+                const onSnap = opts.onSnap;
+                let lastSnapDirY = "", lastSnapDirX = "";
+                let lastSnapping = "";
+                if (snapOn) {
+                    snappable = collection.map((container || document).querySelectorAll(snapOn), (el) => {
+                        const { x, y, w, h } = getRectInContainer(el, offsetParent);
+                        return {
+                            x1: x,
+                            y1: y,
+                            x2: x + w,
+                            y2: y + h,
+                            el: el,
+                        };
+                    });
+                }
+                const dragDomRect = dragDom.getBoundingClientRect();
+                const originW = dragDomRect.width + parseFloat(currentCStyle.borderLeftWidth) + parseFloat(currentCStyle.borderRightWidth);
+                const originH = dragDomRect.height + parseFloat(currentCStyle.borderTopWidth) + parseFloat(currentCStyle.borderBottomWidth);
+                let minX = 0;
+                let minY = 0;
+                let maxX = 0;
+                let maxY = 0;
+                let originOffX = 0;
+                let originOffY = 0;
+                if (inContainer) {
+                    maxX = container.scrollWidth - originW;
+                    maxY = container.scrollHeight - originH;
+                }
+                if (maxX < 0)
+                    maxX = 0;
+                if (maxY < 0)
+                    maxY = 0;
+                let copyNode;
+                let transformer;
+                let timer = null;
+                let toLeft = false;
+                let toTop = false;
+                let toRight = false;
+                let toBottom = false;
+                let endX = 0, endY = 0;
+                onPointerStart(function (args) {
+                    var _a;
+                    const { ev } = args;
+                    if (ghost) {
+                        if (is.isFunction(ghost)) {
+                            copyNode = ghost(dragDom);
+                        }
+                        else {
+                            copyNode = dragDom.cloneNode(true);
+                            copyNode.style.opacity = "0.3";
+                            copyNode.style.pointerEvents = "none";
+                            copyNode.style.position = "absolute";
+                        }
+                        copyNode.style.zIndex = zIndex + '';
+                        if (ghostClass) {
+                            copyNode.classList.add(...array.compact(string.split(ghostClass, ' ')));
+                        }
+                        copyNode.classList.add(...array.compact(string.split(classes, ' ')));
+                        copyNode.classList.toggle(CLASS_DRAGGABLE_GHOST, true);
+                        (_a = dragDom.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(copyNode);
+                        transformer = wrapper(copyNode);
+                        onClone && onClone({ clone: copyNode }, ev);
+                    }
+                    else {
+                        transformer = wrapper(dragDom);
+                    }
+                    dragDom.classList.add(...array.compact(string.split(classes, ' ')));
+                    if (!copyNode)
+                        dragDom.style.zIndex = zIndex + '';
+                    dragDom.classList.toggle(CLASS_DRAGGABLE_ACTIVE, true);
+                    onStart && onStart({ draggable: dragDom, x: currentXy.x, y: currentXy.y }, ev);
+                    const customEv = new Event("uii-dragactive", { "bubbles": true, "cancelable": false });
+                    dragDom.dispatchEvent(customEv);
+                });
+                onPointerMove((args) => {
+                    const { ev, pointX, pointY, offX, offY } = args;
+                    const currentXy = getPointInContainer(ev, offsetParent, offsetParentRect, offsetParentCStyle);
+                    let newX = currentXy.x;
+                    let newY = currentXy.y;
+                    if (scroll) {
+                        const lX = pointX - offsetParentRect.x;
+                        const lY = pointY - offsetParentRect.y;
+                        const rX = offsetParentRect.x + offsetParentRect.width - pointX;
+                        const rY = offsetParentRect.y + offsetParentRect.height - pointY;
+                        toLeft = lX < EDGE_THRESHOLD;
+                        toTop = lY < EDGE_THRESHOLD;
+                        toRight = rX < EDGE_THRESHOLD;
+                        toBottom = rY < EDGE_THRESHOLD;
+                        if (toLeft || toTop
+                            ||
+                                toRight || toBottom) {
+                            if (!timer) {
+                                timer = setInterval(() => {
+                                    if (toLeft) {
+                                        offsetParent.scrollLeft -= scrollSpeed;
+                                    }
+                                    else if (toRight) {
+                                        offsetParent.scrollLeft += scrollSpeed;
+                                    }
+                                    if (toTop) {
+                                        offsetParent.scrollTop -= scrollSpeed;
+                                    }
+                                    else if (toBottom) {
+                                        offsetParent.scrollTop += scrollSpeed;
+                                    }
+                                }, 20);
+                            }
+                        }
+                        else {
+                            if (timer) {
+                                clearInterval(timer);
+                                timer = null;
+                            }
+                        }
+                    }
+                    let x = newX - offsetPointX + 0;
+                    let y = newY - offsetPointY + 0;
+                    if (is.isNumber(gridX) && is.isNumber(gridY)) {
+                        x = ((x / gridX) >> 0) * gridX;
+                        y = ((y / gridY) >> 0) * gridY;
+                    }
+                    if (inContainer) {
+                        if (originOffX + x < minX) {
+                            x = -0;
+                        }
+                        if (originOffY + y < minY) {
+                            y = -0;
+                        }
+                        if (originOffX + x > maxX) {
+                            x = maxX - originOffX;
+                        }
+                        if (originOffY + y > maxY) {
+                            y = maxY - originOffY;
+                        }
+                    }
+                    let canDrag = true;
+                    let emitSnap = false;
+                    if (snapOn) {
+                        const currPageX1 = x;
+                        const currPageY1 = y;
+                        const currPageX2 = currPageX1 + originW;
+                        const currPageY2 = currPageY1 + originH;
+                        let snapX = NaN, snapY = NaN;
+                        let targetX, targetY;
+                        let snapDirX, snapDirY;
+                        if (!direction || direction === "v") {
+                            collection.each(snappable, (data) => {
+                                if (Math.abs(data.y1 - currPageY1) <= snapTolerance) {
+                                    snapY = data.y1;
+                                    snapDirY = "t2t";
+                                }
+                                else if (Math.abs(data.y2 - currPageY1) <= snapTolerance) {
+                                    snapY = data.y2;
+                                    snapDirY = "t2b";
+                                }
+                                else if (Math.abs(data.y1 - currPageY2) <= snapTolerance) {
+                                    snapY = data.y1 - originH;
+                                    snapDirY = "b2t";
+                                }
+                                else if (Math.abs(data.y2 - currPageY2) <= snapTolerance) {
+                                    snapY = data.y2 - originH;
+                                    snapDirY = "b2b";
+                                }
+                                if (snapY) {
+                                    lastSnapDirY = snapDirY;
+                                    targetY = data.el;
+                                    return false;
+                                }
+                            });
+                        }
+                        if (!direction || direction === "h") {
+                            collection.each(snappable, (data) => {
+                                if (Math.abs(data.x1 - currPageX1) <= snapTolerance) {
+                                    snapX = data.x1;
+                                    snapDirX = "l2l";
+                                }
+                                else if (Math.abs(data.x2 - currPageX1) <= snapTolerance) {
+                                    snapX = data.x2;
+                                    snapDirX = "l2r";
+                                }
+                                else if (Math.abs(data.x1 - currPageX2) <= snapTolerance) {
+                                    snapX = data.x1 - originW;
+                                    snapDirX = "r2l";
+                                }
+                                else if (Math.abs(data.x2 - currPageX2) <= snapTolerance) {
+                                    snapX = data.x2 - originW;
+                                    snapDirX = "r2r";
+                                }
+                                if (snapX) {
+                                    lastSnapDirX = snapDirX;
+                                    targetX = data.el;
+                                    return false;
+                                }
+                            });
+                        }
+                        if (snapX || snapY) {
+                            if (snapX) {
+                                x = snapX;
+                            }
+                            if (snapY) {
+                                y = snapY;
+                            }
+                            if (onSnap && lastSnapping !== lastSnapDirX + "" + lastSnapDirY) {
+                                setTimeout(() => {
+                                    onSnap({
+                                        el: copyNode || dragDom,
+                                        targetH: targetX,
+                                        targetV: targetY,
+                                        dirH: snapDirX,
+                                        dirV: snapDirY,
+                                    }, ev);
+                                }, 0);
+                                lastSnapping = lastSnapDirX + "" + lastSnapDirY;
+                            }
+                            emitSnap = true;
+                        }
+                        else {
+                            lastSnapDirX = lastSnapDirY = lastSnapping = "";
+                        }
+                    }
+                    if (onDrag && !emitSnap) {
+                        if (onDrag({
+                            draggable: dragDom,
+                            ox: offX,
+                            oy: offY,
+                            x: x,
+                            y: y
+                        }, ev) === false) {
+                            canDrag = false;
+                            endX = x;
+                            endY = y;
+                        }
+                    }
+                    if (canDrag) {
+                        if (direction === "v") {
+                            transformer.moveToY(y);
+                        }
+                        else if (direction === "h") {
+                            transformer.moveToX(x);
+                        }
+                        else {
+                            transformer.moveTo(x, y);
+                        }
+                        endX = x;
+                        endY = y;
+                    }
+                });
+                onPointerEnd((args) => {
+                    var _a, _b;
+                    const { ev, currentStyle } = args;
+                    if (scroll) {
+                        if (timer) {
+                            clearInterval(timer);
+                            timer = null;
+                        }
+                    }
+                    dragDom.classList.remove(...array.compact(string.split(classes, ' ')));
+                    currentStyle.zIndex = originalZIndex;
+                    dragDom.classList.remove(CLASS_DRAGGABLE_ACTIVE);
+                    let moveToGhost = true;
+                    if (onEnd) {
+                        moveToGhost = onEnd({ draggable: dragDom, x: endX, y: endY }, ev) === false ? false : true;
+                    }
+                    const customEv = new Event("uii-dragdeactive", { "bubbles": true, "cancelable": false });
+                    dragDom.dispatchEvent(customEv);
+                    if (ghost) {
+                        ((_a = dragDom.parentNode) === null || _a === void 0 ? void 0 : _a.contains(copyNode)) && ((_b = dragDom.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(copyNode));
+                        if (moveToGhost !== false) {
+                            wrapper(dragDom).moveTo(transformer.x, transformer.y);
+                        }
+                    }
+                });
+            }, {
+                threshold: this.opts.threshold || 0,
+                lockPage: true
+            });
+        }
+        onOptionChanged(opts) {
+            const droppable = opts.droppable;
+            if (!is.isFunction(droppable)) {
+                if (is.isUndefined(droppable)) {
+                    opts.droppable = () => { };
+                }
+                else if (is.isString(droppable)) {
+                    opts.droppable = () => document.querySelectorAll(droppable);
+                }
+                else if (is.isArrayLike(droppable)) {
+                    opts.droppable = () => droppable;
+                }
+                else if (is.isElement(droppable)) {
+                    opts.droppable = () => [droppable];
+                }
+            }
+        }
+    }
+    _Draggable_handleMap = new WeakMap(), _Draggable_container = new WeakMap(), _Draggable_instances = new WeakSet(), _Draggable_initStyle = function _Draggable_initStyle(draggableList) {
+        collection.each(draggableList, (el) => {
+            if (is.isDefined(this.opts.type))
+                el.dataset.dropType = this.opts.type;
+            el.classList.toggle(CLASS_DRAGGABLE, true);
+            const ee = __classPrivateFieldGet(this, _Draggable_handleMap, "f").get(el) || el;
+            ee.classList.toggle(CLASS_DRAGGABLE_HANDLE, true);
+            if (is.isDefined(this.opts.cursor)) {
+                el.style.cursor = this.opts.cursor.default || 'move';
+                if (is.isDefined(this.opts.cursor.over)) {
+                    el.dataset.cursorOver = this.opts.cursor.over;
+                    el.dataset.cursorActive = this.opts.cursor.active || 'move';
+                }
+            }
+        });
+    };
+    function newDraggable(els, opts) {
+        return new Draggable(els, opts);
+    }
+
+    var _Droppable_active;
+    const Droppables = [];
+    const CLASS_DROPPABLE = "uii-droppable";
+    class Droppable extends Uii {
+        constructor(el, opts) {
+            super(el, object.assign({}, opts));
+            _Droppable_active.set(this, void 0);
+            Droppables.push(this);
+        }
+        bindEvent(droppable, opts) {
+            this.registerEvent(droppable, "mouseenter", (e) => {
+                if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
+                    return;
+                if (opts.hoverClass) {
+                    collection.each(string.split(opts.hoverClass, ' '), cls => {
+                        droppable.classList.toggle(cls, true);
+                    });
+                }
+                if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
+                    setCursor(__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver);
+                }
+                opts.onEnter && opts.onEnter({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
+            });
+            this.registerEvent(droppable, "mouseleave", (e) => {
+                if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
+                    return;
+                if (opts.hoverClass) {
+                    collection.each(string.split(opts.hoverClass, ' '), cls => {
+                        droppable.classList.toggle(cls, false);
+                    });
+                }
+                if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
+                    setCursor(__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorActive || '');
+                }
+                opts.onLeave && opts.onLeave({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
+            });
+            this.registerEvent(droppable, "mousemove", (e) => {
+                if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
+                    return;
+                opts.onOver && opts.onOver({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
+            });
+            this.registerEvent(droppable, "mouseup", (e) => {
+                if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
+                    return;
+                if (opts.hoverClass) {
+                    collection.each(string.split(opts.hoverClass, ' '), cls => {
+                        droppable.classList.toggle(cls, false);
+                    });
+                }
+                opts.onDrop && opts.onDrop({ draggable: __classPrivateFieldGet(this, _Droppable_active, "f"), droppable }, e);
+            });
+        }
+        active(target) {
+            let valid = true;
+            const opts = this.opts;
+            if (is.isString(opts.accepts)) {
+                valid = !!target.dataset.dropType && string.test(opts.accepts, target.dataset.dropType);
+            }
+            else if (is.isFunction(opts.accepts)) {
+                valid = opts.accepts(this.ele, target);
+            }
+            if (!valid)
+                return;
+            __classPrivateFieldSet(this, _Droppable_active, target, "f");
+            if (opts.activeClass) {
+                collection.each(this.ele, el => {
+                    collection.each(string.split(opts.activeClass || '', ' '), cls => {
+                        el.classList.toggle(cls, true);
+                    });
+                });
+            }
+            opts.onActive && opts.onActive({ draggable: target, droppables: this.ele });
+            collection.each(this.ele, (el) => {
+                el.classList.toggle(CLASS_DROPPABLE, true);
+                el.style.pointerEvents = 'initial';
+                this.bindEvent(el, opts);
+            });
+        }
+        deactive(target) {
+            if (!__classPrivateFieldGet(this, _Droppable_active, "f"))
+                return;
+            __classPrivateFieldSet(this, _Droppable_active, null, "f");
+            const opts = this.opts;
+            if (opts.activeClass) {
+                collection.each(this.ele, el => {
+                    collection.each(string.split(opts.activeClass || '', ' '), cls => {
+                        el.classList.toggle(cls, false);
+                    });
+                });
+            }
+            opts.onDeactive && opts.onDeactive({ draggable: target, droppables: this.ele });
+            this.destroy();
+        }
+    }
+    _Droppable_active = new WeakMap();
+    document.addEventListener("uii-dragactive", (e) => {
+        collection.each(Droppables, dpb => {
+            dpb.active(e.target);
+        });
+    });
+    document.addEventListener("uii-dragdeactive", (e) => {
+        collection.each(Droppables, dpb => {
+            dpb.deactive(e.target);
+        });
+    });
+    function newDroppable(els, opts) {
+        return new Droppable(els, opts);
+    }
+
+    const THRESHOLD$2 = 2;
+    const CLASS_ROTATABLE = "uii-rotatable";
+    const CLASS_ROTATABLE_HANDLE = "uii-rotatable-handle";
+    const CLASS_ROTATABLE_ACTIVE = "uii-rotatable-active";
+    class Rotatable extends Uii {
+        constructor(els, opts) {
+            super(els, opts);
+            collection.each(this.ele, (el) => {
+                initHandle(this, el, this.opts);
+            });
+        }
+    }
+    function initHandle(uiik, el, opts) {
+        let handleStr = opts.handle;
+        let handles;
+        if (is.isString(handleStr)) {
+            handles = document.querySelectorAll(handleStr);
+        }
+        else if (is.isFunction(handleStr)) {
+            handles = handleStr(el);
+        }
+        if (!handles) {
+            console.error('Can not find handles with "' + el.outerHTML + '"');
+            return;
+        }
+        collection.each(handles, (h) => {
+            var _a;
+            h.classList.add(CLASS_ROTATABLE_HANDLE);
+            h.style.cursor = ((_a = opts.cursor) === null || _a === void 0 ? void 0 : _a.default) || "crosshair";
+            bindHandle(uiik, h, el, opts);
+        });
+        el.classList.toggle(CLASS_ROTATABLE, true);
+    }
+    function bindHandle(uiik, handle, el, opts) {
+        const onStart = opts.onStart;
+        const onRotate = opts.onRotate;
+        const onEnd = opts.onEnd;
+        let deg = 0;
+        uiik.addPointerDown(handle, ({ onPointerStart, onPointerMove, onPointerEnd }) => {
+            const { x, y, ox, oy } = getCenterXy(el);
+            let centerX = x, centerY = y;
+            let startDeg = 0;
+            onPointerStart(function (args) {
+                const { ev } = args;
+                const currentXy = getPointInContainer(ev, el.parentElement);
+                startDeg =
+                    Math.atan2(currentXy.y - centerY, currentXy.x - centerX) * ONE_RAD + 90;
+                if (startDeg < 0)
+                    startDeg = 360 + startDeg;
+                let matrixInfo = getMatrixInfo(el);
+                startDeg -= matrixInfo.angle;
+                el.classList.toggle(CLASS_ROTATABLE_ACTIVE, true);
+                onStart && onStart({ deg, cx: centerX, cy: centerY }, ev);
+            });
+            onPointerMove((args) => {
+                const { ev } = args;
+                const currentXy = getPointInContainer(ev, el.parentElement);
+                deg =
+                    Math.atan2(currentXy.y - centerY, currentXy.x - centerX) * ONE_RAD +
+                        90 - startDeg;
+                onRotate && onRotate({ deg, cx: centerX, cy: centerY }, ev);
+                rotateTo(el, deg, ox, oy);
+            });
+            onPointerEnd((args) => {
+                const { ev } = args;
+                el.classList.toggle(CLASS_ROTATABLE_ACTIVE, false);
+                onEnd && onEnd({ deg }, ev);
+            });
+        }, {
+            threshold: THRESHOLD$2,
+            lockPage: true,
+        });
+    }
+    function newRotatable(els, opts) {
+        return new Rotatable(els, opts);
+    }
+
+    var _CollisionDetector__targets;
+    class CollisionDetector {
+        constructor(el, targets, opts) {
+            _CollisionDetector__targets.set(this, void 0);
+            __classPrivateFieldSet(this, _CollisionDetector__targets, targets, "f");
+            this.opts = {
+                container: document.body
+            };
+            this.opts = object.assign(this.opts, opts);
+            const domEl = is.isString(el) ? document.querySelector(el) : el;
+            if (!domEl) {
+                console.error('Invalid selector "' + el + '"');
+                return;
+            }
+            const ele = domEl;
+            this.el = domEl;
+            const offset = getBox(ele, this.opts.container);
+            const rect = { x: offset.x, y: offset.y, width: ele.offsetWidth, height: ele.offsetHeight };
+            this.elData = {
+                x1: rect.x,
+                y1: rect.y,
+                x2: rect.x + rect.width,
+                y2: rect.y + rect.height,
+            };
+            this.update();
+        }
+        update() {
+            let targets;
+            if (is.isFunction(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
+                targets = __classPrivateFieldGet(this, _CollisionDetector__targets, "f").call(this);
+            }
+            else if (is.isString(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
+                targets = this.opts.container.querySelectorAll(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"));
+                targets = collection.reject(targets, t => t === this.el);
+            }
+            else if (is.isElement(__classPrivateFieldGet(this, _CollisionDetector__targets, "f"))) {
+                targets = [__classPrivateFieldGet(this, _CollisionDetector__targets, "f")];
+            }
+            else {
+                targets = __classPrivateFieldGet(this, _CollisionDetector__targets, "f");
+            }
+            this.targetsData = collection.flatMap(targets, t => {
+                if (!t)
+                    return [];
+                const rect = getRectInContainer(t, this.opts.container);
+                return {
+                    x1: rect.x,
+                    y1: rect.y,
+                    x2: rect.x + rect.w,
+                    y2: rect.y + rect.h,
+                    el: t
+                };
+            });
+        }
+        getOverlaps(x1, y1, x2, y2) {
+            let elData = this.elData;
+            if (x1 && x2 && y1 && y2) {
+                elData = {
+                    x1,
+                    y1,
+                    x2,
+                    y2,
+                };
+            }
+            let overlaps = collection.flatMap(this.targetsData, (td, i) => {
+                if (elData.x2 < td.x1 || elData.x1 > td.x2 || elData.y2 < td.y1 || elData.y1 > td.y2)
+                    return [];
+                return td.el;
+            });
+            return overlaps;
+        }
+        getInclusions(x1, y1, x2, y2) {
+            let elData = this.elData;
+            if (x1 && x2 && y1 && y2) {
+                elData = {
+                    x1,
+                    y1,
+                    x2,
+                    y2,
+                };
+            }
+            let contains = collection.flatMap(this.targetsData, (td, i) => {
+                if (elData.x2 >= td.x2 && elData.x1 <= td.x1 && elData.y2 >= td.y2 && elData.y1 <= td.y1)
+                    return td.el;
+                return [];
+            });
+            return contains;
+        }
+    }
+    _CollisionDetector__targets = new WeakMap();
+    function newCollisionDetector(el, targets, opts) {
+        return new CollisionDetector(el, targets, opts);
+    }
+
+    var _Selectable_instances, _Selectable__detector, _Selectable__lastSelected, _Selectable_bindEvent;
+    const CLASS_SELECTOR = "uii-selector";
+    const CLASS_SELECTING = "uii-selecting";
+    const CLASS_SELECTED = "uii-selected";
+    const THRESHOLD$1 = 2;
+    class Selectable extends Uii {
+        constructor(container, opts) {
+            super(container, object.assign({
+                targets: [],
+                scroll: true,
+            }, opts));
+            _Selectable_instances.add(this);
+            _Selectable__detector.set(this, void 0);
+            _Selectable__lastSelected.set(this, void 0);
+            const domEl = this.ele[0];
+            let selector = document.createElement("div");
+            if (domEl instanceof SVGElement) {
+                selector = document.createElementNS('http://www.w3.org/2000/svg', "rect");
+            }
+            selector.setAttribute('class', CLASS_SELECTOR);
+            selector.style.cssText = `
+      position:absolute;
+      left:0;top:0;
+    `;
+            if (this.opts.class) {
+                selector.setAttribute('class', selector.getAttribute('class') + " " + this.opts.class);
+            }
+            else {
+                selector.style.cssText += "border:1px dashed #000;stroke:#000;";
+            }
+            selector.style.display = 'none';
+            domEl.appendChild(selector);
+            __classPrivateFieldSet(this, _Selectable__detector, newCollisionDetector(selector, this.opts.targets, {
+                container: domEl,
+            }), "f");
+            __classPrivateFieldGet(this, _Selectable_instances, "m", _Selectable_bindEvent).call(this, selector, domEl);
+        }
+        updateTargets() {
+            __classPrivateFieldGet(this, _Selectable__detector, "f").update();
+        }
+        onOptionChanged() {
+            this.updateTargets();
+        }
+    }
+    _Selectable__detector = new WeakMap(), _Selectable__lastSelected = new WeakMap(), _Selectable_instances = new WeakSet(), _Selectable_bindEvent = function _Selectable_bindEvent(selector, con) {
+        const that = this;
+        const opts = this.opts;
+        this.addPointerDown(con, ({ ev, target, currentRect, currentCStyle, currentTarget, onPointerStart, onPointerMove, onPointerEnd }) => {
+            const onStart = opts.onStart;
+            const onSelect = opts.onSelect;
+            const onEnd = opts.onEnd;
+            const mode = opts.mode || "overlap";
+            const scroll = opts.scroll;
+            const scrollSpeed = opts.scrollSpeed || 10;
+            const filter = opts.filter;
+            const selectingClassAry = array.compact(string.split(opts.selectingClass, " "));
+            const selectedClassAry = array.compact(string.split(opts.selectedClass, " "));
+            if (filter) {
+                if (is.isFunction(filter)) {
+                    if (filter(target))
+                        return;
+                }
+                else if (collection.some(con.querySelectorAll(filter), (el) => el.contains(target)))
+                    return;
+            }
+            const onPointerDown = opts.onPointerDown;
+            if (onPointerDown && onPointerDown(ev) === false)
+                return;
+            let originPos = "";
+            let matrixInfo = getMatrixInfo(currentCStyle);
+            const startxy = getPointInContainer(ev, con, currentRect, currentCStyle, matrixInfo);
+            let hitPosX = startxy.x;
+            let hitPosY = startxy.y;
+            const style = selector.style;
+            let selection = [];
+            let lastSelection = [];
+            let x1 = hitPosX, y1 = hitPosY;
+            let timer = null;
+            let toLeft = false;
+            let toTop = false;
+            let toRight = false;
+            let toBottom = false;
+            onPointerStart(function (args) {
+                const { ev } = args;
+                __classPrivateFieldGet(that, _Selectable__detector, "f").update();
+                const pos = currentCStyle.position;
+                if (pos === "static") {
+                    originPos = con.style.position;
+                    con.style.position = "relative";
+                }
+                collection.each(__classPrivateFieldGet(that, _Selectable__lastSelected, "f"), t => {
+                    target.classList.toggle(CLASS_SELECTED, false);
+                });
+                style.display = 'block';
+                onStart && onStart({ selection: __classPrivateFieldGet(that, _Selectable__lastSelected, "f"), selectable: con }, ev);
+            });
+            onPointerMove((args) => {
+                const { ev } = args;
+                const currentXy = getPointInContainer(ev, currentTarget, currentRect, currentCStyle, matrixInfo);
+                let pointX = currentXy.x;
+                let pointY = currentXy.y;
+                let offX = pointX - hitPosX;
+                let offY = pointY - hitPosY;
+                if (scroll) {
+                    const ltX = ev.clientX - currentRect.x;
+                    const ltY = ev.clientY - currentRect.y;
+                    const rbX = currentRect.x + currentRect.width - ev.clientX;
+                    const rbY = currentRect.y + currentRect.height - ev.clientY;
+                    toLeft = ltX < EDGE_THRESHOLD;
+                    toTop = ltY < EDGE_THRESHOLD;
+                    toRight = rbX < EDGE_THRESHOLD;
+                    toBottom = rbY < EDGE_THRESHOLD;
+                    if (toLeft || toTop || toRight || toBottom) {
+                        if (!timer) {
+                            timer = setInterval(() => {
+                                if (toLeft) {
+                                    con.scrollLeft -= scrollSpeed;
+                                }
+                                else if (toRight) {
+                                    con.scrollLeft += scrollSpeed;
+                                }
+                                if (toTop) {
+                                    con.scrollTop -= scrollSpeed;
+                                }
+                                else if (toBottom) {
+                                    con.scrollTop += scrollSpeed;
+                                }
+                            }, 20);
+                        }
+                    }
+                    else {
+                        if (timer) {
+                            clearInterval(timer);
+                            timer = null;
+                        }
+                    }
+                }
+                let x = hitPosX, y = hitPosY, w = Math.abs(offX), h = Math.abs(offY);
+                if (offX > 0 && offY > 0) {
+                    x1 = hitPosX;
+                    y1 = hitPosY;
+                }
+                else if (offX < 0 && offY < 0) {
+                    x = x1 = pointX;
+                    y = y1 = pointY;
+                }
+                else if (offX < 0) {
+                    x = x1 = pointX;
+                }
+                else if (offY < 0) {
+                    y = y1 = pointY;
+                }
+                style.width = w + "px";
+                style.height = h + "px";
+                style.transform = `translate3d(${x}px,${y}px,0)`;
+                if (mode === "overlap") {
+                    selection = __classPrivateFieldGet(that, _Selectable__detector, "f").getOverlaps(x1, y1, x1 + w, y1 + h);
+                }
+                else if (mode === "inclusion") {
+                    selection = __classPrivateFieldGet(that, _Selectable__detector, "f").getInclusions(x1, y1, x1 + w, y1 + h);
+                }
+                collection.each(lastSelection, (t) => {
+                    if (!collection.includes(selection, t)) {
+                        t.classList.toggle(CLASS_SELECTING, false);
+                        collection.each(selectingClassAry, (cls) => {
+                            t.classList.toggle(cls, false);
+                        });
+                    }
+                });
+                collection.each(selection, (t) => {
+                    t.classList.toggle(CLASS_SELECTING, true);
+                    collection.each(selectingClassAry, (cls) => {
+                        t.classList.toggle(cls, true);
+                    });
+                });
+                const changed = lastSelection.length != selection.length;
+                lastSelection = selection;
+                if (changed && onSelect)
+                    onSelect({ selection, selectable: con }, ev);
+            });
+            onPointerEnd((args) => {
+                const { ev, currentStyle } = args;
+                style.display = 'none';
+                if (scroll) {
+                    if (timer) {
+                        clearInterval(timer);
+                        timer = null;
+                    }
+                }
+                if (originPos) {
+                    con.style.position = originPos;
+                }
+                collection.each(selection, (t) => {
+                    collection.each(selectingClassAry, (cls) => {
+                        t.classList.toggle(cls, false);
+                    });
+                    collection.each(selectedClassAry, (cls) => {
+                        t.classList.toggle(cls, true);
+                    });
+                    t.classList.toggle(CLASS_SELECTING, false);
+                    t.classList.toggle(CLASS_SELECTED, true);
+                });
+                __classPrivateFieldSet(that, _Selectable__lastSelected, selection, "f");
+                if (onEnd)
+                    onEnd({ selection, selectable: con }, ev);
+            });
+        }, {
+            threshold: THRESHOLD$1,
+            lockPage: true
+        });
+    };
+    function newSelectable(container, opts) {
+        return new Selectable(container, opts);
+    }
+
+    var _Sortable_removeListenItems;
+    const SORTABLE_GROUPS = {};
+    const CLASS_SORTABLE_CONTAINER = "uii-sortable-container";
+    const CLASS_SORTABLE_GHOST = "uii-sortable-ghost";
+    const CLASS_SORTABLE_ACTIVE = "uii-sortable-active";
+    const ATTR_SORTABLE_ACTIVE = "uii-sortable-active";
+    const THRESHOLD = 2;
+    class Sortable extends Uii {
+        constructor(container, opts) {
+            super(container, object.merge({
+                move: {
+                    from: true,
+                    to: true,
+                },
+                scroll: true,
+                sort: true
+            }, opts));
+            _Sortable_removeListenItems.set(this, void 0);
+            if (collection.size(this.ele) > 1 && !this.opts.group) {
+                this.opts.group = "uii_sortable_" + utils.alphaId();
+            }
+            collection.each(this.ele, (el) => {
+                el.classList.add(CLASS_SORTABLE_CONTAINER);
+                el.style.position = "relative";
+                el.style.pointerEvents = "initial";
+                bindContainer(this.registerEvent.bind(this), el, this.opts);
+            });
+            if (this.opts.group) {
+                if (!SORTABLE_GROUPS[this.opts.group]) {
+                    SORTABLE_GROUPS[this.opts.group] = [];
+                }
+                SORTABLE_GROUPS[this.opts.group].push([this, this.ele]);
+            }
+        }
+        active(draggingItem, fromContainer, toContainers, toOpts) {
+            var _a;
+            const moveFrom = (_a = toOpts.move) === null || _a === void 0 ? void 0 : _a.from;
+            const acceptFn = is.isFunction(moveFrom) ? moveFrom : () => !!moveFrom;
+            const activableContainers = collection.flatMap(toContainers, (el) => {
+                const valid = acceptFn(draggingItem, fromContainer, el);
+                return valid ? el : [];
+            });
+            collection.each(activableContainers, (el) => {
+                el.setAttribute(ATTR_SORTABLE_ACTIVE, "1");
+                if (toOpts.activeClass) {
+                    collection.each(string.split(toOpts.activeClass || "", " "), (cls) => {
+                        el.classList.toggle(cls, true);
+                    });
+                }
+            });
+            __classPrivateFieldSet(this, _Sortable_removeListenItems, collection.map(activableContainers, (con) => {
+                const filteredItems = con.querySelectorAll(":scope > *");
+                return listenItems(toOpts, con, draggingItem, filteredItems);
+            }), "f");
+            toOpts.onActive &&
+                toOpts.onActive({ item: draggingItem, from: fromContainer });
+        }
+        deactive(draggingItem, fromContainer, toContainers, opts) {
+            collection.each(toContainers, (el) => {
+                el.removeAttribute(ATTR_SORTABLE_ACTIVE);
+                if (opts.activeClass) {
+                    collection.each(string.split(opts.activeClass || "", " "), (cls) => {
+                        el.classList.toggle(cls, false);
+                    });
+                }
+            });
+            collection.each(__classPrivateFieldGet(this, _Sortable_removeListenItems, "f"), (fn) => {
+                fn();
+            });
+            opts.onDeactive &&
+                opts.onDeactive({ item: draggingItem, from: fromContainer });
+        }
+        onOptionChanged() { }
+    }
+    _Sortable_removeListenItems = new WeakMap();
+    let DraggingData = null;
+    function bindContainer(registerEvent, container, opts) {
+        registerEvent(container, "mousedown", (e) => {
+            var _a;
+            let con = e.currentTarget;
+            let t = e.target;
+            if (t === con)
+                return;
+            const filterStr = opts.filter ? `:not(${opts.filter})` : "";
+            const filteredItems = con.querySelectorAll(":scope > *" + filterStr);
+            const handles = opts.handle
+                ? collection.map(filteredItems, (el) => el.querySelector(opts.handle || ""))
+                : collection.toArray(filteredItems);
+            const i = array.findIndex(handles, (handle) => handle.contains(t));
+            if (i < 0)
+                return;
+            const draggingItem = filteredItems[i];
+            const ghostContainer = opts.ghostContainer || con;
+            const onStart = opts.onStart;
+            const onEnd = opts.onEnd;
+            const ghostClass = opts.ghostClass;
+            const group = opts.group;
+            let moveTo = (_a = opts.move) === null || _a === void 0 ? void 0 : _a.to;
+            const toCopy = moveTo === "copy";
+            const toOutFn = is.isFunction(moveTo) ? moveTo : () => !!moveTo;
+            const moveMode = toOutFn(draggingItem, con);
+            const sort = opts.sort;
+            opts.scroll;
+            opts.scrollSpeed || 10;
+            let hitPosX = e.offsetX + con.scrollLeft, hitPosY = e.offsetY + con.scrollTop;
+            saveCursor();
+            let dragging = false;
+            let ghostNode = null;
+            let removeListenItems = null;
+            const dragListener = (ev) => {
+                const newX = ev.clientX;
+                const newY = ev.clientY;
+                let offsetx = newX - hitPosX;
+                let offsety = newY - hitPosY;
+                if (!dragging) {
+                    if (Math.abs(offsetx) > THRESHOLD || Math.abs(offsety) > THRESHOLD) {
+                        dragging = true;
+                        ghostNode = draggingItem.cloneNode(true);
+                        ghostNode.style.opacity = "0.3";
+                        ghostNode.style.pointerEvents = "none";
+                        ghostNode.style.position = "fixed";
+                        ghostNode.style.zIndex = "999";
+                        ghostNode.style.left = draggingItem.style.left;
+                        ghostNode.style.top = draggingItem.style.top;
+                        if (ghostClass) {
+                            ghostNode.classList.add(...array.compact(string.split(ghostClass, " ")));
+                        }
+                        ghostNode.classList.toggle(CLASS_SORTABLE_GHOST, true);
+                        ghostContainer.appendChild(ghostNode);
+                        if (!toCopy)
+                            draggingItem.classList.toggle(CLASS_SORTABLE_ACTIVE, true);
+                        let copy = undefined;
+                        if (toCopy) {
+                            copy = draggingItem.cloneNode(true);
+                            copy.classList.toggle(CLASS_SORTABLE_ACTIVE, true);
+                        }
+                        DraggingData = {
+                            item: draggingItem,
+                            fromIndex: i,
+                            fromContainer: con,
+                            toContainer: con,
+                            moveTo: toCopy ? "copy" : moveMode,
+                            spill: opts.spill,
+                            copy
+                        };
+                        onStart && onStart({ item: draggingItem, from: con, index: i }, ev);
+                        lockPage();
+                        if (sort) {
+                            removeListenItems = listenItems(opts, con, toCopy ? draggingItem : copy, filteredItems, i);
+                        }
+                        if (moveMode && group && SORTABLE_GROUPS[group]) {
+                            collection.each(SORTABLE_GROUPS[group], ([sortable, ele]) => {
+                                const filtered = collection.reject(ele, (el) => el === container);
+                                if (is.isEmpty(filtered))
+                                    return;
+                                sortable.active(toCopy ? draggingItem : copy, container, filtered, sortable.getOptions());
+                            });
+                        }
+                    }
+                    else {
+                        ev.preventDefault();
+                        return false;
+                    }
+                }
+                ghostNode.style.left = newX + "px";
+                ghostNode.style.top = newY + "px";
+                ev.preventDefault();
+                return false;
+            };
+            const dragEndListener = (ev) => {
+                var _a;
+                document.removeEventListener("mousemove", dragListener);
+                document.removeEventListener("mouseup", dragEndListener);
+                window.removeEventListener("blur", dragEndListener);
+                if (dragging) {
+                    unlockPage();
+                    restoreCursor();
+                    if (ghostNode)
+                        ghostContainer.removeChild(ghostNode);
+                    const toContainer = DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.toContainer;
+                    DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.item.classList.remove(CLASS_SORTABLE_ACTIVE);
+                    (_a = DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.copy) === null || _a === void 0 ? void 0 : _a.classList.remove(CLASS_SORTABLE_ACTIVE);
+                    DraggingData = null;
+                    if (removeListenItems)
+                        removeListenItems();
+                    if (group && SORTABLE_GROUPS[group]) {
+                        collection.each(SORTABLE_GROUPS[group], ([sortable, ele]) => {
+                            const filtered = collection.reject(ele, (el) => el === container);
+                            if (is.isEmpty(filtered))
+                                return;
+                            sortable.deactive(draggingItem, container, filtered, sortable.getOptions());
+                        });
+                    }
+                    onEnd && onEnd({ item: draggingItem, from: container, to: toContainer }, e);
+                }
+            };
+            document.addEventListener("mousemove", dragListener);
+            document.addEventListener("mouseup", dragEndListener);
+            window.addEventListener("blur", dragEndListener);
+            e.preventDefault();
+            return false;
+        });
+        registerEvent(container, "mouseleave", (e) => {
+            var _a, _b;
+            if (!DraggingData)
+                return;
+            opts.onLeave &&
+                opts.onLeave({
+                    item: DraggingData.item,
+                    from: DraggingData.fromContainer,
+                    to: container,
+                }, e);
+            if (DraggingData.moveTo !== 'copy') {
+                if (DraggingData.spill === 'remove') {
+                    (_a = DraggingData.item.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(DraggingData.item);
+                }
+                else if (DraggingData.spill === 'revert') {
+                    (_b = DraggingData.item.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(DraggingData.item);
+                    const nextSibling = DraggingData.fromContainer.children[DraggingData.fromIndex];
+                    DraggingData.fromContainer.insertBefore(DraggingData.item, nextSibling);
+                }
+            }
+        });
+        registerEvent(container, "mouseenter", (e) => {
+            var _a;
+            if (!DraggingData)
+                return;
+            let draggingItem = DraggingData.item;
+            draggingItem.parentElement;
+            const cx = e.clientX;
+            const cy = e.clientY;
+            const rect = container.getBoundingClientRect();
+            const centerX = rect.width / 2;
+            const centerY = rect.height / 2;
+            const offsetX = cx - rect.x;
+            const offsetY = cy - rect.y;
+            let dir = "";
+            if (offsetX < centerX && offsetY < centerY) {
+                dir = "tl";
+            }
+            else if (offsetX > centerX && offsetY > centerY) {
+                dir = "br";
+            }
+            else if (offsetX < centerX && offsetY > centerY) {
+                dir = "bl";
+            }
+            else if (offsetX > centerX && offsetY < centerY) {
+                dir = "tr";
+            }
+            opts.onEnter &&
+                opts.onEnter({
+                    item: DraggingData.item,
+                    from: DraggingData.fromContainer,
+                    to: container,
+                    dir,
+                }, e);
+            DraggingData.toContainer = container;
+            if (container.getAttribute(ATTR_SORTABLE_ACTIVE)) {
+                let valid = true;
+                const moveFrom = (_a = opts.move) === null || _a === void 0 ? void 0 : _a.from;
+                const acceptFn = is.isFunction(moveFrom) ? moveFrom : () => !!moveFrom;
+                valid = acceptFn(DraggingData.item, DraggingData.fromContainer, container);
+                if (!valid)
+                    return;
+                if (container.contains(draggingItem)) {
+                    return;
+                }
+                const moveTo = DraggingData.moveTo;
+                if (moveTo === "copy") {
+                    draggingItem = DraggingData.copy;
+                }
+                if (draggingItem.parentElement)
+                    draggingItem.parentElement.removeChild(draggingItem);
+                let toIndex = 0;
+                if (dir[0] === "t") {
+                    container.insertBefore(draggingItem, container.children[0]);
+                }
+                else {
+                    container.appendChild(draggingItem);
+                    toIndex = container.children.length - 1;
+                }
+                opts.onAdd &&
+                    opts.onAdd({
+                        item: draggingItem,
+                        from: DraggingData.fromContainer,
+                        to: container,
+                        index: toIndex,
+                    }, e);
+            }
+            else if (container === DraggingData.fromContainer) {
+                if (DraggingData.copy) {
+                    let parent = DraggingData.copy.parentElement;
+                    if (parent)
+                        parent.removeChild(DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.copy);
+                }
+                else {
+                    if (draggingItem.parentElement)
+                        draggingItem.parentElement.removeChild(draggingItem);
+                    if (dir[0] === "t") {
+                        container.insertBefore(draggingItem, container.children[0]);
+                    }
+                    else {
+                        container.appendChild(draggingItem);
+                        container.children.length - 1;
+                    }
+                }
+            }
+        });
+    }
+    function listenItems(opts, toContainer, draggingItem, items, fromIndex = 0) {
+        const listener = (e) => {
+            const ct = e.currentTarget;
+            if (ct.style.transform) {
+                return;
+            }
+            const toIndex = ct._uiik_i;
+            let draggingItem = (DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.copy) || (DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.item);
+            if (toContainer === (DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.fromContainer)) {
+                draggingItem = DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.item;
+            }
+            let parent = draggingItem.parentElement;
+            parent === null || parent === void 0 ? void 0 : parent.removeChild(draggingItem);
+            const sameContainer = parent === ct.parentElement;
+            if (!sameContainer) {
+                parent = ct.parentElement;
+            }
+            const oldIndex = fromIndex;
+            if (toIndex > fromIndex) {
+                fromIndex = toIndex;
+                parent === null || parent === void 0 ? void 0 : parent.insertBefore(draggingItem, ct.nextElementSibling);
+            }
+            else {
+                fromIndex = toIndex - 1;
+                parent === null || parent === void 0 ? void 0 : parent.insertBefore(draggingItem, ct);
+            }
+            opts.onChange &&
+                opts.onChange({
+                    item: draggingItem,
+                    from: DraggingData === null || DraggingData === void 0 ? void 0 : DraggingData.fromContainer,
+                    to: toContainer,
+                    fromIndex: oldIndex,
+                    toIndex: fromIndex,
+                }, e);
+            const toPos = { x: ct.offsetLeft, y: ct.offsetTop };
+            const fromPos = { x: draggingItem.offsetLeft, y: draggingItem.offsetTop };
+            ct.style.transform = `translate3d(${fromPos.x - toPos.x}px,${fromPos.y - toPos.y}px,0)`;
+            draggingItem.style.transform = `translate3d(${toPos.x - fromPos.x}px,${toPos.y - fromPos.y}px,0)`;
+            draggingItem.offsetHeight;
+            ct.offsetHeight;
+            draggingItem.style.transition = "transform .15s";
+            draggingItem.style.transform = `translate3d(0px,0px,0)`;
+            ct.style.transition = "transform .15s";
+            ct.style.transform = `translate3d(0px,0px,0)`;
+            setTimeout(() => {
+                ct.style.transition = "";
+                ct.style.transform = ``;
+                draggingItem.style.transition = "";
+                draggingItem.style.transform = ``;
+            }, 150);
+            e.stopPropagation();
+            e.preventDefault();
+        };
+        collection.each(items, (item, i) => {
+            item.style.position = "relative";
+            if (item === draggingItem)
+                return;
+            item.style.pointerEvents = "initial";
+            item._uiik_i = i;
+            item.addEventListener("mouseenter", listener);
+        });
+        return () => {
+            collection.each(items, (item, i) => {
+                if (item === draggingItem)
+                    return;
+                item.removeEventListener("mouseenter", listener);
+            });
+        };
+    }
+    function newSortable(container, opts) {
+        return new Sortable(container, opts);
+    }
+
+    var version = "1.3.0-alpha";
+    var repository = {
+    	type: "git",
+    	url: "https://github.com/holyhigh2/uiik"
+    };
+
+    const welcome = globalThis.welcome;
+    if (!welcome) {
+        const ssAry = [];
+        ['102,227,255', '59,208,251', '67,180,255'].forEach((v, i) => {
+            const cu = 'background:rgb(' + v + ');';
+            if (i < 2) {
+                ssAry[i] = ssAry[5 - 1 - i] = cu;
+            }
+            else {
+                ssAry[i] = 'color:#fff;' + cu;
+            }
+        });
+        console.info(`%c %c %c Uiik - UI interactions kit | v${version} %c %c `, ...ssAry, `💎 ${repository.url}`);
+        globalThis.welcome = true;
+    }
+    const VERSION = version;
+    var index = {
+        VERSION: version,
+        newSplittable,
+        newResizable,
+        newDraggable,
+        newDroppable,
+        newRotatable,
+        newSelectable,
+        newSortable
+    };
+
+    exports.CollisionDetector = CollisionDetector;
+    exports.DRAGGING_RULE = DRAGGING_RULE;
+    exports.Draggable = Draggable;
+    exports.Droppable = Droppable;
+    exports.EDGE_THRESHOLD = EDGE_THRESHOLD;
+    exports.ONE_ANG = ONE_ANG;
+    exports.ONE_RAD = ONE_RAD;
+    exports.Resizable = Resizable;
+    exports.Rotatable = Rotatable;
+    exports.Selectable = Selectable;
+    exports.Sortable = Sortable;
+    exports.Splittable = Splittable;
+    exports.Uii = Uii;
+    exports.UiiTransformer = UiiTransformer;
+    exports.VERSION = VERSION;
+    exports["default"] = index;
+    exports.getBox = getBox;
+    exports.getCenterXy = getCenterXy;
+    exports.getMatrixInfo = getMatrixInfo;
+    exports.getPointInContainer = getPointInContainer;
+    exports.getPointOffset = getPointOffset;
+    exports.getRectInContainer = getRectInContainer;
+    exports.getStyleXy = getStyleXy;
+    exports.getTranslate = getTranslate;
+    exports.isSVGEl = isSVGEl;
+    exports.lockPage = lockPage;
+    exports.moveBy = moveBy;
+    exports.moveTo = moveTo;
+    exports.newCollisionDetector = newCollisionDetector;
+    exports.newDraggable = newDraggable;
+    exports.newDroppable = newDroppable;
+    exports.newResizable = newResizable;
+    exports.newRotatable = newRotatable;
+    exports.newSelectable = newSelectable;
+    exports.newSortable = newSortable;
+    exports.newSplittable = newSplittable;
+    exports.restoreCursor = restoreCursor;
+    exports.rotateTo = rotateTo;
+    exports.saveCursor = saveCursor;
+    exports.setCursor = setCursor;
+    exports.unlockPage = unlockPage;
+    exports.wrapper = wrapper;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));