*/
+ &[role='treeitem'] {
+ & > [data-ui='TreeItem__box'] {
+ ${0}
+
+ background-color: var(--card-bg-color);
+ color: var(--card-fg-color);
+ }
+
+ &[data-selected] > [data-ui='TreeItem__box'] {
+ ${0}
+ }
+
+ @media (hover: hover) {
+ &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
+ ${0}
+ }
+
+ &:focus > [data-ui='TreeItem__box'] {
+ ${0}
+ }
+ }
+ }
+ `),pe(r,a.enabled),pe(r,a.pressed),pe(r,a.hovered),pe(r,a.selected),pe(r,a.enabled),pe(r,a.pressed),pe(r,a.hovered),pe(r,a.selected))}function R4(e){const{$level:t,theme:n}=e,{space:r}=n.sanity;return re(Q0||(Q0=Dp`
+ padding-left: ${0};
+
+ &[data-as='a'] {
+ text-decoration: none;
+ }
+ `),W(r[2]*t))}let O4=e=>e,Z0;V.li(_4,A4);V(Se).attrs({forwardedAs:"a"})(R4);V(nn)(Z0||(Z0=O4`
+ & > svg {
+ transition: transform 100ms;
+ }
+`));var L4={env:{NODE_ENV:"production"}},M4=typeof process>"u"?L4:process,wb=M4,En=function(e){return{isEnabled:function(t){return e.some(function(n){return!!t[n]})}}},la={measureLayout:En(["layout","layoutId","drag"]),animation:En(["animate","exit","variants","whileHover","whileTap","whileFocus","whileDrag","whileInView"]),exit:En(["exit"]),drag:En(["drag","dragControls"]),focus:En(["whileFocus"]),hover:En(["whileHover","onHoverStart","onHoverEnd"]),tap:En(["whileTap","onTap","onTapStart","onTapCancel"]),pan:En(["onPan","onPanStart","onPanSessionStart","onPanEnd"]),inView:En(["whileInView","onViewportEnter","onViewportLeave"])};function z4(e){for(var t in e)e[t]!==null&&(t==="projectionNodeConstructor"?la.projectionNodeConstructor=e[t]:la[t].Component=e[t])}var xb=$.createContext({strict:!1}),bb=Object.keys(la),I4=bb.length;function F4(e,t,n){var r=[],o=$.useContext(xb);if(!t)return null;wb.env.NODE_ENV!=="production"&&n&&o.strict;for(var i=0;i
-1&&e.splice(n,1)}var Oi=function(){function e(){this.subscriptions=[]}return e.prototype.add=function(t){var n=this;return Vp(this.subscriptions,t),function(){return jp(n.subscriptions,t)}},e.prototype.notify=function(t,n,r){var o=this.subscriptions.length;if(o)if(o===1)this.subscriptions[0](t,n,r);else for(var i=0;it?1:n(oa(e,t,r))}}function cg(e,t){e.min=t.min,e.max=t.max}function sn(e,t){cg(e.x,t.x),cg(e.y,t.y)}function cc(e){return e===void 0||e===1}function Ab(e){var t=e.scale,n=e.scaleX,r=e.scaleY;return!cc(t)||!cc(n)||!cc(r)}function Gn(e){return Ab(e)||dg(e.x)||dg(e.y)||e.z||e.rotate||e.rotateX||e.rotateY}function dg(e){return e&&e!=="0%"}function gs(e,t,n){var r=e-n,o=t*r;return n+o}function fg(e,t,n,r,o){return o!==void 0&&(e=gs(e,o,r)),gs(e,n,r)+t}function Fd(e,t,n,r,o){t===void 0&&(t=0),n===void 0&&(n=1),e.min=fg(e.min,t,n,r,o),e.max=fg(e.max,t,n,r,o)}function Rb(e,t){var n=t.x,r=t.y;Fd(e.x,n.translate,n.scale,n.originPoint),Fd(e.y,r.translate,r.scale,r.originPoint)}function fz(e,t,n,r){var o,i;r===void 0&&(r=!1);var a=n.length;if(a){t.x=t.y=1;for(var l,s,u=0;u=0;o--){var i=this.members[o];if(i.isPresent!==!1){r=i;break}}return r?(this.promote(r),!0):!1},e.prototype.promote=function(t,n){var r,o=this.lead;if(t!==o&&(this.prevLead=o,this.lead=t,t.show(),o)){o.instance&&o.scheduleRender(),t.scheduleRender(),t.resumeFrom=o,n&&(t.resumeFrom.preserveOpacity=!0),o.snapshot&&(t.snapshot=o.snapshot,t.snapshot.latestValues=o.animationValues||o.latestValues,t.snapshot.isShared=!0),!((r=t.root)===null||r===void 0)&&r.isUpdating&&(t.isLayoutDirty=!0);var i=t.options.crossfade;i===!1&&o.hide()}},e.prototype.exitAnimationComplete=function(){this.members.forEach(function(t){var n,r,o,i,a;(r=(n=t.options).onExitComplete)===null||r===void 0||r.call(n),(a=(o=t.resumingFrom)===null||o===void 0?void 0:(i=o.options).onExitComplete)===null||a===void 0||a.call(i)})},e.prototype.scheduleRender=function(){this.members.forEach(function(t){t.instance&&t.scheduleRender(!1)})},e.prototype.removeLeadSnapshot=function(){this.lead&&this.lead.snapshot&&(this.lead.snapshot=void 0)},e}(),ys={};function xz(e){Object.assign(ys,e)}var bz="translate3d(0px, 0px, 0) scale(1, 1)";function Eg(e,t,n){var r=e.x.translate/t.x,o=e.y.translate/t.y,i="translate3d(".concat(r,"px, ").concat(o,"px, 0) ");if(n){var a=n.rotate,l=n.rotateX,s=n.rotateY;a&&(i+="rotate(".concat(a,"deg) ")),l&&(i+="rotateX(".concat(l,"deg) ")),s&&(i+="rotateY(".concat(s,"deg) "))}return i+="scale(".concat(e.x.scale,", ").concat(e.y.scale,")"),i===bz?"none":i}function dn(e){return[e("x"),e("y")]}var Dd=["","X","Y","Z"],Sz=["translate","scale","rotate","skew"],ua=["transformPerspective","x","y","z"];Sz.forEach(function(e){return Dd.forEach(function(t){return ua.push(e+t)})});function $z(e,t){return ua.indexOf(e)-ua.indexOf(t)}var Ez=new Set(ua);function ja(e){return Ez.has(e)}var Cz=new Set(["originX","originY","originZ"]);function Mb(e){return Cz.has(e)}var kz=function(e,t){return e.depth-t.depth},Pz=function(){function e(){this.children=[],this.isDirty=!1}return e.prototype.add=function(t){Vp(this.children,t),this.isDirty=!0},e.prototype.remove=function(t){jp(this.children,t),this.isDirty=!0},e.prototype.forEach=function(t){this.isDirty&&this.children.sort(kz),this.isDirty=!1,this.children.forEach(t)},e}();function Il(e){var t=Dn(e)?e.get():e;return ez(t)?t.toValue():t}var Cg=1e3,Ii={hasAnimatedSinceResize:!0,hasEverUpdated:!1};function zb(e){var t=e.attachResizeListener,n=e.defaultParent,r=e.measureScroll,o=e.resetTransform;return function(){function i(a,l,s){var u=this;l===void 0&&(l={}),s===void 0&&(s=n==null?void 0:n()),this.children=new Set,this.options={},this.isTreeAnimating=!1,this.isAnimationBlocked=!1,this.isLayoutDirty=!1,this.updateManuallyBlocked=!1,this.updateBlockedByResize=!1,this.isUpdating=!1,this.isSVG=!1,this.needsReset=!1,this.shouldResetTransform=!1,this.treeScale={x:1,y:1},this.eventHandlers=new Map,this.potentialNodes=new Map,this.checkUpdateFailed=function(){u.isUpdating&&(u.isUpdating=!1,u.clearAllSnapshots())},this.updateProjection=function(){u.nodes.forEach(Lz),u.nodes.forEach(Mz)},this.hasProjected=!1,this.isVisible=!0,this.animationProgress=0,this.sharedNodes=new Map,this.id=a,this.latestValues=l,this.root=s?s.root||s:this,this.path=s?gn(gn([],Xe(s.path),!1),[s],!1):[],this.parent=s,this.depth=s?s.depth+1:0,a&&this.root.registerPotentialNode(a,this);for(var c=0;c=0;r--)if(e.path[r].instance){n=e.path[r];break}var o=n&&n!==e.root?n.instance:document,i=o.querySelector('[data-projection-id="'.concat(t,'"]'));i&&e.mount(i,!0)}function _g(e){e.min=Math.round(e.min),e.max=Math.round(e.max)}function Ag(e){_g(e.x),_g(e.y)}var jz=1;function Bz(){return wu(function(){if(Ii.hasEverUpdated)return jz++})}var Ib=$.createContext({}),Fb=$.createContext({});function Hz(e,t,n,r){var o,i=t.layoutId,a=t.layout,l=t.drag,s=t.dragConstraints,u=t.layoutScroll,c=$.useContext(Fb);!r||!n||n!=null&&n.projection||(n.projection=new r(e,n.getLatestValues(),(o=n.parent)===null||o===void 0?void 0:o.projection),n.projection.setOptions({layoutId:i,layout:a,alwaysMeasureLayout:!!l||s&&mo(s),visualElement:n,scheduleRender:function(){return n.scheduleRender()},animationType:typeof a=="string"?a:"both",initialPromotionConfig:c,layoutScroll:u}))}var Uz=function(e){yx(t,e);function t(){return e!==null&&e.apply(this,arguments)||this}return t.prototype.getSnapshotBeforeUpdate=function(){return this.updateProps(),null},t.prototype.componentDidUpdate=function(){},t.prototype.updateProps=function(){var n=this.props,r=n.visualElement,o=n.props;r&&r.setProps(o)},t.prototype.render=function(){return this.props.children},t}(Vn.Component);function Wz(e){var t=e.preloadedFeatures,n=e.createVisualElement,r=e.projectionNodeConstructor,o=e.useRender,i=e.useVisualState,a=e.Component;t&&z4(t);function l(s,u){var c=Gz(s);s=j(j({},s),{layoutId:c});var d=$.useContext(Np),f=null,h=Y4(s),m=d.isStatic?void 0:Bz(),w=i(s,d.isStatic);return!d.isStatic&&Qo&&(h.visualElement=B4(a,w,j(j({},d),s),n),Hz(m,s,h.visualElement,r||la.projectionNodeConstructor),f=F4(s,h.visualElement,t)),$.createElement(Uz,{visualElement:h.visualElement,props:j(j({},d),s)},f,$.createElement(vu.Provider,{value:h},o(a,s,m,H4(w,h.visualElement,u),w,d.isStatic,h.visualElement)))}return $.forwardRef(l)}function Gz(e){var t,n=e.layoutId,r=(t=$.useContext(Ib))===null||t===void 0?void 0:t.id;return r&&n!==void 0?r+"-"+n:n}function Yz(e){function t(r,o){return o===void 0&&(o={}),Wz(e(r,o))}if(typeof Proxy>"u")return t;var n=new Map;return new Proxy(t,{get:function(r,o){return n.has(o)||n.set(o,t(o)),n.get(o)}})}var Kz=["animate","circle","defs","desc","ellipse","g","image","line","filter","marker","mask","metadata","path","pattern","polygon","polyline","rect","stop","svg","switch","symbol","text","tspan","use","view"];function Gp(e){return typeof e!="string"||e.includes("-")?!1:!!(Kz.indexOf(e)>-1||/[A-Z]/.test(e))}function Db(e,t){var n=t.layout,r=t.layoutId;return ja(e)||Mb(e)||(n||r!==void 0)&&(!!ys[e]||e==="opacity")}var Xz={x:"translateX",y:"translateY",z:"translateZ",transformPerspective:"perspective"};function Qz(e,t,n,r){var o=e.transform,i=e.transformKeys,a=t.enableHardwareAcceleration,l=a===void 0?!0:a,s=t.allowTransformNone,u=s===void 0?!0:s,c="";i.sort($z);for(var d=!1,f=i.length,h=0;h"u"?II:zI;u(s,l.current,t,a)}var MI={some:0,all:1};function zI(e,t,n,r){var o=r.root,i=r.margin,a=r.amount,l=a===void 0?"some":a,s=r.once;$.useEffect(function(){if(e){var u={root:o==null?void 0:o.current,rootMargin:i,threshold:typeof l=="number"?l:MI[l]},c=function(d){var f,h=d.isIntersecting;if(t.isInView!==h&&(t.isInView=h,!(s&&!h&&t.hasEnteredView))){h&&(t.hasEnteredView=!0),(f=n.animationState)===null||f===void 0||f.setActive(ke.InView,h);var m=n.getProps(),w=h?m.onViewportEnter:m.onViewportLeave;w==null||w(d)}};return OI(n.getInstance(),u,c)}},[e,o,i,l])}function II(e,t,n,r){var o=r.fallback,i=o===void 0?!0:o;$.useEffect(function(){!e||!i||(wb.env.NODE_ENV!=="production"&&TI(!1,"IntersectionObserver not available on this device. whileInView animations will trigger on mount."),requestAnimationFrame(function(){var a;t.hasEnteredView=!0;var l=n.getProps().onViewportEnter;l==null||l(null),(a=n.animationState)===null||a===void 0||a.setActive(ke.InView,!0)}))},[e])}var tr=function(e){return function(t){return e(t),null}},FI={inView:tr(LI),tap:tr(PI),focus:tr(mI),hover:tr(kI)},DI=0,NI=function(){return DI++},VI=function(){return wu(NI)};function oS(){var e=$.useContext(mu);if(e===null)return[!0,null];var t=e.isPresent,n=e.onExitComplete,r=e.register,o=VI();$.useEffect(function(){return r(o)},[]);var i=function(){return n==null?void 0:n(o)};return!t&&n?[!1,i]:[!0]}function iS(e,t){if(!Array.isArray(t))return!1;var n=t.length;if(n!==e.length)return!1;for(var r=0;rp&&F,q=Array.isArray(A)?A:[A],J=q.reduce(i,{});G===!1&&(J={});var O=k.prevResolvedValues,B=O===void 0?{}:O,z=j(j({},B),J),U=function(L){Z=!0,b.delete(L),k.needsAnimating[L]=!0};for(var R in z){var M=J[R],T=B[R];g.hasOwnProperty(R)||(M!==T?sa(M)&&sa(T)?!iS(M,T)||te?U(R):k.protectedKeys[R]=!0:M!==void 0?U(R):b.add(R):M!==void 0&&b.has(R)?U(R):k.protectedKeys[R]=!0)}k.prevProp=A,k.prevResolvedValues=J,k.isActive&&(g=j(j({},g),J)),o&&e.blockInitialAnimation&&(Z=!1),Z&&!K&&w.push.apply(w,gn([],Xe(q.map(function(L){return{animation:L,options:j({type:C},c)}})),!1))},y=0;y=3;if(!(!h&&!m)){var w=f.point,b=ds().timestamp;o.history.push(j(j({},w),{timestamp:b}));var g=o.handlers,p=g.onStart,v=g.onMove;h||(p&&p(o.lastMoveEvent,f),o.startEvent=o.lastMoveEvent),v&&v(o.lastMoveEvent,f)}}},this.handlePointerMove=function(f,h){if(o.lastMoveEvent=f,o.lastMoveEventInfo=fc(h,o.transformPagePoint),Xb(f)&&f.buttons===0){o.handlePointerUp(f,h);return}yn.update(o.updatePoint,!0)},this.handlePointerUp=function(f,h){o.end();var m=o.handlers,w=m.onEnd,b=m.onSessionEnd,g=pc(fc(h,o.transformPagePoint),o.history);o.startEvent&&w&&w(f,g),b&&b(f,g)},!(Qb(t)&&t.touches.length>1)){this.handlers=n,this.transformPagePoint=a;var l=Jp(t),s=fc(l,this.transformPagePoint),u=s.point,c=ds().timestamp;this.history=[j(j({},u),{timestamp:c})];var d=n.onSessionStart;d&&d(t,pc(s,this.history)),this.removeListeners=cu(ko(window,"pointermove",this.handlePointerMove),ko(window,"pointerup",this.handlePointerUp),ko(window,"pointercancel",this.handlePointerUp))}}return e.prototype.updateHandlers=function(t){this.handlers=t},e.prototype.end=function(){this.removeListeners&&this.removeListeners(),Ho.update(this.updatePoint)},e}();function fc(e,t){return t?{point:t(e.point)}:e}function Fg(e,t){return{x:e.x-t.x,y:e.y-t.y}}function pc(e,t){var n=e.point;return{point:n,delta:Fg(n,cS(t)),offset:Fg(n,sF(t)),velocity:uF(t,.1)}}function sF(e){return e[0]}function cS(e){return e[e.length-1]}function uF(e,t){if(e.length<2)return{x:0,y:0};for(var n=e.length-1,r=null,o=cS(e);n>=0&&(r=e[n],!(o.timestamp-r.timestamp>ms(t)));)n--;if(!r)return{x:0,y:0};var i=(o.timestamp-r.timestamp)/1e3;if(i===0)return{x:0,y:0};var a={x:(o.x-r.x)/i,y:(o.y-r.y)/i};return a.x===1/0&&(a.x=0),a.y===1/0&&(a.y=0),a}function cF(e,t,n){var r=t.min,o=t.max;return r!==void 0&&eo&&(e=n?Ve(o,e,n.max):Math.min(e,o)),e}function Dg(e,t,n){return{min:t!==void 0?e.min+t:void 0,max:n!==void 0?e.max+n-(e.max-e.min):void 0}}function dF(e,t){var n=t.top,r=t.left,o=t.bottom,i=t.right;return{x:Dg(e.x,r,i),y:Dg(e.y,n,o)}}function Ng(e,t){var n,r=t.min-e.min,o=t.max-e.max;return t.max-t.minr?n=oa(t.min,t.max-r,e.min):r>o&&(n=oa(e.min,e.max-o,t.min)),fs(0,1,n)}function hF(e,t){var n={};return t.min!==void 0&&(n.min=t.min-e.min),t.max!==void 0&&(n.max=t.max-e.min),n}var Bd=.35;function vF(e){return e===void 0&&(e=Bd),e===!1?e=0:e===!0&&(e=Bd),{x:Vg(e,"left","right"),y:Vg(e,"top","bottom")}}function Vg(e,t,n){return{min:jg(e,t),max:jg(e,n)}}function jg(e,t){var n;return typeof e=="number"?e:(n=e[t])!==null&&n!==void 0?n:0}function dS(e){var t=e.top,n=e.left,r=e.right,o=e.bottom;return{x:{min:n,max:r},y:{min:t,max:o}}}function mF(e){var t=e.x,n=e.y;return{top:n.min,right:t.max,bottom:n.max,left:t.min}}function gF(e,t){if(!t)return e;var n=t({x:e.left,y:e.top}),r=t({x:e.right,y:e.bottom});return{top:n.y,left:n.x,bottom:r.y,right:r.x}}function fS(e,t){return dS(gF(e.getBoundingClientRect(),t))}function yF(e,t,n){var r=fS(e,n),o=t.scroll;return o&&(go(r.x,o.x),go(r.y,o.y)),r}var wF=new WeakMap,xF=function(){function e(t){this.openGlobalLock=null,this.isDragging=!1,this.currentDirection=null,this.originPoint={x:0,y:0},this.constraints=!1,this.hasMutatedConstraints=!1,this.elastic=at(),this.visualElement=t}return e.prototype.start=function(t,n){var r=this,o=n===void 0?{}:n,i=o.snapToCursor,a=i===void 0?!1:i;if(this.visualElement.isPresent!==!1){var l=function(d){r.stopAnimation(),a&&r.snapToCursor(Jp(d,"page").point)},s=function(d,f){var h,m=r.getProps(),w=m.drag,b=m.dragPropagation,g=m.onDragStart;w&&!b&&(r.openGlobalLock&&r.openGlobalLock(),r.openGlobalLock=eS(w),!r.openGlobalLock)||(r.isDragging=!0,r.currentDirection=null,r.resolveConstraints(),r.visualElement.projection&&(r.visualElement.projection.isAnimationBlocked=!0,r.visualElement.projection.target=void 0),dn(function(p){var v,y,x=r.getAxisMotionValue(p).get()||0;if(wn.test(x)){var S=(y=(v=r.visualElement.projection)===null||v===void 0?void 0:v.layout)===null||y===void 0?void 0:y.actual[p];if(S){var E=Nn(S);x=E*(parseFloat(x)/100)}}r.originPoint[p]=x}),g==null||g(d,f),(h=r.visualElement.animationState)===null||h===void 0||h.setActive(ke.Drag,!0))},u=function(d,f){var h=r.getProps(),m=h.dragPropagation,w=h.dragDirectionLock,b=h.onDirectionLock,g=h.onDrag;if(!(!m&&!r.openGlobalLock)){var p=f.offset;if(w&&r.currentDirection===null){r.currentDirection=bF(p),r.currentDirection!==null&&(b==null||b(r.currentDirection));return}r.updateAxis("x",f.point,p),r.updateAxis("y",f.point,p),r.visualElement.syncRender(),g==null||g(d,f)}},c=function(d,f){return r.stop(d,f)};this.panSession=new uS(t,{onSessionStart:l,onStart:s,onMove:u,onSessionEnd:c},{transformPagePoint:this.visualElement.getTransformPagePoint()})}},e.prototype.stop=function(t,n){var r=this.isDragging;if(this.cancel(),!!r){var o=n.velocity;this.startAnimation(o);var i=this.getProps().onDragEnd;i==null||i(t,n)}},e.prototype.cancel=function(){var t,n;this.isDragging=!1,this.visualElement.projection&&(this.visualElement.projection.isAnimationBlocked=!1),(t=this.panSession)===null||t===void 0||t.end(),this.panSession=void 0;var r=this.getProps().dragPropagation;!r&&this.openGlobalLock&&(this.openGlobalLock(),this.openGlobalLock=null),(n=this.visualElement.animationState)===null||n===void 0||n.setActive(ke.Drag,!1)},e.prototype.updateAxis=function(t,n,r){var o=this.getProps().drag;if(!(!r||!vl(t,o,this.currentDirection))){var i=this.getAxisMotionValue(t),a=this.originPoint[t]+r[t];this.constraints&&this.constraints[t]&&(a=cF(a,this.constraints[t],this.elastic[t])),i.set(a)}},e.prototype.resolveConstraints=function(){var t=this,n=this.getProps(),r=n.dragConstraints,o=n.dragElastic,i=(this.visualElement.projection||{}).layout,a=this.constraints;r&&mo(r)?this.constraints||(this.constraints=this.resolveRefConstraints()):r&&i?this.constraints=dF(i.actual,r):this.constraints=!1,this.elastic=vF(o),a!==this.constraints&&i&&this.constraints&&!this.hasMutatedConstraints&&dn(function(l){t.getAxisMotionValue(l)&&(t.constraints[l]=hF(i.actual[l],t.constraints[l]))})},e.prototype.resolveRefConstraints=function(){var t=this.getProps(),n=t.dragConstraints,r=t.onMeasureDragConstraints;if(!n||!mo(n))return!1;var o=n.current,i=this.visualElement.projection;if(!i||!i.layout)return!1;var a=yF(o,i.root,this.visualElement.getTransformPagePoint()),l=fF(i.layout.actual,a);if(r){var s=r(mF(l));this.hasMutatedConstraints=!!s,s&&(l=dS(s))}return l},e.prototype.startAnimation=function(t){var n=this,r=this.getProps(),o=r.drag,i=r.dragMomentum,a=r.dragElastic,l=r.dragTransition,s=r.dragSnapToOrigin,u=r.onDragTransitionEnd,c=this.constraints||{},d=dn(function(f){var h;if(vl(f,o,n.currentDirection)){var m=(h=c==null?void 0:c[f])!==null&&h!==void 0?h:{};s&&(m={min:0,max:0});var w=a?200:1e6,b=a?40:1e7,g=j(j({type:"inertia",velocity:i?t[f]:0,bounceStiffness:w,bounceDamping:b,timeConstant:750,restDelta:1,restSpeed:10},l),m);return n.startAxisValueAnimation(f,g)}});return Promise.all(d).then(u)},e.prototype.startAxisValueAnimation=function(t,n){var r=this.getAxisMotionValue(t);return Wp(t,r,0,n)},e.prototype.stopAnimation=function(){var t=this;dn(function(n){return t.getAxisMotionValue(n).stop()})},e.prototype.getAxisMotionValue=function(t){var n,r,o="_drag"+t.toUpperCase(),i=this.visualElement.getProps()[o];return i||this.visualElement.getValue(t,(r=(n=this.visualElement.getProps().initial)===null||n===void 0?void 0:n[t])!==null&&r!==void 0?r:0)},e.prototype.snapToCursor=function(t){var n=this;dn(function(r){var o=n.getProps().drag;if(vl(r,o,n.currentDirection)){var i=n.visualElement.projection,a=n.getAxisMotionValue(r);if(i&&i.layout){var l=i.layout.actual[r],s=l.min,u=l.max;a.set(t[r]-Ve(s,u,.5))}}})},e.prototype.scalePositionWithinConstraints=function(){var t=this,n,r=this.getProps(),o=r.drag,i=r.dragConstraints,a=this.visualElement.projection;if(!(!mo(i)||!a||!this.constraints)){this.stopAnimation();var l={x:0,y:0};dn(function(u){var c=t.getAxisMotionValue(u);if(c){var d=c.get();l[u]=pF({min:d,max:d},t.constraints[u])}});var s=this.visualElement.getProps().transformTemplate;this.visualElement.getInstance().style.transform=s?s({},""):"none",(n=a.root)===null||n===void 0||n.updateScroll(),a.updateLayout(),this.resolveConstraints(),dn(function(u){if(vl(u,o,null)){var c=t.getAxisMotionValue(u),d=t.constraints[u],f=d.min,h=d.max;c.set(Ve(f,h,l[u]))}})}},e.prototype.addListeners=function(){var t=this,n;wF.set(this.visualElement,this);var r=this.visualElement.getInstance(),o=ko(r,"pointerdown",function(u){var c=t.getProps(),d=c.drag,f=c.dragListener,h=f===void 0?!0:f;d&&h&&t.start(u)}),i=function(){var u=t.getProps().dragConstraints;mo(u)&&(t.constraints=t.resolveRefConstraints())},a=this.visualElement.projection,l=a.addEventListener("measure",i);a&&!a.layout&&((n=a.root)===null||n===void 0||n.updateScroll(),a.updateLayout()),i();var s=qp(window,"resize",function(){t.scalePositionWithinConstraints()});return a.addEventListener("didUpdate",function(u){var c=u.delta,d=u.hasLayoutChanged;t.isDragging&&d&&(dn(function(f){var h=t.getAxisMotionValue(f);h&&(t.originPoint[f]+=c[f].translate,h.set(h.get()+c[f].translate))}),t.visualElement.syncRender())}),function(){s(),o(),l()}},e.prototype.getProps=function(){var t=this.visualElement.getProps(),n=t.drag,r=n===void 0?!1:n,o=t.dragDirectionLock,i=o===void 0?!1:o,a=t.dragPropagation,l=a===void 0?!1:a,s=t.dragConstraints,u=s===void 0?!1:s,c=t.dragElastic,d=c===void 0?Bd:c,f=t.dragMomentum,h=f===void 0?!0:f;return j(j({},t),{drag:r,dragDirectionLock:i,dragPropagation:l,dragConstraints:u,dragElastic:d,dragMomentum:h})},e}();function vl(e,t,n){return(t===!0||t===e)&&(n===null||n===e)}function bF(e,t){t===void 0&&(t=10);var n=null;return Math.abs(e.y)>t?n="y":Math.abs(e.x)>t&&(n="x"),n}function SF(e){var t=e.dragControls,n=e.visualElement,r=wu(function(){return new xF(n)});$.useEffect(function(){return t&&t.subscribe(r)},[r,t]),$.useEffect(function(){return r.addListeners()},[r])}function $F(e){var t=e.onPan,n=e.onPanStart,r=e.onPanEnd,o=e.onPanSessionStart,i=e.visualElement,a=t||n||r||o,l=$.useRef(null),s=$.useContext(Np).transformPagePoint,u={onSessionStart:o,onStart:n,onMove:t,onEnd:function(d,f){l.current=null,r&&r(d,f)}};$.useEffect(function(){l.current!==null&&l.current.updateHandlers(u)});function c(d){l.current=new uS(d,u,{transformPagePoint:s})}xs(i,"pointerdown",a&&c),rS(function(){return l.current&&l.current.end()})}var EF={pan:tr($F),drag:tr(SF)},ml=["LayoutMeasure","BeforeLayoutMeasure","LayoutUpdate","ViewportBoxUpdate","Update","Render","AnimationComplete","LayoutAnimationComplete","AnimationStart","LayoutAnimationStart","SetAxisTarget","Unmount"];function CF(){var e=ml.map(function(){return new Oi}),t={},n={clearAllListeners:function(){return e.forEach(function(r){return r.clear()})},updatePropListeners:function(r){ml.forEach(function(o){var i,a="on"+o,l=r[a];(i=t[o])===null||i===void 0||i.call(t),l&&(t[o]=n[a](l))})}};return e.forEach(function(r,o){n["on"+ml[o]]=function(i){return r.add(i)},n["notify"+ml[o]]=function(){for(var i=[],a=0;a5)return o;var s=In.createTransformer(e),u=typeof l[0]!="number"?1:0,c=r.x.scale*n.x,d=r.y.scale*n.y;l[0+u]/=c,l[1+u]/=d;var f=Ve(c,d,.5);typeof l[2+u]=="number"&&(l[2+u]/=f),typeof l[3+u]=="number"&&(l[3+u]/=f);var h=s(l);if(i){var m=0;h=h.replace(Kg,function(){var w=a[m];return m++,w})}return h}},UF=function(e){yx(t,e);function t(){return e!==null&&e.apply(this,arguments)||this}return t.prototype.componentDidMount=function(){var n=this,r=this.props,o=r.visualElement,i=r.layoutGroup,a=r.switchLayoutGroup,l=r.layoutId,s=o.projection;xz(GF),s&&(i!=null&&i.group&&i.group.add(s),a!=null&&a.register&&l&&a.register(s),s.root.didUpdate(),s.addEventListener("animationComplete",function(){n.safeToRemove()}),s.setOptions(j(j({},s.options),{onExitComplete:function(){return n.safeToRemove()}}))),Ii.hasEverUpdated=!0},t.prototype.getSnapshotBeforeUpdate=function(n){var r=this,o=this.props,i=o.layoutDependency,a=o.visualElement,l=o.drag,s=o.isPresent,u=a.projection;return u&&(u.isPresent=s,l||n.layoutDependency!==i||i===void 0?u.willUpdate():this.safeToRemove(),n.isPresent!==s&&(s?u.promote():u.relegate()||yn.postRender(function(){var c;!((c=u.getStack())===null||c===void 0)&&c.members.length||r.safeToRemove()}))),null},t.prototype.componentDidUpdate=function(){var n=this.props.visualElement.projection;n&&(n.root.didUpdate(),!n.currentAnimation&&n.isLead()&&this.safeToRemove())},t.prototype.componentWillUnmount=function(){var n=this.props,r=n.visualElement,o=n.layoutGroup,i=n.switchLayoutGroup,a=r.projection;a&&(a.scheduleCheckAfterUnmount(),o!=null&&o.group&&o.group.remove(a),i!=null&&i.deregister&&i.deregister(a))},t.prototype.safeToRemove=function(){var n=this.props.safeToRemove;n==null||n()},t.prototype.render=function(){return null},t}(Vn.Component);function WF(e){var t=Xe(oS(),2),n=t[0],r=t[1],o=$.useContext(Ib);return _(UF,{...j({},e,{layoutGroup:o,switchLayoutGroup:$.useContext(Fb),isPresent:n,safeToRemove:r})})}var GF={borderRadius:j(j({},di),{applyTo:["borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"]}),borderTopLeftRadius:di,borderTopRightRadius:di,borderBottomLeftRadius:di,borderBottomRightRadius:di,boxShadow:HF},YF={measureLayout:WF},KF=zb({attachResizeListener:function(e,t){return e.addEventListener("resize",t,{passive:!0}),function(){return e.removeEventListener("resize",t)}},measureScroll:function(){return{x:document.documentElement.scrollLeft||document.body.scrollLeft,y:document.documentElement.scrollTop||document.body.scrollTop}}}),hc={current:void 0},XF=zb({measureScroll:function(e){return{x:e.scrollLeft,y:e.scrollTop}},defaultParent:function(){if(!hc.current){var e=new KF(0,{});e.mount(window),e.setOptions({layoutScroll:!0}),hc.current=e}return hc.current},resetTransform:function(e,t){e.style.transform=t??"none"}}),QF=j(j(j(j({},lF),FI),EF),YF),ZF=Yz(function(e,t){return vI(e,t,QF,BF,XF)});const Wd=$.createContext({elements:[],dispatch:()=>null});function wS(){if(!$.useContext(Wd))throw new Error("Missing context value");return $.useContext(Wd)}function qF(e,t){var s;const{type:n,id:r,element:o,connectWith:i}=t,a=(s=e==null?void 0:e.elements)==null?void 0:s.some(u=>u.id===r),l={id:r,element:o,connectWith:i||[]};if(n==="add"&&o){if(!a)return{...e,elements:[...e.elements,l]};if(a){const u=[...e.elements].map(c=>c.id===r?l:c);return{...e,elements:u}}return e}return n==="remove"?{...e,elements:e.elements.map(u=>{var c;return{...u,connectWith:(c=u.connectWith)==null?void 0:c.filter(d=>d.id!==r)}}).filter(u=>u.id!==r)}:e}function JF(e){const{children:t}=e,[n,r]=$.useReducer(qF,{elements:[],dispatch:()=>null}),o=$.useMemo(()=>({elements:n.elements,dispatch:r}),[n]);return _(Wd.Provider,{value:o,children:t})}function eD(e){const{children:t,id:n,connectWith:r}=e,{dispatch:o}=wS(),i=$.useRef(),a=$.useCallback(()=>{o({type:"add",id:n,connectWith:r,element:i.current})},[r,o,n]),l=$.useMemo(()=>{const{props:s}=t;return $.cloneElement(t,{...s,ref:u=>{i.current=u,typeof t=="function"&&s.ref(u)}})},[t]);return $.useEffect(()=>{a()},[e,a,i]),$.useEffect(()=>()=>{o({type:"remove",id:n})},[o,n]),l}const tD=e=>{const{paths:t,edge:n}=e;return`M ${t.map((r,o)=>o===1&&n==="step"?`${r.x} ${r.y}`:o===1&&n==="bezier"?`C ${r.x} ${r.y}`:`${r.x} ${r.y}`).join(" ")}`};function bs(e){return e.element?e.element:document.querySelector(`#${e.id}`)}const nD=[];function rD(e){const{elements:t}=e;return t.filter(n=>((n==null?void 0:n.connectWith)||nD).length>0).map(n=>{var i;const{connectWith:r}=n,o=t.filter(a=>r==null?void 0:r.map(l=>l.id).includes(a.id)).map(a=>{var l,s,u,c,d;return{rect:(l=bs(a))==null?void 0:l.getBoundingClientRect(),color:((s=r==null?void 0:r.find(f=>f.id===a.id))==null?void 0:s.color)||"#000000",edge:((u=r==null?void 0:r.find(f=>f.id===a.id))==null?void 0:u.edge)||"bezier",stroke:((c=r==null?void 0:r.find(f=>f.id===a.id))==null?void 0:c.stroke)||"solid",hasArrows:!!((d=r==null?void 0:r.find(f=>f.id===a.id))!=null&&d.hasArrows)}});if(o.length!==0)return{from:{rect:(i=bs(n))==null?void 0:i.getBoundingClientRect()},to:o}}).filter(Boolean)}function oD(e){const{from:t,to:n}=e,r=t==null?void 0:t.rect,o=n==null?void 0:n.rect;if(!r||!o)return;switch(function(a){const{from:l,to:s}=a,u=l.left-40s.right-40,c=l.bottoms.bottom&&u,f=l.left>s.right,h=l.right[...new Set([...i.map(h=>{var m;return(m=h.connectWith)==null?void 0:m.map(w=>w==null?void 0:w.color)}).flat(),"#000000"])].filter(Boolean),[i]),s=$.useCallback(()=>{a.current&&window.cancelAnimationFrame(a.current),a.current=window.requestAnimationFrame(()=>{const h=rD({elements:i}).map(m=>{const{from:w,to:b}=m||{};return b==null?void 0:b.map(p=>{const v=oD({from:w,to:p});if(!v)return;const y=tD({paths:v,edge:p==null?void 0:p.edge});return/\d/.test(y)?{d:y,...p}:void 0})}).filter(Boolean).flat().filter(m=>!!m);n(h)})},[i]),u=$.useCallback(()=>{o(!0)},[]),c=$.useCallback(()=>{o(!1)},[]),d=$.useCallback(()=>{r&&s()},[s,r]);$.useEffect(()=>{s()},[s]),$.useEffect(()=>(window.addEventListener("resize",s,{passive:!0}),window.addEventListener("scroll",s,{passive:!0}),()=>{window.removeEventListener("resize",s),window.removeEventListener("scroll",s)}),[s]);const f=$.useMemo(()=>new ResizeObserver(s),[s]);return $.useEffect(()=>(i.forEach(h=>{const m=bs(h);m==null||m.addEventListener("mousedown",u,{passive:!0}),m==null||m.addEventListener("mouseup",c,{passive:!0}),m==null||m.addEventListener("mousemove",d,{passive:!0}),m==null||m.addEventListener("touchstart",u,{passive:!0}),m==null||m.addEventListener("touchend",c,{passive:!0}),m==null||m.addEventListener("touchmove",d,{passive:!0}),m&&f.observe(m)}),()=>{i.forEach(h=>{const m=bs(h);m==null||m.removeEventListener("mousedown",u),m==null||m.removeEventListener("mouseup",c),m==null||m.removeEventListener("mousemove",d),m==null||m.removeEventListener("touchstart",u),m==null||m.removeEventListener("touchend",c),m==null||m.removeEventListener("touchmove",d),m&&(f.disconnect(),f.unobserve(m))})}),[i,s,u,c,d,f]),$.useMemo(()=>ve("svg",{style:iD,children:[l==null?void 0:l.map(h=>ve("defs",{children:[_("marker",{id:`triangle-${h}`,markerHeight:"5",markerUnits:"strokeWidth",markerWidth:"5",orient:"auto",refX:"1",refY:"5",viewBox:"0 0 10 10",children:_("path",{d:"M 0 0 L 10 5 L 0 10 z",fill:h})}),_("marker",{id:`line-${h}`,markerHeight:"5",markerUnits:"strokeWidth",markerWidth:"10",orient:"auto",refX:"0",refY:"5",viewBox:"0 0 10 10",children:_("path",{d:"M 0 5 L 10 5",stroke:h,strokeWidth:"2",fill:"none"})})]},h)),t==null?void 0:t.map(h=>_("path",{id:"p1",d:h==null?void 0:h.d,fill:"none",stroke:h==null?void 0:h.color,strokeWidth:"2",strokeDasharray:(h==null?void 0:h.stroke)==="dashed"?4:0,strokeLinejoin:"round",markerEnd:`url(#${h!=null&&h.hasArrows?"triangle":"line"}-${h==null?void 0:h.color})`},h==null?void 0:h.d))]}),[l,t])}function sD(){const{elements:e}=wS();return _(lD,{elements:e})}function uD(e){const{children:t}=e;return ve(JF,{children:[t,_(sD,{})]})}function cD(){const e=gl[Math.floor(Math.random()*gl.length)],t=gl[Math.floor(Math.random()*gl.length)];return`${e}${t}`}const gl=["😄","😃","😀","😊","☺","😉","😍","😘","😚","😗","😙","😜","😝","😛","😳","😁","😔","😌","😒","😞","😣","😢","😂","😭","😪","😥","😰","😅","😓","😩","😫","😨","😱","😠","😡","😤","😖","😆","😋","😷","😎","😴","😵","😲","😟","😦","😧","😈","👿","😮","😬","😐","😕","😯","😶","😇","😏","😑","👲","👳","👮","👷","💂","👶","👦","👧","👨","👩","👴","👵","👱","👼","👸","😺","😸","😻","😽","😼","🙀","😿","😹","😾","👹","👺","🙈","🙉","🙊","💀","👽","💩","🔥","✨","🌟","💫","💥","💢","💦","💧","💤","💨","👂","👀","👃","👅","👄","👍","👎","👌","👊","✊","✌","👋","✋","👐","👆","👇","👉","👈","🙌","🙏","☝","👏","💪","🚶","🏃","💃","👫","👪","👬","👭","💏","💑","👯","🙆","🙅","💁","🙋","💆","💇","💅","👰","🙎","🙍","🙇","🎩","👑","👒","👟","👞","👡","👠","👢","👕","👔","👚","👗","🎽","👖","👘","👙","💼","👜","👝","👛","👓","🎀","🌂","💄","💛","💙","💜","💚","❤","💔","💗","💓","💕","💖","💞","💘","💌","💋","💍","💎","👤","👥","💬","👣","💭","🐶","🐺","🐱","🐭","🐹","🐰","🐸","🐯","🐨","🐻","🐷","🐽","🐮","🐗","🐵","🐒","🐴","🐑","🐘","🐼","🐧","🐦","🐤","🐥","🐣","🐔","🐍","🐢","🐛","🐝","🐜","🐞","🐌","🐙","🐚","🐠","🐟","🐬","🐳","🐋","🐄","🐏","🐀","🐃","🐅","🐇","🐉","🐎","🐐","🐓","🐕","🐖","🐁","🐂","🐲","🐡","🐊","🐫","🐪","🐆","🐈","🐩","🐾","💐","🌸","🌷","🍀","🌹","🌻","🌺","🍁","🍃","🍂","🌿","🌾","🍄","🌵","🌴","🌲","🌳","🌰","🌱","🌼","🌐","🌞","🌝","🌚","🌑","🌒","🌓","🌔","🌕","🌖","🌗","🌘","🌜","🌛","🌙","🌍","🌎","🌏","🌋","🌌","🌠","⭐","☀","⛅","☁","⚡","☔","❄","⛄","🌀","🌁","🌈","🌊","🎍","💝","🎎","🎒","🎓","🎏","🎆","🎇","🎐","🎑","🎃","👻","🎅","🎄","🎁","🎋","🎉","🎊","🎈","🎌","🔮"],dD=ZF(bn);function fD(){const[e,t]=$.useState([]),n=$.useCallback(()=>{t(a=>[...a,{id:cD()}])},[]),r=$.useCallback(a=>{const l=e.filter(s=>s.id!==a);t(l)},[e]),o=$.useCallback((a,l,s)=>{const u=a.currentTarget.checked,c=e.map(d=>{var f;return l.id===d.id&&u?{...d,connectWith:[...(d==null?void 0:d.connectWith)||[],{id:s.id}]}:l.id===d.id&&!u?{...d,connectWith:(f=d==null?void 0:d.connectWith)==null?void 0:f.filter(h=>h.id!==s.id)}:d});t(c)},[e]),i=$.useCallback((a,l,s)=>{const u=e.map(c=>{var d;return c.id===a.id?{...a,connectWith:(d=a==null?void 0:a.connectWith)==null?void 0:d.map(f=>f.id===l.id?{...f,...s}:f)}:c});t(u)},[e]);return _(uD,{children:ve(bn,{padding:5,sizing:"border",height:"fill",children:[_(er,{marginBottom:4,children:_(zl,{text:"Add element",onClick:n,fontSize:1,padding:2,mode:"ghost",icon:pk})}),_(zM,{columns:2,gapY:7,gapX:9,children:e.map(a=>{var l;return _(eD,{id:a.id,connectWith:a==null?void 0:a.connectWith,children:_(dD,{padding:4,border:!0,radius:2,drag:!0,dragMomentum:!1,initial:{scale:.5},animate:{scale:1},style:{position:"absolute"},children:_(zt,{space:4,children:ve(er,{align:"center",justify:"space-between",gap:2,children:[_(Se,{children:_(nn,{align:"center",muted:!0,weight:"bold",children:a.id})}),ve(er,{gap:2,marginLeft:7,children:[_(z0,{id:"del",button:_(zl,{icon:yk,mode:"ghost",fontSize:1,padding:2}),menu:_(M0,{children:_(g4,{text:"Confirm",fontSize:1,padding:2,tone:"critical",onClick:()=>r(a.id)})})}),_(z0,{id:"menu",button:_(zl,{icon:vk,mode:"ghost",fontSize:1,padding:2,disabled:e.length===1}),popover:{portal:!0,constrainSize:!0},menu:_(M0,{padding:0,children:_(Se,{padding:3,children:_(zt,{space:4,children:_(zt,{space:3,children:(l=e.filter(s=>s.id!==(a==null?void 0:a.id)))==null?void 0:l.map((s,u)=>{var d,f,h,m,w,b,g,p,v;const c=!!((d=a.connectWith)!=null&&d.find(y=>y.id===s.id));return ve(zt,{space:4,children:[_(nn,{weight:"bold",size:1,children:s.id}),ve(er,{gap:3,children:[_(zt,{space:2,children:ve(zt,{space:2,children:[_(ui,{size:0,muted:!0,children:"Connected"}),_(Se,{style:{height:25},children:_(Y3,{onChange:y=>o(y,a,s),checked:c})})]})}),ve(zt,{space:2,children:[_(ui,{size:0,muted:!0,children:"Stroke"}),ve(Jm,{disabled:!c,fontSize:1,padding:2,defaultValue:((h=(f=a.connectWith)==null?void 0:f.find(y=>y.id===s.id))==null?void 0:h.stroke)||"solid",onChange:y=>i(a,s,{stroke:y.currentTarget.value}),children:[_("option",{value:"dashed",children:"Dashed"}),_("option",{value:"solid",children:"Solid"})]})]}),c&&ve(zt,{space:2,children:[_(ui,{size:0,muted:!0,children:"Has Arrows"}),_(Se,{style:{height:25},children:_(SM,{onChange:y=>{var x;return i(a,s,{hasArrows:(x=y.target)==null?void 0:x.checked})},defaultChecked:c&&((w=(m=a.connectWith)==null?void 0:m.find(y=>y.id===s.id))==null?void 0:w.hasArrows)})})]}),ve(zt,{space:2,children:[_(ui,{size:0,muted:!0,children:"Edge"}),ve(Jm,{disabled:!c,fontSize:1,padding:2,defaultValue:((g=(b=a.connectWith)==null?void 0:b.find(y=>y.id===s.id))==null?void 0:g.edge)||"bezier",onChange:y=>i(a,s,{edge:y.currentTarget.value}),children:[_("option",{value:"bezier",children:"Bezier"}),_("option",{value:"step",children:"Step"})]})]}),ve(zt,{space:2,children:[_(ui,{size:0,muted:!0,children:"Color"}),_(bn,{disabled:!c,as:"input",radius:2,style:{height:25},defaultValue:(v=(p=a.connectWith)==null?void 0:p.find(y=>y.id===s.id))==null?void 0:v.color,onChange:y=>i(a,s,{color:y.currentTarget.value}),type:"color"})]})]}),u+2
+
+
+
+
+
+ Vite App
+
+
+
+
+
+
+
diff --git a/lib/dist/cjs/index.js b/lib/dist/cjs/index.js
new file mode 100644
index 0000000..2c5d8eb
--- /dev/null
+++ b/lib/dist/cjs/index.js
@@ -0,0 +1,2 @@
+var e=require("react"),t=require("react/jsx-runtime");function o(e,t,o,n){Object.defineProperty(e,t,{get:o,set:n,enumerable:!0,configurable:!0})}o(module.exports,"Connect",(()=>c)),o(module.exports,"ConnectProvider",(()=>g)),o(module.exports,"ConnectLines",(()=>p));const n=(0,e.createContext)({elements:[],dispatch:()=>null});function r(){if(!(0,e.useContext)(n))throw new Error("Missing context value");return(0,e.useContext)(n)}function i(e,t){const{type:o,id:n,element:r,connectWith:i}=t,s=e?.elements?.some((e=>e.id===n)),c={id:n,element:r,connectWith:i||[]};if("add"===o&&r){if(!s)return{...e,elements:[...e.elements,c]};if(s){const t=[...e.elements].map((e=>e.id===n?c:e));return{...e,elements:t}}return e}return"remove"===o?{...e,elements:e.elements.map((e=>({...e,connectWith:e.connectWith?.filter((e=>e.id!==n))}))).filter((e=>e.id!==n))}:e}function s(o){const{children:r}=o,[s,c]=(0,e.useReducer)(i,{elements:[],dispatch:()=>null}),d=(0,e.useMemo)((()=>({elements:s.elements,dispatch:c})),[s]);return(0,t.jsx)(n.Provider,{value:d,children:r})}function c(t){const{children:o,id:n,connectWith:i}=t,{dispatch:s}=r(),c=(0,e.useRef)(),d=(0,e.useCallback)((()=>{s({type:"add",id:n,connectWith:i,element:c.current})}),[i,s,n]),l=(0,e.useMemo)((()=>{const{props:t}=o;return(0,e.cloneElement)(o,{...t,ref:e=>{c.current=e,"function"==typeof o&&t.ref(e)}})}),[o]);return(0,e.useEffect)((()=>{d()}),[t,d,c]),(0,e.useEffect)((()=>()=>{s({type:"remove",id:n})}),[s,n]),l}const d=e=>{const{paths:t,edge:o}=e;return`M ${t.map(((e,t)=>1===t&&"step"===o?`${e.x} ${e.y}`:1===t&&"bezier"===o?`C ${e.x} ${e.y}`:`${e.x} ${e.y}`)).join(" ")}`};function l(e){return e.element?e.element:document.querySelector(`#${e.id}`)}const m=[];function u(e){const{elements:t}=e;return t.filter((e=>(e?.connectWith||m).length>0)).map((e=>{const{connectWith:o}=e,n=t.filter((e=>o?.map((e=>e.id)).includes(e.id))).map((e=>({rect:l(e)?.getBoundingClientRect(),color:o?.find((t=>t.id===e.id))?.color||"#000000",edge:o?.find((t=>t.id===e.id))?.edge||"bezier",stroke:o?.find((t=>t.id===e.id))?.stroke||"solid",hasArrows:Boolean(o?.find((t=>t.id===e.id))?.hasArrows)})));if(0!==n.length)return{from:{rect:l(e)?.getBoundingClientRect()},to:n}})).filter(Boolean)}function a(e){const{from:t,to:o}=e,n=t?.rect,r=o?.rect;if(!n||!r)return;const i=function(e){const{from:t,to:o}=e,n=t.left-40o.right-40,r=t.bottomo.bottom&&n,s=t.left>o.right,c=t.right[...new Set([...c.map((e=>e.connectWith?.map((e=>e?.color)))).flat(),"#000000"])].filter(Boolean)),[c]),v=(0,e.useCallback)((()=>{m.current&&window.cancelAnimationFrame(m.current),m.current=window.requestAnimationFrame((()=>{const e=u({elements:c}).map((e=>{const{from:t,to:o}=e||{},n=o?.map((e=>{const o=a({from:t,to:e});if(!o)return;const n=d({paths:o,edge:e?.edge});return/\d/.test(n)?{d:n,...e}:void 0}));return n})).filter(Boolean).flat().filter((e=>Boolean(e)));r(e)}))}),[c]),g=(0,e.useCallback)((()=>{s(!0)}),[]),x=(0,e.useCallback)((()=>{s(!1)}),[]),w=(0,e.useCallback)((()=>{i&&v()}),[v,i]);(0,e.useEffect)((()=>{v()}),[v]),(0,e.useEffect)((()=>(window.addEventListener("resize",v,{passive:!0}),window.addEventListener("scroll",v,{passive:!0}),()=>{window.removeEventListener("resize",v),window.removeEventListener("scroll",v)})),[v]);const b=(0,e.useMemo)((()=>new ResizeObserver(v)),[v]);return(0,e.useEffect)((()=>(c.forEach((e=>{const t=l(e);t?.addEventListener("mousedown",g,{passive:!0}),t?.addEventListener("mouseup",x,{passive:!0}),t?.addEventListener("mousemove",w,{passive:!0}),t?.addEventListener("touchstart",g,{passive:!0}),t?.addEventListener("touchend",x,{passive:!0}),t?.addEventListener("touchmove",w,{passive:!0}),t&&b.observe(t)})),()=>{c.forEach((e=>{const t=l(e);t?.removeEventListener("mousedown",g),t?.removeEventListener("mouseup",x),t?.removeEventListener("mousemove",w),t?.removeEventListener("touchstart",g),t?.removeEventListener("touchend",x),t?.removeEventListener("touchmove",w),t&&(b.disconnect(),b.unobserve(t))}))})),[c,v,g,x,w,b]),(0,e.useMemo)((()=>(0,t.jsxs)("svg",{style:h,children:[p?.map((e=>(0,t.jsxs)("defs",{children:[(0,t.jsx)("marker",{id:`triangle-${e}`,markerHeight:"5",markerUnits:"strokeWidth",markerWidth:"5",orient:"auto",refX:"1",refY:"5",viewBox:"0 0 10 10",children:(0,t.jsx)("path",{d:"M 0 0 L 10 5 L 0 10 z",fill:e})}),(0,t.jsx)("marker",{id:`line-${e}`,markerHeight:"5",markerUnits:"strokeWidth",markerWidth:"10",orient:"auto",refX:"0",refY:"5",viewBox:"0 0 10 10",children:(0,t.jsx)("path",{d:"M 0 5 L 10 5",stroke:e,strokeWidth:"2",fill:"none"})})]},e))),n?.map((e=>(0,t.jsx)("path",{id:"p1",d:e?.d,fill:"none",stroke:e?.color,strokeWidth:"2",strokeDasharray:"dashed"===e?.stroke?4:0,strokeLinejoin:"round",markerEnd:`url(#${e?.hasArrows?"triangle":"line"}-${e?.color})`},e?.d)))]})),[p,n])}function v(){const{elements:e}=r();return(0,t.jsx)(p,{elements:e})}function g(e){const{children:o}=e;return(0,t.jsxs)(s,{children:[o,(0,t.jsx)(v,{})]})}
+//# sourceMappingURL=index.js.map
diff --git a/lib/dist/cjs/index.js.map b/lib/dist/cjs/index.js.map
new file mode 100644
index 0000000..a30a234
--- /dev/null
+++ b/lib/dist/cjs/index.js.map
@@ -0,0 +1 @@
+{"mappings":"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","sources":["elements/context.ts","elements/hooks.ts","elements/reducer.ts","elements/provider.tsx","Connect.tsx","lines/utils/pathify.ts","lines/utils/getElement.ts","lines/utils/getGroupedConnections.ts","lines/utils/getPathData.ts","lines/ConnectLines.tsx","ConnectProvider.tsx"],"sourcesContent":["import {createContext} from 'react'\nimport {ConnectElementsContextValue} from '../types'\n\nexport const ConnectElementsContext = createContext({\n elements: [],\n dispatch: () => null,\n})\n","import {useContext} from 'react'\nimport {ConnectElementsContext} from './context'\n\nexport function useConnectElements() {\n const ctxVal = useContext(ConnectElementsContext)\n\n if (!ctxVal) {\n throw new Error('Missing context value')\n }\n\n return useContext(ConnectElementsContext)\n}\n","import {ConnectElement, ConnectElementsContextValue, ConnectElementsReducerPayload} from '../types'\n\nexport function connectElementsReducer(\n state: ConnectElementsContextValue,\n payload: ConnectElementsReducerPayload\n): ConnectElementsContextValue {\n const {type, id, element, connectWith} = payload\n\n const exists = state?.elements?.some((l) => l.id === id)\n const connectWithArr = connectWith || []\n const node: ConnectElement & {element?: HTMLElement | null} = {\n id,\n element,\n connectWith: connectWithArr,\n }\n\n if (type === 'add' && element) {\n if (!exists) {\n return {\n ...state,\n elements: [...state.elements, node],\n }\n }\n\n if (exists) {\n const next = [...state.elements].map((el) => {\n if (el.id === id) {\n return node\n }\n\n return el\n })\n\n return {...state, elements: next}\n }\n\n return state\n }\n\n if (type === 'remove') {\n return {\n ...state,\n elements: state.elements\n .map((x) => {\n return {\n ...x,\n connectWith: x.connectWith?.filter((y) => y.id !== id),\n }\n })\n .filter((el) => el.id !== id),\n }\n }\n\n return state\n}\n","import {useMemo, useReducer} from 'react'\nimport {ConnectElementsContext} from './context'\nimport {connectElementsReducer} from './reducer'\n\ninterface ConnectElementsProviderProps {\n children: React.ReactNode\n}\n\nexport function ConnectElementsProvider(props: ConnectElementsProviderProps) {\n const {children} = props\n const [state, dispatch] = useReducer(connectElementsReducer, {\n elements: [],\n dispatch: () => null,\n })\n\n const ctxVal = useMemo(\n () => ({\n elements: state.elements,\n dispatch: dispatch,\n }),\n [state]\n )\n\n return (\n {children}\n )\n}\n","import React, {cloneElement, useCallback, useEffect, useMemo, useRef} from 'react'\nimport {useConnectElements} from './elements'\nimport {ConnectElement} from './types'\n\ninterface ConnectProps extends Omit {\n children: React.ReactElement\n}\n\nexport function Connect(props: ConnectProps) {\n const {children, id, connectWith} = props\n const {dispatch} = useConnectElements()\n const nodeRef = useRef()\n\n const handleAdd = useCallback(() => {\n dispatch({\n type: 'add',\n id,\n connectWith,\n element: nodeRef.current,\n })\n }, [connectWith, dispatch, id])\n\n const clone = useMemo(() => {\n const {props: childProps} = children\n\n return cloneElement(children, {\n ...childProps,\n ref: (node: HTMLElement) => {\n nodeRef.current = node\n\n if (typeof children === 'function') childProps.ref(node)\n },\n })\n }, [children])\n\n useEffect(() => {\n handleAdd()\n }, [props, handleAdd, nodeRef])\n\n useEffect(() => {\n return () => {\n dispatch({\n type: 'remove',\n id,\n })\n }\n }, [dispatch, id])\n\n return clone\n}\n","import {Edge} from '../../types'\n\ninterface PathifyProps {\n paths: {x: string | number; y: string | number}[]\n edge?: Edge\n}\n\nexport const pathify = (props: PathifyProps) => {\n const {paths, edge} = props\n\n const path = `M ${paths\n .map((p, index) => {\n if (index === 1 && edge === 'step') return `${p.x} ${p.y}`\n if (index === 1 && edge === 'bezier') return `C ${p.x} ${p.y}`\n\n return `${p.x} ${p.y}`\n })\n .join(' ')}`\n\n return path\n}\n","import {ConnectElement} from '../../types'\n\nexport function getElement(el: ConnectElement & {element?: HTMLElement}) {\n if (!el.element) {\n return document.querySelector(`#${el.id}`)\n }\n\n return el.element\n}\n","import {ConnectElement} from '../../types'\nimport {getElement} from './getElement'\n\nconst EMPTY_ARRAY: [] = []\n\ninterface GetGroupedConnectionsProps {\n elements: ConnectElement[]\n}\n\nexport function getGroupedConnections(props: GetGroupedConnectionsProps) {\n const {elements} = props\n\n // const connections = elements?.map((e) => e.connectWith?.map((x) => x?.id)).flat()\n\n const grouped = elements\n .filter((e) => (e?.connectWith || EMPTY_ARRAY).length > 0)\n .map((el) => {\n const {connectWith} = el\n\n // const connectionsLen = connections.filter((y) => y === el.id)?.length || 0\n\n const connectEls = elements\n .filter((c) => connectWith?.map((a) => a.id).includes(c.id))\n .map((x) => {\n return {\n rect: getElement(x)?.getBoundingClientRect(),\n color: connectWith?.find((a) => a.id === x.id)?.color || '#000000',\n edge: connectWith?.find((a) => a.id === x.id)?.edge || 'bezier',\n stroke: connectWith?.find((a) => a.id === x.id)?.stroke || 'solid',\n hasArrows: Boolean(connectWith?.find((a) => a.id === x.id)?.hasArrows),\n // connectionsLen: connectionsLen,\n }\n })\n\n if (connectEls.length === 0) return\n\n return {\n from: {\n rect: getElement(el)?.getBoundingClientRect(),\n },\n to: connectEls,\n }\n })\n .filter(Boolean)\n\n return grouped\n}\n","interface GetPathDataProps {\n from?: {\n rect: DOMRect | undefined\n }\n to?: {\n rect: DOMRect | undefined\n }\n}\n\nconst LINE_OFFSET = 9\nconst POS_OFFSET = 40\n\nfunction getPosition(props: {from: DOMRect; to: DOMRect}) {\n const {from, to} = props\n\n const allowYConnect =\n from.left - POS_OFFSET < to.right && from.right + to.width > to.right - POS_OFFSET\n\n const bottomToTop = from.bottom < to.top && allowYConnect\n const topToBottom = from.top > to.bottom && allowYConnect\n const rightToLeft = from.left > to.right\n const leftToRight = from.right < to.left\n\n if (bottomToTop) return 'bottom-to-top'\n if (topToBottom) return 'top-to-bottom'\n if (rightToLeft) return 'right-to-left'\n if (leftToRight) return 'left-to-right'\n}\n\nexport function getPathData(props: GetPathDataProps) {\n const {from, to} = props\n const fromRect = from?.rect\n const toRect = to?.rect\n\n if (!fromRect || !toRect) return\n\n const position = getPosition({from: fromRect, to: toRect})\n\n switch (position) {\n case 'bottom-to-top': {\n return [\n {\n x: fromRect?.left + fromRect.width / 2,\n y: fromRect?.bottom,\n },\n {\n x: fromRect?.left + fromRect.width / 2,\n y: fromRect.bottom - (fromRect.bottom - toRect.top) / 2,\n },\n {\n x: toRect?.left + toRect.width / 2,\n y: fromRect.bottom - (fromRect.bottom - toRect.top) / 2,\n },\n {\n x: toRect?.left + toRect.width / 2,\n y: toRect.top - LINE_OFFSET,\n },\n ]\n }\n\n case 'top-to-bottom': {\n return [\n {\n x: fromRect?.left + fromRect.width / 2,\n y: fromRect?.top,\n },\n {\n x: fromRect?.left + fromRect.width / 2,\n y: fromRect.top - (fromRect.top - toRect.bottom) / 2,\n },\n {\n x: toRect?.left + toRect.width / 2,\n y: fromRect.top - (fromRect.top - toRect.bottom) / 2,\n },\n {\n x: toRect?.left + toRect.width / 2,\n y: toRect.bottom + LINE_OFFSET,\n },\n ]\n }\n\n case 'right-to-left': {\n return [\n {\n x: fromRect?.left,\n y: fromRect?.bottom - fromRect.height / 2,\n },\n {\n x: (toRect.right + fromRect.left) / 2,\n y: fromRect?.bottom - fromRect.height / 2,\n },\n {\n x: (toRect.right + fromRect.left) / 2,\n y: toRect.top + toRect.height / 2,\n },\n {\n x: toRect.right + LINE_OFFSET,\n y: toRect.top + toRect.height / 2,\n },\n ]\n }\n\n case 'left-to-right': {\n return [\n {\n x: fromRect?.right,\n y: fromRect?.bottom - fromRect.height / 2,\n },\n {\n x: (toRect.left + fromRect.right) / 2,\n y: fromRect?.bottom - fromRect.height / 2,\n },\n {\n x: (toRect.left + fromRect.right) / 2,\n y: toRect.top + toRect.height / 2,\n },\n {\n x: toRect.left - LINE_OFFSET,\n y: toRect.top + toRect.height / 2,\n },\n ]\n }\n\n default:\n return []\n }\n}\n","import {useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {ConnectElement, Edge, Stroke} from '../types'\nimport {getElement, getGroupedConnections, getPathData, pathify} from './utils'\n\nconst SVG_STYLE: React.CSSProperties = {\n position: 'fixed',\n top: '0',\n left: '0',\n right: '0',\n bottom: '0',\n pointerEvents: 'none',\n width: '100%',\n height: '100%',\n}\n\nconst DEFAULT_COLOR = '#000000'\nconst EMPTY_ARRAY: [] = []\n\ntype PointsData = (\n | {\n rect: DOMRect | undefined\n color: string | undefined\n edge: Edge\n stroke: Stroke\n d: string\n hasArrows: boolean\n }\n | undefined\n)[]\n\ninterface ConnectLinesProps {\n elements: ConnectElement[]\n}\n\nexport function ConnectLines(props: ConnectLinesProps) {\n const [pointsData, setPointsData] = useState(EMPTY_ARRAY)\n const [isInteracting, setIsInteracting] = useState(false)\n const {elements} = props\n const raf = useRef()\n\n /**\n * Create array of all colors configured.\n * These colors is used to render the svg markers (e.g arrows).\n */\n const colors = useMemo(\n () =>\n [\n ...new Set([\n ...elements.map((e) => e.connectWith?.map((c) => c?.color)).flat(),\n DEFAULT_COLOR,\n ]),\n ].filter(Boolean),\n [elements]\n )\n\n const handleCalcLines = useCallback(() => {\n if (raf.current) {\n window.cancelAnimationFrame(raf.current)\n }\n\n raf.current = window.requestAnimationFrame(() => {\n /**\n * The `getGroupedConnections` function returns:\n *\n * {\n * from: DOMRect,\n * to: {\n * rect: DOMRect,\n * color: string,\n * edge: string,\n * stroke: string,\n * hasArrows: boolean\n * }[]\n * }\n */\n const groupedConnections = getGroupedConnections({elements})\n\n const points = groupedConnections\n .map((data) => {\n const {from, to: toArray} = data || {}\n\n const pathDataArr = toArray?.map((to) => {\n /**\n * The `getPathData` function returns an array of objects with\n * x and y coordinates for the line.\n */\n const pathData = getPathData({from: from, to: to})\n\n if (!pathData) return\n\n /**\n * The `pathify` functions returns a svg-readable string of the coordinates\n */\n const path = pathify({paths: pathData, edge: to?.edge})\n\n /**\n * Dummy validation of the path\n */\n if (!/\\d/.test(path)) return\n\n /**\n * Return the path (d) together with other relevant data such as color, stroke, edge.\n */\n return {\n d: path,\n ...to,\n }\n })\n\n return pathDataArr\n })\n .filter(Boolean)\n .flat()\n\n const data = points.filter((p) => Boolean(p))\n\n setPointsData(data)\n })\n }, [elements])\n\n /**\n * Handle drag and drop gestures and update the paths\n */\n const handleStartInteracting = useCallback(() => {\n setIsInteracting(true)\n }, [])\n\n const handleStopInteracting = useCallback(() => {\n setIsInteracting(false)\n }, [])\n\n const handleUpdateLines = useCallback(() => {\n if (isInteracting) handleCalcLines()\n }, [handleCalcLines, isInteracting])\n\n useEffect(() => {\n handleCalcLines()\n }, [handleCalcLines])\n\n useEffect(() => {\n window.addEventListener('resize', handleCalcLines, {passive: true})\n window.addEventListener('scroll', handleCalcLines, {passive: true})\n\n return () => {\n window.removeEventListener('resize', handleCalcLines)\n window.removeEventListener('scroll', handleCalcLines)\n }\n }, [handleCalcLines])\n\n const ro = useMemo(() => new ResizeObserver(handleCalcLines), [handleCalcLines])\n\n useEffect(() => {\n elements.forEach((el) => {\n const element = getElement(el)\n\n element?.addEventListener('mousedown', handleStartInteracting, {passive: true})\n element?.addEventListener('mouseup', handleStopInteracting, {passive: true})\n element?.addEventListener('mousemove', handleUpdateLines, {passive: true})\n element?.addEventListener('touchstart', handleStartInteracting, {passive: true})\n element?.addEventListener('touchend', handleStopInteracting, {passive: true})\n element?.addEventListener('touchmove', handleUpdateLines, {passive: true})\n\n if (element) {\n ro.observe(element)\n }\n })\n\n return () => {\n elements.forEach((el) => {\n const element = getElement(el)\n\n element?.removeEventListener('mousedown', handleStartInteracting)\n element?.removeEventListener('mouseup', handleStopInteracting)\n element?.removeEventListener('mousemove', handleUpdateLines)\n element?.removeEventListener('touchstart', handleStartInteracting)\n element?.removeEventListener('touchend', handleStopInteracting)\n element?.removeEventListener('touchmove', handleUpdateLines)\n\n if (element) {\n ro.disconnect()\n ro.unobserve(element)\n }\n })\n }\n }, [\n elements,\n handleCalcLines,\n handleStartInteracting,\n handleStopInteracting,\n handleUpdateLines,\n ro,\n ])\n\n return useMemo(\n () => (\n \n ),\n [colors, pointsData]\n )\n}\n","import React from 'react'\nimport {ConnectElementsProvider, useConnectElements} from './elements'\nimport {ConnectLines} from './lines'\n\ninterface ConnectProviderProps {\n children: React.ReactNode\n}\n\nfunction ConnectProviderInner() {\n const {elements} = useConnectElements()\n\n return \n}\n\nexport function ConnectProvider(props: ConnectProviderProps) {\n const {children} = props\n\n return (\n \n {children}\n \n \n )\n}\n"],"names":["$c81829298c0be717$export$b18e34ac3520f2e5","$cPJmq$react","createContext","elements","dispatch","$61adfabb2f38684e$export$fc84c22acd302ca7","useContext","Error","$96743ad87b9e841b$export$e1957580bb403527","state","payload","type","id","element","connectWith","exists","some","l","node","next","map","el","x","filter","y","$4e6eeef5ea3a8411$export$5c92df8ce16beba9","props","children","useReducer","ctxVal","useMemo","$cPJmq$reactjsxruntime","jsx","Provider","value","$e800e1848c86903d$export$59e6910693f047c2","nodeRef","useRef","handleAdd","useCallback","current","clone","childProps","cloneElement","ref","useEffect","$7494e3fa284d64f1$export$def641b22e0a4283","paths","edge","p","index","join","$084cb7a41b2ad8c5$export$d16800b7e59a8051","document","querySelector","$7fbeb89c00c7d91a$var$EMPTY_ARRAY","$7fbeb89c00c7d91a$export$790ca4df398846a2","e","length","connectEls","c","a","includes","rect","getBoundingClientRect","color","find","stroke","hasArrows","Boolean","from","to","$23d18a97be95b3fa$export$7709b8005774fb51","fromRect","toRect","position","allowYConnect","left","right","width","bottomToTop","bottom","top","topToBottom","rightToLeft","leftToRight","$23d18a97be95b3fa$var$getPosition","height","$d961c3c0afed5118$var$SVG_STYLE","pointerEvents","$d961c3c0afed5118$var$EMPTY_ARRAY","$d961c3c0afed5118$export$775ba819c8141467","pointsData","setPointsData","useState","isInteracting","setIsInteracting","raf","colors","Set","flat","handleCalcLines","window","cancelAnimationFrame","requestAnimationFrame","data1","data","toArray","pathDataArr","pathData","path","test","d","handleStartInteracting","handleStopInteracting","handleUpdateLines","addEventListener","passive","removeEventListener","ro","ResizeObserver","forEach","observe","disconnect","unobserve","jsxs","style","markerHeight","markerUnits","markerWidth","orient","refX","refY","viewBox","fill","strokeWidth","strokeDasharray","strokeLinejoin","markerEnd","$4f2fb7e80f557106$var$ConnectProviderInner","$4f2fb7e80f557106$export$230737e70939b618"],"version":3,"file":"index.js.map"}
\ No newline at end of file
diff --git a/lib/dist/esm/index.js b/lib/dist/esm/index.js
new file mode 100644
index 0000000..0cdbedd
--- /dev/null
+++ b/lib/dist/esm/index.js
@@ -0,0 +1,2 @@
+import{useRef as e,useCallback as t,useMemo as o,cloneElement as n,useEffect as r,createContext as i,useContext as s,useReducer as c,useState as d}from"react";import{jsx as l,jsxs as a}from"react/jsx-runtime";const m=i({elements:[],dispatch:()=>null});function h(){if(!s(m))throw new Error("Missing context value");return s(m)}function f(e,t){const{type:o,id:n,element:r,connectWith:i}=t,s=e?.elements?.some((e=>e.id===n)),c={id:n,element:r,connectWith:i||[]};if("add"===o&&r){if(!s)return{...e,elements:[...e.elements,c]};if(s){const t=[...e.elements].map((e=>e.id===n?c:e));return{...e,elements:t}}return e}return"remove"===o?{...e,elements:e.elements.map((e=>({...e,connectWith:e.connectWith?.filter((e=>e.id!==n))}))).filter((e=>e.id!==n))}:e}function u(e){const{children:t}=e,[n,r]=c(f,{elements:[],dispatch:()=>null}),i=o((()=>({elements:n.elements,dispatch:r})),[n]);return l(m.Provider,{value:i,children:t})}function p(i){const{children:s,id:c,connectWith:d}=i,{dispatch:l}=h(),a=e(),m=t((()=>{l({type:"add",id:c,connectWith:d,element:a.current})}),[d,l,c]),f=o((()=>{const{props:e}=s;return n(s,{...e,ref:t=>{a.current=t,"function"==typeof s&&e.ref(t)}})}),[s]);return r((()=>{m()}),[i,m,a]),r((()=>()=>{l({type:"remove",id:c})}),[l,c]),f}const v=e=>{const{paths:t,edge:o}=e;return`M ${t.map(((e,t)=>1===t&&"step"===o?`${e.x} ${e.y}`:1===t&&"bezier"===o?`C ${e.x} ${e.y}`:`${e.x} ${e.y}`)).join(" ")}`};function g(e){return e.element?e.element:document.querySelector(`#${e.id}`)}const w=[];function x(e){const{elements:t}=e;return t.filter((e=>(e?.connectWith||w).length>0)).map((e=>{const{connectWith:o}=e,n=t.filter((e=>o?.map((e=>e.id)).includes(e.id))).map((e=>({rect:g(e)?.getBoundingClientRect(),color:o?.find((t=>t.id===e.id))?.color||"#000000",edge:o?.find((t=>t.id===e.id))?.edge||"bezier",stroke:o?.find((t=>t.id===e.id))?.stroke||"solid",hasArrows:Boolean(o?.find((t=>t.id===e.id))?.hasArrows)})));if(0!==n.length)return{from:{rect:g(e)?.getBoundingClientRect()},to:n}})).filter(Boolean)}function y(e){const{from:t,to:o}=e,n=t?.rect,r=o?.rect;if(!n||!r)return;const i=function(e){const{from:t,to:o}=e,n=t.left-40o.right-40,r=t.bottomo.bottom&&n,s=t.left>o.right,c=t.right[...new Set([...h.map((e=>e.connectWith?.map((e=>e?.color)))).flat(),"#000000"])].filter(Boolean)),[h]),p=t((()=>{f.current&&window.cancelAnimationFrame(f.current),f.current=window.requestAnimationFrame((()=>{const e=x({elements:h}).map((e=>{const{from:t,to:o}=e||{},n=o?.map((e=>{const o=y({from:t,to:e});if(!o)return;const n=v({paths:o,edge:e?.edge});return/\d/.test(n)?{d:n,...e}:void 0}));return n})).filter(Boolean).flat().filter((e=>Boolean(e)));s(e)}))}),[h]),w=t((()=>{m(!0)}),[]),k=t((()=>{m(!1)}),[]),L=t((()=>{c&&p()}),[p,c]);r((()=>{p()}),[p]),r((()=>(window.addEventListener("resize",p,{passive:!0}),window.addEventListener("scroll",p,{passive:!0}),()=>{window.removeEventListener("resize",p),window.removeEventListener("scroll",p)})),[p]);const W=o((()=>new ResizeObserver(p)),[p]);return r((()=>(h.forEach((e=>{const t=g(e);t?.addEventListener("mousedown",w,{passive:!0}),t?.addEventListener("mouseup",k,{passive:!0}),t?.addEventListener("mousemove",L,{passive:!0}),t?.addEventListener("touchstart",w,{passive:!0}),t?.addEventListener("touchend",k,{passive:!0}),t?.addEventListener("touchmove",L,{passive:!0}),t&&W.observe(t)})),()=>{h.forEach((e=>{const t=g(e);t?.removeEventListener("mousedown",w),t?.removeEventListener("mouseup",k),t?.removeEventListener("mousemove",L),t?.removeEventListener("touchstart",w),t?.removeEventListener("touchend",k),t?.removeEventListener("touchmove",L),t&&(W.disconnect(),W.unobserve(t))}))})),[h,p,w,k,L,W]),o((()=>a("svg",{style:b,children:[u?.map((e=>a("defs",{children:[l("marker",{id:`triangle-${e}`,markerHeight:"5",markerUnits:"strokeWidth",markerWidth:"5",orient:"auto",refX:"1",refY:"5",viewBox:"0 0 10 10",children:l("path",{d:"M 0 0 L 10 5 L 0 10 z",fill:e})}),l("marker",{id:`line-${e}`,markerHeight:"5",markerUnits:"strokeWidth",markerWidth:"10",orient:"auto",refX:"0",refY:"5",viewBox:"0 0 10 10",children:l("path",{d:"M 0 5 L 10 5",stroke:e,strokeWidth:"2",fill:"none"})})]},e))),i?.map((e=>l("path",{id:"p1",d:e?.d,fill:"none",stroke:e?.color,strokeWidth:"2",strokeDasharray:"dashed"===e?.stroke?4:0,strokeLinejoin:"round",markerEnd:`url(#${e?.hasArrows?"triangle":"line"}-${e?.color})`},e?.d)))]})),[u,i])}function L(){const{elements:e}=h();return l(k,{elements:e})}function W(e){const{children:t}=e;return a(u,{children:[t,l(L,{})]})}export{p as Connect,W as ConnectProvider,k as ConnectLines};
+//# sourceMappingURL=index.js.map
diff --git a/lib/dist/esm/index.js.map b/lib/dist/esm/index.js.map
new file mode 100644
index 0000000..939f739
--- /dev/null
+++ b/lib/dist/esm/index.js.map
@@ -0,0 +1 @@
+{"mappings":"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","sources":["elements/context.ts","elements/hooks.ts","elements/reducer.ts","elements/provider.tsx","Connect.tsx","lines/utils/pathify.ts","lines/utils/getElement.ts","lines/utils/getGroupedConnections.ts","lines/utils/getPathData.ts","lines/ConnectLines.tsx","ConnectProvider.tsx"],"sourcesContent":["import {createContext} from 'react'\nimport {ConnectElementsContextValue} from '../types'\n\nexport const ConnectElementsContext = createContext({\n elements: [],\n dispatch: () => null,\n})\n","import {useContext} from 'react'\nimport {ConnectElementsContext} from './context'\n\nexport function useConnectElements() {\n const ctxVal = useContext(ConnectElementsContext)\n\n if (!ctxVal) {\n throw new Error('Missing context value')\n }\n\n return useContext(ConnectElementsContext)\n}\n","import {ConnectElement, ConnectElementsContextValue, ConnectElementsReducerPayload} from '../types'\n\nexport function connectElementsReducer(\n state: ConnectElementsContextValue,\n payload: ConnectElementsReducerPayload\n): ConnectElementsContextValue {\n const {type, id, element, connectWith} = payload\n\n const exists = state?.elements?.some((l) => l.id === id)\n const connectWithArr = connectWith || []\n const node: ConnectElement & {element?: HTMLElement | null} = {\n id,\n element,\n connectWith: connectWithArr,\n }\n\n if (type === 'add' && element) {\n if (!exists) {\n return {\n ...state,\n elements: [...state.elements, node],\n }\n }\n\n if (exists) {\n const next = [...state.elements].map((el) => {\n if (el.id === id) {\n return node\n }\n\n return el\n })\n\n return {...state, elements: next}\n }\n\n return state\n }\n\n if (type === 'remove') {\n return {\n ...state,\n elements: state.elements\n .map((x) => {\n return {\n ...x,\n connectWith: x.connectWith?.filter((y) => y.id !== id),\n }\n })\n .filter((el) => el.id !== id),\n }\n }\n\n return state\n}\n","import {useMemo, useReducer} from 'react'\nimport {ConnectElementsContext} from './context'\nimport {connectElementsReducer} from './reducer'\n\ninterface ConnectElementsProviderProps {\n children: React.ReactNode\n}\n\nexport function ConnectElementsProvider(props: ConnectElementsProviderProps) {\n const {children} = props\n const [state, dispatch] = useReducer(connectElementsReducer, {\n elements: [],\n dispatch: () => null,\n })\n\n const ctxVal = useMemo(\n () => ({\n elements: state.elements,\n dispatch: dispatch,\n }),\n [state]\n )\n\n return (\n {children}\n )\n}\n","import React, {cloneElement, useCallback, useEffect, useMemo, useRef} from 'react'\nimport {useConnectElements} from './elements'\nimport {ConnectElement} from './types'\n\ninterface ConnectProps extends Omit {\n children: React.ReactElement\n}\n\nexport function Connect(props: ConnectProps) {\n const {children, id, connectWith} = props\n const {dispatch} = useConnectElements()\n const nodeRef = useRef()\n\n const handleAdd = useCallback(() => {\n dispatch({\n type: 'add',\n id,\n connectWith,\n element: nodeRef.current,\n })\n }, [connectWith, dispatch, id])\n\n const clone = useMemo(() => {\n const {props: childProps} = children\n\n return cloneElement(children, {\n ...childProps,\n ref: (node: HTMLElement) => {\n nodeRef.current = node\n\n if (typeof children === 'function') childProps.ref(node)\n },\n })\n }, [children])\n\n useEffect(() => {\n handleAdd()\n }, [props, handleAdd, nodeRef])\n\n useEffect(() => {\n return () => {\n dispatch({\n type: 'remove',\n id,\n })\n }\n }, [dispatch, id])\n\n return clone\n}\n","import {Edge} from '../../types'\n\ninterface PathifyProps {\n paths: {x: string | number; y: string | number}[]\n edge?: Edge\n}\n\nexport const pathify = (props: PathifyProps) => {\n const {paths, edge} = props\n\n const path = `M ${paths\n .map((p, index) => {\n if (index === 1 && edge === 'step') return `${p.x} ${p.y}`\n if (index === 1 && edge === 'bezier') return `C ${p.x} ${p.y}`\n\n return `${p.x} ${p.y}`\n })\n .join(' ')}`\n\n return path\n}\n","import {ConnectElement} from '../../types'\n\nexport function getElement(el: ConnectElement & {element?: HTMLElement}) {\n if (!el.element) {\n return document.querySelector(`#${el.id}`)\n }\n\n return el.element\n}\n","import {ConnectElement} from '../../types'\nimport {getElement} from './getElement'\n\nconst EMPTY_ARRAY: [] = []\n\ninterface GetGroupedConnectionsProps {\n elements: ConnectElement[]\n}\n\nexport function getGroupedConnections(props: GetGroupedConnectionsProps) {\n const {elements} = props\n\n // const connections = elements?.map((e) => e.connectWith?.map((x) => x?.id)).flat()\n\n const grouped = elements\n .filter((e) => (e?.connectWith || EMPTY_ARRAY).length > 0)\n .map((el) => {\n const {connectWith} = el\n\n // const connectionsLen = connections.filter((y) => y === el.id)?.length || 0\n\n const connectEls = elements\n .filter((c) => connectWith?.map((a) => a.id).includes(c.id))\n .map((x) => {\n return {\n rect: getElement(x)?.getBoundingClientRect(),\n color: connectWith?.find((a) => a.id === x.id)?.color || '#000000',\n edge: connectWith?.find((a) => a.id === x.id)?.edge || 'bezier',\n stroke: connectWith?.find((a) => a.id === x.id)?.stroke || 'solid',\n hasArrows: Boolean(connectWith?.find((a) => a.id === x.id)?.hasArrows),\n // connectionsLen: connectionsLen,\n }\n })\n\n if (connectEls.length === 0) return\n\n return {\n from: {\n rect: getElement(el)?.getBoundingClientRect(),\n },\n to: connectEls,\n }\n })\n .filter(Boolean)\n\n return grouped\n}\n","interface GetPathDataProps {\n from?: {\n rect: DOMRect | undefined\n }\n to?: {\n rect: DOMRect | undefined\n }\n}\n\nconst LINE_OFFSET = 9\nconst POS_OFFSET = 40\n\nfunction getPosition(props: {from: DOMRect; to: DOMRect}) {\n const {from, to} = props\n\n const allowYConnect =\n from.left - POS_OFFSET < to.right && from.right + to.width > to.right - POS_OFFSET\n\n const bottomToTop = from.bottom < to.top && allowYConnect\n const topToBottom = from.top > to.bottom && allowYConnect\n const rightToLeft = from.left > to.right\n const leftToRight = from.right < to.left\n\n if (bottomToTop) return 'bottom-to-top'\n if (topToBottom) return 'top-to-bottom'\n if (rightToLeft) return 'right-to-left'\n if (leftToRight) return 'left-to-right'\n}\n\nexport function getPathData(props: GetPathDataProps) {\n const {from, to} = props\n const fromRect = from?.rect\n const toRect = to?.rect\n\n if (!fromRect || !toRect) return\n\n const position = getPosition({from: fromRect, to: toRect})\n\n switch (position) {\n case 'bottom-to-top': {\n return [\n {\n x: fromRect?.left + fromRect.width / 2,\n y: fromRect?.bottom,\n },\n {\n x: fromRect?.left + fromRect.width / 2,\n y: fromRect.bottom - (fromRect.bottom - toRect.top) / 2,\n },\n {\n x: toRect?.left + toRect.width / 2,\n y: fromRect.bottom - (fromRect.bottom - toRect.top) / 2,\n },\n {\n x: toRect?.left + toRect.width / 2,\n y: toRect.top - LINE_OFFSET,\n },\n ]\n }\n\n case 'top-to-bottom': {\n return [\n {\n x: fromRect?.left + fromRect.width / 2,\n y: fromRect?.top,\n },\n {\n x: fromRect?.left + fromRect.width / 2,\n y: fromRect.top - (fromRect.top - toRect.bottom) / 2,\n },\n {\n x: toRect?.left + toRect.width / 2,\n y: fromRect.top - (fromRect.top - toRect.bottom) / 2,\n },\n {\n x: toRect?.left + toRect.width / 2,\n y: toRect.bottom + LINE_OFFSET,\n },\n ]\n }\n\n case 'right-to-left': {\n return [\n {\n x: fromRect?.left,\n y: fromRect?.bottom - fromRect.height / 2,\n },\n {\n x: (toRect.right + fromRect.left) / 2,\n y: fromRect?.bottom - fromRect.height / 2,\n },\n {\n x: (toRect.right + fromRect.left) / 2,\n y: toRect.top + toRect.height / 2,\n },\n {\n x: toRect.right + LINE_OFFSET,\n y: toRect.top + toRect.height / 2,\n },\n ]\n }\n\n case 'left-to-right': {\n return [\n {\n x: fromRect?.right,\n y: fromRect?.bottom - fromRect.height / 2,\n },\n {\n x: (toRect.left + fromRect.right) / 2,\n y: fromRect?.bottom - fromRect.height / 2,\n },\n {\n x: (toRect.left + fromRect.right) / 2,\n y: toRect.top + toRect.height / 2,\n },\n {\n x: toRect.left - LINE_OFFSET,\n y: toRect.top + toRect.height / 2,\n },\n ]\n }\n\n default:\n return []\n }\n}\n","import {useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {ConnectElement, Edge, Stroke} from '../types'\nimport {getElement, getGroupedConnections, getPathData, pathify} from './utils'\n\nconst SVG_STYLE: React.CSSProperties = {\n position: 'fixed',\n top: '0',\n left: '0',\n right: '0',\n bottom: '0',\n pointerEvents: 'none',\n width: '100%',\n height: '100%',\n}\n\nconst DEFAULT_COLOR = '#000000'\nconst EMPTY_ARRAY: [] = []\n\ntype PointsData = (\n | {\n rect: DOMRect | undefined\n color: string | undefined\n edge: Edge\n stroke: Stroke\n d: string\n hasArrows: boolean\n }\n | undefined\n)[]\n\ninterface ConnectLinesProps {\n elements: ConnectElement[]\n}\n\nexport function ConnectLines(props: ConnectLinesProps) {\n const [pointsData, setPointsData] = useState(EMPTY_ARRAY)\n const [isInteracting, setIsInteracting] = useState(false)\n const {elements} = props\n const raf = useRef()\n\n /**\n * Create array of all colors configured.\n * These colors is used to render the svg markers (e.g arrows).\n */\n const colors = useMemo(\n () =>\n [\n ...new Set([\n ...elements.map((e) => e.connectWith?.map((c) => c?.color)).flat(),\n DEFAULT_COLOR,\n ]),\n ].filter(Boolean),\n [elements]\n )\n\n const handleCalcLines = useCallback(() => {\n if (raf.current) {\n window.cancelAnimationFrame(raf.current)\n }\n\n raf.current = window.requestAnimationFrame(() => {\n /**\n * The `getGroupedConnections` function returns:\n *\n * {\n * from: DOMRect,\n * to: {\n * rect: DOMRect,\n * color: string,\n * edge: string,\n * stroke: string,\n * hasArrows: boolean\n * }[]\n * }\n */\n const groupedConnections = getGroupedConnections({elements})\n\n const points = groupedConnections\n .map((data) => {\n const {from, to: toArray} = data || {}\n\n const pathDataArr = toArray?.map((to) => {\n /**\n * The `getPathData` function returns an array of objects with\n * x and y coordinates for the line.\n */\n const pathData = getPathData({from: from, to: to})\n\n if (!pathData) return\n\n /**\n * The `pathify` functions returns a svg-readable string of the coordinates\n */\n const path = pathify({paths: pathData, edge: to?.edge})\n\n /**\n * Dummy validation of the path\n */\n if (!/\\d/.test(path)) return\n\n /**\n * Return the path (d) together with other relevant data such as color, stroke, edge.\n */\n return {\n d: path,\n ...to,\n }\n })\n\n return pathDataArr\n })\n .filter(Boolean)\n .flat()\n\n const data = points.filter((p) => Boolean(p))\n\n setPointsData(data)\n })\n }, [elements])\n\n /**\n * Handle drag and drop gestures and update the paths\n */\n const handleStartInteracting = useCallback(() => {\n setIsInteracting(true)\n }, [])\n\n const handleStopInteracting = useCallback(() => {\n setIsInteracting(false)\n }, [])\n\n const handleUpdateLines = useCallback(() => {\n if (isInteracting) handleCalcLines()\n }, [handleCalcLines, isInteracting])\n\n useEffect(() => {\n handleCalcLines()\n }, [handleCalcLines])\n\n useEffect(() => {\n window.addEventListener('resize', handleCalcLines, {passive: true})\n window.addEventListener('scroll', handleCalcLines, {passive: true})\n\n return () => {\n window.removeEventListener('resize', handleCalcLines)\n window.removeEventListener('scroll', handleCalcLines)\n }\n }, [handleCalcLines])\n\n const ro = useMemo(() => new ResizeObserver(handleCalcLines), [handleCalcLines])\n\n useEffect(() => {\n elements.forEach((el) => {\n const element = getElement(el)\n\n element?.addEventListener('mousedown', handleStartInteracting, {passive: true})\n element?.addEventListener('mouseup', handleStopInteracting, {passive: true})\n element?.addEventListener('mousemove', handleUpdateLines, {passive: true})\n element?.addEventListener('touchstart', handleStartInteracting, {passive: true})\n element?.addEventListener('touchend', handleStopInteracting, {passive: true})\n element?.addEventListener('touchmove', handleUpdateLines, {passive: true})\n\n if (element) {\n ro.observe(element)\n }\n })\n\n return () => {\n elements.forEach((el) => {\n const element = getElement(el)\n\n element?.removeEventListener('mousedown', handleStartInteracting)\n element?.removeEventListener('mouseup', handleStopInteracting)\n element?.removeEventListener('mousemove', handleUpdateLines)\n element?.removeEventListener('touchstart', handleStartInteracting)\n element?.removeEventListener('touchend', handleStopInteracting)\n element?.removeEventListener('touchmove', handleUpdateLines)\n\n if (element) {\n ro.disconnect()\n ro.unobserve(element)\n }\n })\n }\n }, [\n elements,\n handleCalcLines,\n handleStartInteracting,\n handleStopInteracting,\n handleUpdateLines,\n ro,\n ])\n\n return useMemo(\n () => (\n \n ),\n [colors, pointsData]\n )\n}\n","import React from 'react'\nimport {ConnectElementsProvider, useConnectElements} from './elements'\nimport {ConnectLines} from './lines'\n\ninterface ConnectProviderProps {\n children: React.ReactNode\n}\n\nfunction ConnectProviderInner() {\n const {elements} = useConnectElements()\n\n return \n}\n\nexport function ConnectProvider(props: ConnectProviderProps) {\n const {children} = props\n\n return (\n \n {children}\n \n \n )\n}\n"],"names":["$232c7e68ffd99198$export$b18e34ac3520f2e5","$blPbz$createContext","elements","dispatch","$4e8c7f5d5460026a$export$fc84c22acd302ca7","$blPbz$useContext","Error","$0f89e9b1b89dbf2f$export$e1957580bb403527","state","payload","type","id","element","connectWith","exists","some","l","node","next","map","el","x","filter","y","$1bc09187a0bc9784$export$5c92df8ce16beba9","props","children","$blPbz$useReducer","ctxVal","$blPbz$useMemo","$blPbz$jsx","Provider","value","$85e2c30641d200de$export$59e6910693f047c2","nodeRef","$blPbz$useRef","handleAdd","$blPbz$useCallback","current","clone","childProps","$blPbz$cloneElement","ref","$blPbz$useEffect","$b273f3fb7075477f$export$def641b22e0a4283","paths","edge","p","index","join","$e0e431770b5811be$export$d16800b7e59a8051","document","querySelector","$1936330569f3f07e$var$EMPTY_ARRAY","$1936330569f3f07e$export$790ca4df398846a2","e","length","connectEls","c","a","includes","rect","getBoundingClientRect","color","find","stroke","hasArrows","Boolean","from","to","$c31a6d62b311d9f6$export$7709b8005774fb51","fromRect","toRect","position","allowYConnect","left","right","width","bottomToTop","bottom","top","topToBottom","rightToLeft","leftToRight","$c31a6d62b311d9f6$var$getPosition","height","$424e118c64b42d36$var$SVG_STYLE","pointerEvents","$424e118c64b42d36$var$EMPTY_ARRAY","$424e118c64b42d36$export$775ba819c8141467","pointsData","setPointsData","$blPbz$useState","isInteracting","setIsInteracting","raf","colors","Set","flat","handleCalcLines","window","cancelAnimationFrame","requestAnimationFrame","data1","data","toArray","pathDataArr","pathData","path","test","d","handleStartInteracting","handleStopInteracting","handleUpdateLines","addEventListener","passive","removeEventListener","ro","ResizeObserver","forEach","observe","disconnect","unobserve","$blPbz$jsxs","style","markerHeight","markerUnits","markerWidth","orient","refX","refY","viewBox","fill","strokeWidth","strokeDasharray","strokeLinejoin","markerEnd","$d9eb0b679a35217c$var$ConnectProviderInner","$d9eb0b679a35217c$export$230737e70939b618"],"version":3,"file":"index.js.map"}
\ No newline at end of file
diff --git a/lib/dist/types/index.d.ts b/lib/dist/types/index.d.ts
new file mode 100644
index 0000000..6c750b0
--- /dev/null
+++ b/lib/dist/types/index.d.ts
@@ -0,0 +1,28 @@
+import React from "react";
+type Edge = 'bezier' | 'step' | undefined;
+type Stroke = 'solid' | 'dashed' | undefined;
+interface ConnectWithProps {
+ color?: string;
+ edge?: Edge;
+ stroke?: Stroke;
+ id: string;
+ hasArrows?: boolean;
+}
+export interface ConnectElement {
+ connectWith?: ConnectWithProps[];
+ id: string;
+}
+interface ConnectProps extends Omit {
+ children: React.ReactElement;
+}
+export function Connect(props: ConnectProps): React.ReactElement>;
+interface ConnectLinesProps {
+ elements: ConnectElement[];
+}
+export function ConnectLines(props: ConnectLinesProps): JSX.Element;
+interface ConnectProviderProps {
+ children: React.ReactNode;
+}
+export function ConnectProvider(props: ConnectProviderProps): JSX.Element;
+
+//# sourceMappingURL=index.d.ts.map
diff --git a/lib/dist/types/index.d.ts.map b/lib/dist/types/index.d.ts.map
new file mode 100644
index 0000000..0afcc0d
--- /dev/null
+++ b/lib/dist/types/index.d.ts.map
@@ -0,0 +1 @@
+{"mappings":";AAAA,YAAmB,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAA;AAChD,cAAqB,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAA;AAEnD;IACE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;IACE,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAChC,EAAE,EAAE,MAAM,CAAA;CACX;AMVD,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC;IAC5D,QAAQ,EAAE,MAAM,YAAY,CAAA;CAC7B;AAED,wBAAwB,KAAK,EAAE,YAAY,sEAyC1C;AMnBD;IACE,QAAQ,EAAE,cAAc,EAAE,CAAA;CAC3B;AAED,6BAA6B,KAAK,EAAE,iBAAiB,eAmNpD;AEjPD;IACE,QAAQ,EAAE,MAAM,SAAS,CAAA;CAC1B;AAQD,gCAAgC,KAAK,EAAE,oBAAoB,eAS1D","sources":["types.ts","elements/context.ts","elements/hooks.ts","elements/reducer.ts","elements/provider.tsx","elements/index.ts","Connect.tsx","lines/utils/pathify.ts","lines/utils/getElement.ts","lines/utils/getGroupedConnections.ts","lines/utils/getPathData.ts","lines/utils/index.ts","lines/ConnectLines.tsx","lines/index.ts","ConnectProvider.tsx","index.ts"],"sourcesContent":["export type Edge = 'bezier' | 'step' | undefined\nexport type Stroke = 'solid' | 'dashed' | undefined\n\nexport interface ConnectWithProps {\n color?: string\n edge?: Edge\n stroke?: Stroke\n id: string\n hasArrows?: boolean\n}\n\nexport interface ConnectElement {\n connectWith?: ConnectWithProps[]\n id: string\n}\n\nexport type ConnectElementsReducerPayload = ConnectElement & {\n type: 'add' | 'remove'\n element?: HTMLElement | null\n}\n\nexport type ConnectElementsDispatch = React.Dispatch\n\nexport type ConnectElementsContextValue = {\n elements: ConnectElement[]\n dispatch: ConnectElementsDispatch\n}\n","import {createContext} from 'react'\nimport {ConnectElementsContextValue} from '../types'\n\nexport const ConnectElementsContext = createContext({\n elements: [],\n dispatch: () => null,\n})\n","import {useContext} from 'react'\nimport {ConnectElementsContext} from './context'\n\nexport function useConnectElements() {\n const ctxVal = useContext(ConnectElementsContext)\n\n if (!ctxVal) {\n throw new Error('Missing context value')\n }\n\n return useContext(ConnectElementsContext)\n}\n","import {ConnectElement, ConnectElementsContextValue, ConnectElementsReducerPayload} from '../types'\n\nexport function connectElementsReducer(\n state: ConnectElementsContextValue,\n payload: ConnectElementsReducerPayload\n): ConnectElementsContextValue {\n const {type, id, element, connectWith} = payload\n\n const exists = state?.elements?.some((l) => l.id === id)\n const connectWithArr = connectWith || []\n const node: ConnectElement & {element?: HTMLElement | null} = {\n id,\n element,\n connectWith: connectWithArr,\n }\n\n if (type === 'add' && element) {\n if (!exists) {\n return {\n ...state,\n elements: [...state.elements, node],\n }\n }\n\n if (exists) {\n const next = [...state.elements].map((el) => {\n if (el.id === id) {\n return node\n }\n\n return el\n })\n\n return {...state, elements: next}\n }\n\n return state\n }\n\n if (type === 'remove') {\n return {\n ...state,\n elements: state.elements\n .map((x) => {\n return {\n ...x,\n connectWith: x.connectWith?.filter((y) => y.id !== id),\n }\n })\n .filter((el) => el.id !== id),\n }\n }\n\n return state\n}\n","import {useMemo, useReducer} from 'react'\nimport {ConnectElementsContext} from './context'\nimport {connectElementsReducer} from './reducer'\n\ninterface ConnectElementsProviderProps {\n children: React.ReactNode\n}\n\nexport function ConnectElementsProvider(props: ConnectElementsProviderProps) {\n const {children} = props\n const [state, dispatch] = useReducer(connectElementsReducer, {\n elements: [],\n dispatch: () => null,\n })\n\n const ctxVal = useMemo(\n () => ({\n elements: state.elements,\n dispatch: dispatch,\n }),\n [state]\n )\n\n return (\n {children}\n )\n}\n","export * from './context'\nexport * from './hooks'\nexport * from './provider'\n","import React, {cloneElement, useCallback, useEffect, useMemo, useRef} from 'react'\nimport {useConnectElements} from './elements'\nimport {ConnectElement} from './types'\n\ninterface ConnectProps extends Omit {\n children: React.ReactElement\n}\n\nexport function Connect(props: ConnectProps) {\n const {children, id, connectWith} = props\n const {dispatch} = useConnectElements()\n const nodeRef = useRef()\n\n const handleAdd = useCallback(() => {\n dispatch({\n type: 'add',\n id,\n connectWith,\n element: nodeRef.current,\n })\n }, [connectWith, dispatch, id])\n\n const clone = useMemo(() => {\n const {props: childProps} = children\n\n return cloneElement(children, {\n ...childProps,\n ref: (node: HTMLElement) => {\n nodeRef.current = node\n\n if (typeof children === 'function') childProps.ref(node)\n },\n })\n }, [children])\n\n useEffect(() => {\n handleAdd()\n }, [props, handleAdd, nodeRef])\n\n useEffect(() => {\n return () => {\n dispatch({\n type: 'remove',\n id,\n })\n }\n }, [dispatch, id])\n\n return clone\n}\n","import {Edge} from '../../types'\n\ninterface PathifyProps {\n paths: {x: string | number; y: string | number}[]\n edge?: Edge\n}\n\nexport const pathify = (props: PathifyProps) => {\n const {paths, edge} = props\n\n const path = `M ${paths\n .map((p, index) => {\n if (index === 1 && edge === 'step') return `${p.x} ${p.y}`\n if (index === 1 && edge === 'bezier') return `C ${p.x} ${p.y}`\n\n return `${p.x} ${p.y}`\n })\n .join(' ')}`\n\n return path\n}\n","import {ConnectElement} from '../../types'\n\nexport function getElement(el: ConnectElement & {element?: HTMLElement}) {\n if (!el.element) {\n return document.querySelector(`#${el.id}`)\n }\n\n return el.element\n}\n","import {ConnectElement} from '../../types'\nimport {getElement} from './getElement'\n\nconst EMPTY_ARRAY: [] = []\n\ninterface GetGroupedConnectionsProps {\n elements: ConnectElement[]\n}\n\nexport function getGroupedConnections(props: GetGroupedConnectionsProps) {\n const {elements} = props\n\n // const connections = elements?.map((e) => e.connectWith?.map((x) => x?.id)).flat()\n\n const grouped = elements\n .filter((e) => (e?.connectWith || EMPTY_ARRAY).length > 0)\n .map((el) => {\n const {connectWith} = el\n\n // const connectionsLen = connections.filter((y) => y === el.id)?.length || 0\n\n const connectEls = elements\n .filter((c) => connectWith?.map((a) => a.id).includes(c.id))\n .map((x) => {\n return {\n rect: getElement(x)?.getBoundingClientRect(),\n color: connectWith?.find((a) => a.id === x.id)?.color || '#000000',\n edge: connectWith?.find((a) => a.id === x.id)?.edge || 'bezier',\n stroke: connectWith?.find((a) => a.id === x.id)?.stroke || 'solid',\n hasArrows: Boolean(connectWith?.find((a) => a.id === x.id)?.hasArrows),\n // connectionsLen: connectionsLen,\n }\n })\n\n if (connectEls.length === 0) return\n\n return {\n from: {\n rect: getElement(el)?.getBoundingClientRect(),\n },\n to: connectEls,\n }\n })\n .filter(Boolean)\n\n return grouped\n}\n","interface GetPathDataProps {\n from?: {\n rect: DOMRect | undefined\n }\n to?: {\n rect: DOMRect | undefined\n }\n}\n\nconst LINE_OFFSET = 9\nconst POS_OFFSET = 40\n\nfunction getPosition(props: {from: DOMRect; to: DOMRect}) {\n const {from, to} = props\n\n const allowYConnect =\n from.left - POS_OFFSET < to.right && from.right + to.width > to.right - POS_OFFSET\n\n const bottomToTop = from.bottom < to.top && allowYConnect\n const topToBottom = from.top > to.bottom && allowYConnect\n const rightToLeft = from.left > to.right\n const leftToRight = from.right < to.left\n\n if (bottomToTop) return 'bottom-to-top'\n if (topToBottom) return 'top-to-bottom'\n if (rightToLeft) return 'right-to-left'\n if (leftToRight) return 'left-to-right'\n}\n\nexport function getPathData(props: GetPathDataProps) {\n const {from, to} = props\n const fromRect = from?.rect\n const toRect = to?.rect\n\n if (!fromRect || !toRect) return\n\n const position = getPosition({from: fromRect, to: toRect})\n\n switch (position) {\n case 'bottom-to-top': {\n return [\n {\n x: fromRect?.left + fromRect.width / 2,\n y: fromRect?.bottom,\n },\n {\n x: fromRect?.left + fromRect.width / 2,\n y: fromRect.bottom - (fromRect.bottom - toRect.top) / 2,\n },\n {\n x: toRect?.left + toRect.width / 2,\n y: fromRect.bottom - (fromRect.bottom - toRect.top) / 2,\n },\n {\n x: toRect?.left + toRect.width / 2,\n y: toRect.top - LINE_OFFSET,\n },\n ]\n }\n\n case 'top-to-bottom': {\n return [\n {\n x: fromRect?.left + fromRect.width / 2,\n y: fromRect?.top,\n },\n {\n x: fromRect?.left + fromRect.width / 2,\n y: fromRect.top - (fromRect.top - toRect.bottom) / 2,\n },\n {\n x: toRect?.left + toRect.width / 2,\n y: fromRect.top - (fromRect.top - toRect.bottom) / 2,\n },\n {\n x: toRect?.left + toRect.width / 2,\n y: toRect.bottom + LINE_OFFSET,\n },\n ]\n }\n\n case 'right-to-left': {\n return [\n {\n x: fromRect?.left,\n y: fromRect?.bottom - fromRect.height / 2,\n },\n {\n x: (toRect.right + fromRect.left) / 2,\n y: fromRect?.bottom - fromRect.height / 2,\n },\n {\n x: (toRect.right + fromRect.left) / 2,\n y: toRect.top + toRect.height / 2,\n },\n {\n x: toRect.right + LINE_OFFSET,\n y: toRect.top + toRect.height / 2,\n },\n ]\n }\n\n case 'left-to-right': {\n return [\n {\n x: fromRect?.right,\n y: fromRect?.bottom - fromRect.height / 2,\n },\n {\n x: (toRect.left + fromRect.right) / 2,\n y: fromRect?.bottom - fromRect.height / 2,\n },\n {\n x: (toRect.left + fromRect.right) / 2,\n y: toRect.top + toRect.height / 2,\n },\n {\n x: toRect.left - LINE_OFFSET,\n y: toRect.top + toRect.height / 2,\n },\n ]\n }\n\n default:\n return []\n }\n}\n","export * from './pathify'\nexport * from './getGroupedConnections'\nexport * from './getPathData'\nexport * from './getElement'\n","import {useCallback, useEffect, useMemo, useRef, useState} from 'react'\nimport {ConnectElement, Edge, Stroke} from '../types'\nimport {getElement, getGroupedConnections, getPathData, pathify} from './utils'\n\nconst SVG_STYLE: React.CSSProperties = {\n position: 'fixed',\n top: '0',\n left: '0',\n right: '0',\n bottom: '0',\n pointerEvents: 'none',\n width: '100%',\n height: '100%',\n}\n\nconst DEFAULT_COLOR = '#000000'\nconst EMPTY_ARRAY: [] = []\n\ntype PointsData = (\n | {\n rect: DOMRect | undefined\n color: string | undefined\n edge: Edge\n stroke: Stroke\n d: string\n hasArrows: boolean\n }\n | undefined\n)[]\n\ninterface ConnectLinesProps {\n elements: ConnectElement[]\n}\n\nexport function ConnectLines(props: ConnectLinesProps) {\n const [pointsData, setPointsData] = useState(EMPTY_ARRAY)\n const [isInteracting, setIsInteracting] = useState(false)\n const {elements} = props\n const raf = useRef()\n\n /**\n * Create array of all colors configured.\n * These colors is used to render the svg markers (e.g arrows).\n */\n const colors = useMemo(\n () =>\n [\n ...new Set([\n ...elements.map((e) => e.connectWith?.map((c) => c?.color)).flat(),\n DEFAULT_COLOR,\n ]),\n ].filter(Boolean),\n [elements]\n )\n\n const handleCalcLines = useCallback(() => {\n if (raf.current) {\n window.cancelAnimationFrame(raf.current)\n }\n\n raf.current = window.requestAnimationFrame(() => {\n /**\n * The `getGroupedConnections` function returns:\n *\n * {\n * from: DOMRect,\n * to: {\n * rect: DOMRect,\n * color: string,\n * edge: string,\n * stroke: string,\n * hasArrows: boolean\n * }[]\n * }\n */\n const groupedConnections = getGroupedConnections({elements})\n\n const points = groupedConnections\n .map((data) => {\n const {from, to: toArray} = data || {}\n\n const pathDataArr = toArray?.map((to) => {\n /**\n * The `getPathData` function returns an array of objects with\n * x and y coordinates for the line.\n */\n const pathData = getPathData({from: from, to: to})\n\n if (!pathData) return\n\n /**\n * The `pathify` functions returns a svg-readable string of the coordinates\n */\n const path = pathify({paths: pathData, edge: to?.edge})\n\n /**\n * Dummy validation of the path\n */\n if (!/\\d/.test(path)) return\n\n /**\n * Return the path (d) together with other relevant data such as color, stroke, edge.\n */\n return {\n d: path,\n ...to,\n }\n })\n\n return pathDataArr\n })\n .filter(Boolean)\n .flat()\n\n const data = points.filter((p) => Boolean(p))\n\n setPointsData(data)\n })\n }, [elements])\n\n /**\n * Handle drag and drop gestures and update the paths\n */\n const handleStartInteracting = useCallback(() => {\n setIsInteracting(true)\n }, [])\n\n const handleStopInteracting = useCallback(() => {\n setIsInteracting(false)\n }, [])\n\n const handleUpdateLines = useCallback(() => {\n if (isInteracting) handleCalcLines()\n }, [handleCalcLines, isInteracting])\n\n useEffect(() => {\n handleCalcLines()\n }, [handleCalcLines])\n\n useEffect(() => {\n window.addEventListener('resize', handleCalcLines, {passive: true})\n window.addEventListener('scroll', handleCalcLines, {passive: true})\n\n return () => {\n window.removeEventListener('resize', handleCalcLines)\n window.removeEventListener('scroll', handleCalcLines)\n }\n }, [handleCalcLines])\n\n const ro = useMemo(() => new ResizeObserver(handleCalcLines), [handleCalcLines])\n\n useEffect(() => {\n elements.forEach((el) => {\n const element = getElement(el)\n\n element?.addEventListener('mousedown', handleStartInteracting, {passive: true})\n element?.addEventListener('mouseup', handleStopInteracting, {passive: true})\n element?.addEventListener('mousemove', handleUpdateLines, {passive: true})\n element?.addEventListener('touchstart', handleStartInteracting, {passive: true})\n element?.addEventListener('touchend', handleStopInteracting, {passive: true})\n element?.addEventListener('touchmove', handleUpdateLines, {passive: true})\n\n if (element) {\n ro.observe(element)\n }\n })\n\n return () => {\n elements.forEach((el) => {\n const element = getElement(el)\n\n element?.removeEventListener('mousedown', handleStartInteracting)\n element?.removeEventListener('mouseup', handleStopInteracting)\n element?.removeEventListener('mousemove', handleUpdateLines)\n element?.removeEventListener('touchstart', handleStartInteracting)\n element?.removeEventListener('touchend', handleStopInteracting)\n element?.removeEventListener('touchmove', handleUpdateLines)\n\n if (element) {\n ro.disconnect()\n ro.unobserve(element)\n }\n })\n }\n }, [\n elements,\n handleCalcLines,\n handleStartInteracting,\n handleStopInteracting,\n handleUpdateLines,\n ro,\n ])\n\n return useMemo(\n () => (\n \n ),\n [colors, pointsData]\n )\n}\n","export * from './ConnectLines'\n","import React from 'react'\nimport {ConnectElementsProvider, useConnectElements} from './elements'\nimport {ConnectLines} from './lines'\n\ninterface ConnectProviderProps {\n children: React.ReactNode\n}\n\nfunction ConnectProviderInner() {\n const {elements} = useConnectElements()\n\n return \n}\n\nexport function ConnectProvider(props: ConnectProviderProps) {\n const {children} = props\n\n return (\n \n {children}\n \n \n )\n}\n","import {Connect} from './Connect'\nimport {ConnectProvider} from './ConnectProvider'\nimport {ConnectLines} from './lines/ConnectLines'\nimport type {ConnectElement} from './types'\n\nexport {Connect, ConnectProvider, ConnectLines, ConnectElement}\n"],"names":[],"version":3,"file":"index.d.ts.map"}
\ No newline at end of file