@bemedev/mind-flow 0.3.0 → 0.3.1

package/lib/index.cjs.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("solid-js/web"),t=require("@bemedev/app-solidjs"),n=require("solid-js"),r=require("@bemedev/app"),i=require("@bemedev/app/bemedev"),a=require("@thisbeyond/solid-dnd");var o=`fill-transparent cursor-pointer relative stroke-[rgba(168,168,168,0.4)] stroke-3 stroke-[rgba(168,168,168,1)] stroke-4 z-100 stroke-[rgba(168,168,168,0.8)] pointer-events-all w-[100px] h-[100px] bg-white fill-white pointer-events-none absolute top-0 w-full h-full overflow-hidden overflow-auto h-[150vh] w-[2160px] bg-size-[30px_30px] flex flex-col cursor-grab rounded-md shadow-[1px_1px_11px_-6px_rgba(0,0,0,0.75)] select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-[2px_2px_12px_-6px_rgba(0,0,0,0.75)] draggable border border-[#e38c29] z-[100] border-[#e6d4be] z-[1] items-center justify-end -top-[30px] right-0 transition-all space-x-2 opacity-100 w-0 -right-3 opacity-0 w-6 h-6 fill-[#a11111] rounded-full size-6 bg-green-500 p-0.5 hover:bg-green-600 font-bold text-center overflow-visible bg-blue-500 text-white rounded-lg hover:bg-blue-600 justify-center p-3 border-b border-[#f0f0f0] cursor-default z-[-3] -left-[18px] bg-[#e38b29] w-3 h-3 my-3 -right-[18px] cursor-crosshair mt-3`.split(` `),s=10.5,c={x:-10.5,y:18},l=(e=0)=>({x:e+s,y:18}),u={horizontal:55,vertical:40},d=[{id:`node-0`,data:{content:`Some text`,label:`Root node`},input:!1,position:{x:350,y:100}}],f=(e,t)=>{let r=(0,n.createContext)(e(),t);return[({children:e})=>r.Provider({value:r.defaultValue,children:e}),()=>(0,n.useContext)(r),r]},p=`useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict`,m=(e=21)=>{let t=``,n=crypto.getRandomValues(new Uint8Array(e|=0));for(;e--;)t+=p[n[e]&63];return t},h=(e,t)=>`edge = ${e} => ${t}`,g=e=>`node-${e}`,_=(e,t={width:192,height:50,inputOffset:c})=>{let n=t.width,r=t.height,i=t.outputOffset??l(n),a=t.inputOffset;return{width:n,height:r,output:{x:e.x+i.x,y:e.y+i.y},input:{x:e.x+a.x,y:e.y+a.y},outputOffset:i,inputOffset:a}},v=(0,i.type)({x:`number`,y:`number`});(0,i.type)(({optional:e,use:t})=>({input:e(t(v)),output:t(v)}));var y=(0,i.type)({from:`string`,to:`string`}),b=(0,i.type)(({optional:e,use:t})=>({position:t(v),data:{label:e(`string`),content:`string`},input:`boolean`})),x=y,S=(0,i.type)(({optional:e,use:t})=>({width:`number`,height:`number`,output:t(v),input:e(t(v)),inputOffset:e(t(v)),outputOffset:e(t(v))})),C=(0,i.type)({x0:`number`,y0:`number`,x1:`number`,y1:`number`}),w=(0,i.type)(({intersection:e,use:t})=>e({from:`string`},t(C))),T=(0,i.type)(({optional:e})=>({self:{left:`number`,top:`number`,width:`number`,height:`number`},parent:e({scrollLeft:`number`,scrollTop:`number`,height:`number`,width:`number`})})),E=(0,r.createMachine)({initial:`idle`,on:{SET_BOARD:{actions:[`setBoard`]}},states:{idle:{on:{CONFIGURE:{actions:[`configure`],target:`/working`},CONFIGURE_EMPTY:`/working`}},construction:{always:{actions:[`buildUI`],target:`/working`}},working:{on:{MOVE_IMMEDIATE:{actions:[{name:`buildUI`,description:`Must be in the ui`}]},ADD_CHILD:{actions:[`generateID`,{name:`placeChild`,description:`Must be in the ui`},`linkChild`],target:`/construction`},ADD_PARENT:{actions:[`generateID`,{name:`placeParent`,description:`Must be in the ui`},`selectParent`],target:`/construction`},ADD_DIMENSION:{actions:[`addDimension`]},ADD_SIBLING:{actions:[`generateID`,{name:`placeSibling`,description:`Must be in the ui`},`linkSibling`],target:`/construction`},MOVE:{actions:[`moveNode`,`buildUI`],target:`/construction`},ADD_EDGE:{actions:[`addEdge`],target:`/construction`},START_NEW_EDGE:{actions:[`startNewEdge`]},MOVE_NEW_EDGE:{actions:[`moveNewEdge`]},CLEAR_NEW_EDGE:{actions:[`clearNewEdge`]},DELETE:{actions:[`delete`],target:`/construction`},SELECT:{actions:[`select`]},DESELECT:{actions:[`deselect`]},ZOOM:{actions:[`zoom`]},TOGGLE_ZOOM:{actions:[`toggleZoom`]},SET_BOARD:{actions:[`setBoard`]}}}}},{eventsMap:(0,i.type)(({intersection:e,use:t,array:n})=>({CONFIGURE:{nodes:n(e(t(b),{id:`string`})),edges:n(e(t(x),{id:`string`}))},SET_BOARD:t(T),CONFIGURE_EMPTY:`never`,MOVE:{id:`string`,x:`number`,y:`number`},MOVE_IMMEDIATE:{id:`string`,x:`number`,y:`number`},ADD_CHILD:`string`,ADD_PARENT:`never`,ADD_SIBLING:`string`,DELETE:`string`,SELECT:`string`,DESELECT:`never`,ADD_EDGE:t(y),START_NEW_EDGE:`string`,MOVE_NEW_EDGE:t(v),CLEAR_NEW_EDGE:`never`,ZOOM:`number`,TOGGLE_ZOOM:`never`,ADD_DIMENSION:{id:`string`,dimension:t(S)}})),sync:!0,pContext:(0,i.type)(({union:e,optional:t,record:n,use:r,custom:i})=>({generatedId:e(`string`,`null`),previousZoom:t(`number`),dimensions:n(r(S)),getBoardPosition:i(),clampPosition:i(),calculateDimensions:i()})),context:(0,i.type)(({optional:e,use:t,array:n,record:r})=>({data:e({nodes:n({...t(b),id:`string`}),edges:n({...t(x),id:`string`})}),board:e(t(T)),edgesPositions:r(t(C)),newEdge:e(t(w)),selected:e(`string`),updatingUI:e(`boolean`),zoom:`number`,bounds:t(v)}))}).provideOptions(({assign:e,batch:t,erase:n,filter:r,action:a})=>({actions:{configure:t(e(`data`,{CONFIGURE:({payload:e})=>e}),e(`newEdge`,()=>void 0),e(`updatingUI`,()=>!1),a(({pContext:e})=>{e.generatedId=null}),a({CONFIGURE:({payload:{nodes:e},pContext:{dimensions:t}})=>{e.forEach(({id:e,position:n})=>{t[e]=_(n)})}})),startNewEdge:e(`newEdge`,{START_NEW_EDGE:({payload:e,pContext:{dimensions:t}})=>{let{x:n,y:r}=t[e].output;return{from:e,x0:n,y0:r,x1:n,y1:r}}}),setBoard:e(`board`,{SET_BOARD:({payload:e})=>e}),buildUI:t(e(`edgesPositions`,{MOVE:({context:{data:e,edgesPositions:t},payload:n,pContext:{dimensions:r}})=>{let i=e?.edges,a=r[n.id],o=a?.outputOffset??l(a?.width),s=a?.inputOffset??c,u={x:n.x+o.x,y:n.y+o.y},d={x:n.x+s.x,y:n.y+s.y};return a&&(a.output=u,a.input=d),i?.forEach(({from:e,to:r,id:i})=>{e===n.id&&(t[i].x0=u.x,t[i].y0=u.y),r===n.id&&(t[i].x1=d.x,t[i].y1=d.y)}),t},MOVE_IMMEDIATE:({context:{data:e,edgesPositions:t},payload:n,pContext:{dimensions:r}})=>((e?.edges)?.forEach(({from:e,to:i,id:a})=>{if(e===n.id){let e=r[n.id],i=e?.outputOffset??l(e?.width),o=n.x+i.x,s=n.y+i.y;t[a].x0=o,t[a].y0=s,e&&(e.output.x=o,e.output.y=s)}if(i===n.id){let e=r[n.id],i=e?.inputOffset??c,o=n.x+i.x,s=n.y+i.y;t[a].x1=o,t[a].y1=s,e&&(e.input={x:o,y:s})}}),t),else:({context:{data:e,edgesPositions:t},pContext:{dimensions:n}})=>{let r=e?.edges??[];return t={},r.forEach(({from:e,id:r,to:i})=>{let a=n[e]?.output,o=n[i]?.input;a&&o?t[r]={x0:a.x,y0:a.y,x1:o.x,y1:o.y}:delete t[r]}),t}}),e(`updatingUI`,()=>!0)),addDimension:a({ADD_DIMENSION:({payload:{id:e,dimension:t},pContext:{dimensions:n}})=>{n[e]=t}}),generateID:a(({pContext:e})=>{e.generatedId=m()}),linkChild:t(e(`data.edges`,{ADD_CHILD:({context:{data:e},pContext:t,payload:n})=>{let r=i.toArray.typed(e?.edges),a=n,o=t?.generatedId,s=g(o),c=h(a,s);return r.push({id:c,from:a,to:s}),r}}),e(`selected`,({pContext:{generatedId:e}})=>g(e))),linkSibling:t(e(`data.edges`,{ADD_SIBLING:({pContext:e,payload:t,context:{data:n}})=>{let r=i.toArray.typed(n?.edges),a=e?.generatedId,o=r.find(({to:e})=>e===t)?.from;if(!o)return r;let s=g(a),c=h(o,s);return r.push({from:o,to:s,id:c}),r}}),e(`selected`,({pContext:{generatedId:e}})=>g(e))),selectParent:e(`selected`,({pContext:{generatedId:e}})=>g(e)),moveNode:e(`data.nodes`,{MOVE:({context:{data:e},payload:t})=>{let{id:n,x:r,y:i}=t;return e?.nodes?.map(e=>e.id===n?{...e,position:{x:r,y:i}}:e)??[]}}),select:e(`selected`,{SELECT:({payload:e})=>e}),delete:t(r(`data.edges`,{DELETE:({id:e,from:t,to:n},r,{payload:i})=>e!==i&&t!==i&&n!==i}),r(`data.nodes`,{DELETE:({id:e},t,{payload:n})=>e!==n})),addEdge:t(e(`data.edges`,{ADD_EDGE:({context:e,payload:{from:t,to:n}})=>{let r=e.data?.edges??[],i=h(t,n);return r.some(e=>e.id===i)?r:[...r,{id:i,from:t,to:n}]}}),n(`newEdge`)),clearNewEdge:n(`newEdge`),deselect:n(`selected`),zoom:e(`zoom`,{ZOOM:({context:{zoom:e},payload:t,pContext:n})=>{let r=e+t,i=Math.min(Math.max(Number(r.toFixed(2)),.2),3);return n.previousZoom=void 0,i}}),toggleZoom:e(`zoom`,{TOGGLE_ZOOM:({context:{zoom:e},pContext:t})=>{let n=t.previousZoom;return n===void 0?(t.previousZoom=e,1):(t.previousZoom=void 0,n)}})}})),[D,O]=f(()=>{let e=(0,r.interpret)(E,{context:{zoom:1,edgesPositions:{},bounds:{x:0,y:0}},pContext:{generatedId:null,dimensions:{},getBoardPosition(t,n,r){if(!r)return{x:t,y:n};let i=e.state.context.zoom;return{x:(t-r.self.left)/i,y:(n-r.self.top)/i}},clampPosition(t,n,r,i=192,a=50){let o=t?.parent;if(!o)return{x:n,y:r};let s=e.state.context.zoom??1,c=o.scrollLeft/s+u.horizontal,l=Math.max(c,(o.scrollLeft+o.width)/s-u.horizontal-i),d=o.scrollTop/s+u.vertical,f=Math.max(d,(o.scrollTop+o.height)/s-u.vertical-a);return{x:Math.min(Math.max(n,c),l),y:Math.min(Math.max(r,d),f)}},calculateDimensions:(e,t={width:192,height:50,inputOffset:c})=>{let n=t.width,r=t.height,i=t.outputOffset??l(n),a=t.inputOffset;return{width:n,height:r,output:{x:e.x+i.x,y:e.y+i.y},input:{x:e.x+a.x,y:e.y+a.y},outputOffset:i,inputOffset:a}}}});return e.addOptions(({assign:e})=>({actions:{placeChild:e(`data.nodes`,{ADD_CHILD:({payload:e,context:{data:t,board:n},pContext:r})=>{if(!n)return t?.nodes;let i=t?.nodes;if(!e)return i;let a=i?.find(t=>t.id===e);if(!a)return i;let o=r.dimensions[e],s=`node-${r.generatedId}`,c=o?.width??192,l=o?.height??50,u=a.position.x+c+100,d=a.position.y,f=r.clampPosition(n,u,d,c,l),p=r.calculateDimensions(f,o);return i?.push({id:s,data:{content:`<Nouveau nœud>`},input:!0,position:f}),r.dimensions[s]=p,i}}),placeParent:e(`data.nodes`,{ADD_PARENT:({context:{data:e,zoom:t=1,board:n},pContext:r})=>{if(!n)return e?.nodes;let i=e?.nodes,a=`node-${r.generatedId}`,o=n.parent,s=o?.scrollLeft??0,c=o?.scrollTop??0,l=o?.width??0,u=o?.height??0,d=t,f=(s+l/2)/d,p=(c+u/2)/d,m=r.clampPosition(n,f,p),h=r.calculateDimensions(m);return i?.push({id:a,data:{content:`<Nouveau nœud>`},input:!1,position:m}),r.dimensions[a]=h,i}}),placeSibling:e(`data.nodes`,{ADD_SIBLING:({payload:e,context:{data:t,board:n},pContext:r})=>{if(!n)return t?.nodes;let i=t?.edges,a=t?.nodes,o=i?.find(t=>t.to===e)?.from;if(!o)return a;let s=a?.find(e=>e.id===o);if(!s)return a;let c=r.dimensions[o],l=`node-${r.generatedId}`,u=c?.width??192,d=c?.height??50,f=s.position.x+u+100,p=s.position.y+100,m=r.clampPosition(n,f,p,u,d),h=r.calculateDimensions(m,c);return a?.push({id:l,data:{content:`<Nouveau nœud>`},input:!0,position:m}),r.dimensions[l]=h,a}}),moveNewEdge:e(`newEdge`,{MOVE_NEW_EDGE:({context:{newEdge:e,board:t},payload:n,pContext:r})=>{if(!t||!e)return;let{x:i,y:a}=r.getBoardPosition(n.x,n.y,t);return{...e,x1:i,y1:a}}})}})),e.start(),e},{name:`FlowContext`}),k=Object.prototype.hasOwnProperty;function A(e,t,n){for(n of e.keys())if(j(n,t))return n}function j(e,t){var n,r,i;if(e===t)return!0;if(e&&t&&(n=e.constructor)===t.constructor){if(n===Date)return e.getTime()===t.getTime();if(n===RegExp)return e.toString()===t.toString();if(n===Array){if((r=e.length)===t.length)for(;r--&&j(e[r],t[r]););return r===-1}if(n===Set){if(e.size!==t.size)return!1;for(r of e)if(i=r,i&&typeof i==`object`&&(i=A(t,i),!i)||!t.has(i))return!1;return!0}if(n===Map){if(e.size!==t.size)return!1;for(r of e)if(i=r[0],i&&typeof i==`object`&&(i=A(t,i),!i)||!j(r[1],t.get(i)))return!1;return!0}if(n===ArrayBuffer)e=new Uint8Array(e),t=new Uint8Array(t);else if(n===DataView){if((r=e.byteLength)===t.byteLength)for(;r--&&e.getInt8(r)===t.getInt8(r););return r===-1}if(ArrayBuffer.isView(e)){if((r=e.byteLength)===t.byteLength)for(;r--&&e[r]===t[r];);return r===-1}if(!n||typeof e==`object`){for(n in r=0,e)if(k.call(e,n)&&++r&&!k.call(t,n)||!(n in t)||!j(e[n],t[n]))return!1;return Object.keys(t).length===r}}return e!==e&&t!==t}var M=()=>{let e=O(),n=(0,t.createState)(e,{selector:({context:e})=>e.zoom}),r=(0,t.createState)(e,{selector:({context:e})=>e.board}),[i,{addTransformer:o,removeTransformer:s,onDragStart:c,onDragEnd:l}]=(0,a.useDragDropContext)(),d={id:`clamp-to-container`,order:100,callback:e=>{let t=r()?.self,a=i.active.draggable;if(!t||!a)return e;let o=a.node;if(!o)return e;let s=n(),c=u.horizontal,l=Math.max(c,t.width/s-o.offsetWidth-u.horizontal),d=u.vertical,f=Math.max(d,t.height/s-o.offsetHeight-u.vertical),p=(c-o.offsetLeft)*s,m=(l-o.offsetLeft)*s,h=(d-o.offsetTop)*s,g=(f-o.offsetTop)*s;return{x:Math.min(Math.max(e.x,p),m),y:Math.min(Math.max(e.y,h),g)}}};return c(({draggable:e})=>{o(`draggables`,e.id,d)}),l(({draggable:e})=>{s(`draggables`,e.id,d.id)}),null},N=(0,e.template)(`<svg><path class="relative cursor-pointer fill-transparent"></svg>`,!1,!0,!1),P=(0,e.template)(`<svg><g cursor=pointer style=pointer-events:all;z-index:30><circle cx=0 cy=0 r=12 fill="rgba(168, 168, 168, 1)"></circle><svg fill=currentColor stroke-width=0 xmlns=http://www.w3.org/2000/svg class="h-25 w-25 bg-white fill-white"width=20 height=20 viewBox="0 0 20 20"color=white x=-10 y=-10><path d="M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z"></svg>`,!1,!0,!1),F=e=>e*100/200,I=({x0:e,y0:t,x1:n,y1:r})=>`M ${e} ${t} C ${e+F(Math.abs(n-e))} ${t}, ${n-F(Math.abs(n-e))} ${r}, ${n} ${r}`,L=r=>{let i=O(),a=(0,t.createState)(i,{selector:({context:e})=>{if(r.isNew){let t=e.newEdge;return t?{x0:t.x0,y0:t.y0,x1:t.x1,y1:t.y1}:void 0}return e.edgesPositions[r.id]},equals:j}),o=(0,t.createState)(i,{selector:e=>e.context.selected===r.id}),s=()=>{let e=a();return e?{x:e.x0+(e.x1-e.x0)/2,y:e.y0+(e.y1-e.y0)/2}:{x:0,y:0}};return(0,e.createComponent)(n.Show,{get when(){return a()},children:t=>[(()=>{var n=(0,e.getNextElement)(N);return n.$$mousedown=e=>(e.stopPropagation(),i.send({type:`SELECT`,payload:r.id})),(0,e.effect)(i=>{var a={"stroke-[rgba(168,168,168,0.4)] stroke-3 z-200":!!r.isNew,"stroke-[rgba(168,168,168,1)] stroke-4 z-100":o()&&!r.isNew,"stroke-[rgba(168,168,168,0.8)] stroke-3":!o()&&!r.isNew},s=r.isNew?`none`:`all`,c=I(t());return i.e=(0,e.classList)(n,a,i.e),s!==i.t&&(0,e.setStyleProperty)(n,`pointer-events`,i.t=s),c!==i.a&&(0,e.setAttribute)(n,`d`,i.a=c),i},{e:void 0,t:void 0,a:void 0}),(0,e.runHydrationEvents)(),n})(),(0,e.createComponent)(n.Show,{get when(){return o()},get children(){var t=(0,e.getNextElement)(P);return t.$$mousedown=e=>{e.stopPropagation(),i.send({type:`DELETE`,payload:r.id})},(0,e.effect)(()=>(0,e.setAttribute)(t,`transform`,`translate(${s().x}, ${s().y})`)),(0,e.runHydrationEvents)(),t}})]})};(0,e.delegateEvents)([`mousedown`]);var R=(0,e.template)(`<svg class="pointer-events-none h-full w-full overflow-visible"><!$><!/><!$><!/>`),z=()=>{let r=O(),i=(0,t.createState)(r,{selector:e=>!!e.context.newEdge}),a=(0,t.createState)(r,{selector:({context:e})=>Object.keys(e.edgesPositions),equals:(e,t)=>e.length===t.length});return(()=>{var t=(0,e.getNextElement)(R),r=t.firstChild,[o,s]=(0,e.getNextMarker)(r.nextSibling),c=o.nextSibling,[l,u]=(0,e.getNextMarker)(c.nextSibling);return(0,e.insert)(t,(0,e.createComponent)(n.Show,{get when(){return i()},get children(){return(0,e.createComponent)(L,{id:`__#new-edge#__TEMP`,isNew:!0})}}),o,s),(0,e.insert)(t,(0,e.createComponent)(n.For,{get each(){return a()},children:t=>(0,e.createComponent)(L,{id:t})}),l,u),t})()},B=(0,e.template)(`<svg class="cursor-pointer overflow-visible rounded-full bg-green-500 p-0.5 text-center font-bold hover:bg-green-600"viewBox="0 0 1024 1024"preserveAspectRatio=xMaxYMax xmlns=http://www.w3.org/2000/svg fill=white style=pointer-events:all;fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2><g id=background><path d="M467.40667,277.66696c-0.05948,-14.53055 5.75527,-22.95613 -8.62044,-20.90487c-112.55699,16.0607 -222.1609,112.14558 -245.06161,239.85765c-46.52056,259.43466 231.33083,443.06705 449.51209,316.97506c117.31668,-67.80002 160.95215,-190.43324 151.34416,-288.29849c-5.92276,-60.32819 -27.80273,-107.95668 -53.44246,-144.25469l59.39269,-42.05363c111.72214,156.309 73.11535,351.55635 -25.06953,459.45565c-184.18877,202.4124 -470.46624,145.52064 -592.95027,-32.92123c-156.18269,-227.53604 -27.15324,-543.64371 261.18883,-582.44416c5.0579,-0.68061 3.56556,-7.04079 3.56442,-8.58985c-0.05594,-76.3354 -0.11021,-76.7687 1.10909,-77.24589c2.06886,-0.80969 151.41433,118.4561 151.92482,118.95524c4.65592,4.55233 -0.99548,7.829 -29.07828,30.50907c-120.49369,97.31245 -120.4977,98.55675 -123.0691,97.87586c-0.43639,-0.11555 -0.80698,-0.31322 -0.74442,-66.91571Z"></path><path d="M316.61562,611.03414c0.11517,-90.16257 -0.25516,-99.92912 0.64739,-101.78856c1.56486,-3.22393 131.99102,0.91032 134.6959,-1.89763c2.21336,-2.2977 -0.59362,-129.97807 1.1376,-132.37034c0.7253,-1.00225 11.10552,-0.99175 12.07474,-0.99077c104.50336,0.10564 104.90098,-0.37811 105.967,0.85765c1.56461,1.81373 0.25596,114.18436 0.67852,129.81412c0.1322,4.88975 3.22386,3.28152 99.72028,3.4563c33.0841,0.05992 36.14259,-1.40368 36.21852,4.50462c0.11713,9.11348 1.41954,110.45369 -0.40274,113.92715c-1.81106,3.45208 -130.39967,-0.42618 -134.48289,1.62075c-2.29035,1.14816 -0.36989,101.12392 -1.11542,130.51904c-0.09548,3.76459 -2.13506,3.20617 -47.84854,3.17365c-69.30253,-0.0493 -69.31099,-0.25627 -69.65762,-0.42191c-3.77927,-1.80595 0.16287,-129.33555 -2.24266,-132.58994c-1.79931,-2.43424 -124.06108,-0.29118 -132.80252,-0.97392c-3.81102,-0.29766 -2.58229,-14.8847 -2.58758,-16.8402Z">`),V=(0,e.template)(`<div id=outputs class="pointer-events-none absolute top-0 z-10 flex cursor-default flex-col"><div class="cursor-default rounded-full bg-[#e38b29] shadow-md"style=pointer-events:all>`),H=(0,e.template)(`<div class=min-w-48><div><svg class="cursor-pointer rounded-full fill-[#a11111] opacity-100 transition-all duration-200 ease-in-out"fill=currentColor stroke-width=2 viewBox="4 4 16 16"style=overflow:visible;pointer-events:all><path d="M12 4c-4.419 0-8 3.582-8 8s3.581 8 8 8 8-3.582 8-8-3.581-8-8-8zm3.707 10.293a.999.999 0 11-1.414 1.414L12 13.414l-2.293 2.293a.997.997 0 01-1.414 0 .999.999 0 010-1.414L10.586 12 8.293 9.707a.999.999 0 111.414-1.414L12 10.586l2.293-2.293a.999.999 0 111.414 1.414L13.414 12l2.293 2.293z"></path></svg><!$><!/><svg class="flex cursor-pointer items-center justify-center rounded-lg bg-blue-500 p-0.5 text-center font-bold text-white hover:bg-blue-600"viewBox="0 0 24 24"stroke=currentColor stroke-width=2 style=pointer-events:all><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg></div><!$><!/><!$><!/><!$><!/><div id=inputs class="pointer-events-none absolute top-0 z-10 flex flex-col"><div class="cursor-crosshair rounded-full bg-[#e38b29] shadow-md"style=pointer-events:all>`),U=(0,e.template)(`<span class="min-w-max border-b border-[#f0f0f0] p-3 whitespace-nowrap text-red-600 select-none">`),W=(0,e.template)(`<div class="p-3 select-none">`),G=i=>{let o=O(),s=(0,t.createState)(o,{selector:({context:e})=>{let t=r.toArray.typed(e.data?.nodes).find(e=>e.id===i.id);if(t)return{x:t.position.x,y:t.position.y,label:t.data.label,content:t.data.content??``,input:t.input}},equals:j}),c=(0,t.createState)(o,{selector:e=>e.context.newEdge}),l=(0,t.createState)(o,{selector:e=>e.context.selected===i.id}),u=(0,t.createState)(o,{selector:({context:{data:e}})=>{let t=e?.edges;return t?t.some(({to:e})=>e===i.id):!1}}),d=(0,a.createDraggable)(i.id);return(()=>{var t=(0,e.getNextElement)(H),r=t.firstChild,a=r.firstChild,f=a.nextSibling,[p,m]=(0,e.getNextMarker)(f.nextSibling),h=p.nextSibling,g=r.nextSibling,[_,v]=(0,e.getNextMarker)(g.nextSibling),y=_.nextSibling,[b,x]=(0,e.getNextMarker)(y.nextSibling),S=b.nextSibling,[C,w]=(0,e.getNextMarker)(S.nextSibling),T=C.nextSibling,E=T.firstChild;return t.$$mousedown=e=>{e.stopPropagation(),o.send({type:`SELECT`,payload:i.id})},(0,e.use)(d,t,()=>({skipTransform:!0})),a.$$click=e=>{e.stopPropagation(),o.send({type:`DELETE`,payload:i.id})},(0,e.setStyleProperty)(a,`width`,`24px`),(0,e.setStyleProperty)(a,`height`,`24px`),(0,e.insert)(r,(0,e.createComponent)(n.Show,{get when(){return u()},get children(){var t=(0,e.getNextElement)(B);return t.$$click=()=>o.send({type:`ADD_SIBLING`,payload:i.id}),(0,e.setStyleProperty)(t,`width`,`24px`),(0,e.setStyleProperty)(t,`height`,`24px`),(0,e.runHydrationEvents)(),t}}),p,m),h.$$click=()=>o.send({type:`ADD_CHILD`,payload:i.id}),(0,e.setStyleProperty)(h,`width`,`24px`),(0,e.setStyleProperty)(h,`height`,`24px`),(0,e.insert)(t,(0,e.createComponent)(n.Show,{get when(){return s()?.label},keyed:!0,children:t=>(()=>{var n=(0,e.getNextElement)(U);return(0,e.insert)(n,t),n})()}),_,v),(0,e.insert)(t,(0,e.createComponent)(n.Show,{get when(){return s()?.content},keyed:!0,children:t=>(()=>{var n=(0,e.getNextElement)(W);return(0,e.insert)(n,t),n})()}),b,x),(0,e.insert)(t,(0,e.createComponent)(n.Show,{get when(){return s()?.input||u()},get children(){var t=(0,e.getNextElement)(V),n=t.firstChild;return(0,e.setStyleProperty)(t,`left`,`-18px`),n.$$mouseup=e=>{e.stopPropagation();let t=c()?.from;t?o.send({type:`ADD_EDGE`,payload:{from:t,to:i.id}}):o.send(`CLEAR_NEW_EDGE`)},n.$$mousedown=e=>{e.stopPropagation()},(0,e.setStyleProperty)(n,`width`,`12px`),(0,e.setStyleProperty)(n,`height`,`12px`),(0,e.setStyleProperty)(n,`margin-top`,`12px`),(0,e.runHydrationEvents)(),t}}),C,w),(0,e.setStyleProperty)(T,`right`,`-18px`),E.$$mousedown=e=>{e.stopPropagation(),o.send(`DESELECT`),o.send({type:`START_NEW_EDGE`,payload:i.id})},(0,e.setStyleProperty)(E,`width`,`12px`),(0,e.setStyleProperty)(E,`height`,`12px`),(0,e.setStyleProperty)(E,`margin-top`,`12px`),(0,e.effect)(n=>{var a={"flex flex-col absolute cursor-grab bg-white rounded-md shadow-md select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-lg draggable":!0,"border border-[#e38c29] z-[100]":l(),"border border-[#e6d4be] z-[1]":!l()},o=`${s()?.y??0}px`,c=`${s()?.x??0}px`,u=i.id,d={"pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2":!0,"w-full opacity-100":l(),"w-0 -right-3 opacity-0 overflow-hidden":!l()};return n.e=(0,e.classList)(t,a,n.e),o!==n.t&&(0,e.setStyleProperty)(t,`top`,n.t=o),c!==n.a&&(0,e.setStyleProperty)(t,`left`,n.a=c),u!==n.o&&(0,e.setAttribute)(t,`id`,n.o=u),n.i=(0,e.classList)(r,d,n.i),n},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),(0,e.runHydrationEvents)(),t})()};(0,e.delegateEvents)([`mousedown`,`click`,`mouseup`]);var K=(0,e.template)(`<div class="relative h-full w-full overflow-auto rounded-lg border-2 border-gray-600"><!$><!/><div class="relative cursor-crosshair overflow-hidden"><div class="relative h-full w-full"style="transform-origin:top left"><!$><!/><!$><!/><!$><!/>`),q=(0,e.template)(`<div class="absolute right-4 bottom-4 z-50 flex items-center gap-2 rounded-xl border border-gray-200 bg-white/90 p-2 shadow-lg backdrop-blur-md"><button type=button class="flex size-9 cursor-pointer items-center justify-center rounded-lg bg-gray-100 text-lg font-bold text-gray-700 shadow-sm transition-all duration-150 hover:bg-gray-200 active:scale-95"title="Zoom out"aria-label="Zoom out">-</button><button type=button class="h-9 cursor-pointer rounded-lg px-2 text-xs font-semibold text-gray-700 transition-colors hover:bg-gray-100"title="Reset zoom"aria-label="Reset zoom"><!$><!/>%</button><button type=button class="flex size-9 cursor-pointer items-center justify-center rounded-lg bg-gray-100 text-lg font-bold text-gray-700 shadow-sm transition-all duration-150 hover:bg-gray-200 active:scale-95"title="Zoom in"aria-label="Zoom in">+</button><div class="h-5 w-px bg-gray-300"></div><button type=button class="flex size-9 cursor-pointer items-center justify-center rounded-lg bg-blue-600 text-white shadow transition-all duration-150 hover:bg-blue-700 active:scale-95"title="Add parent node"aria-label="Add parent node"><svg class=size-5 viewBox="0 0 24 24"fill=currentColor><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">`),J=(0,e.template)(`<div class="relative mx-auto h-[calc(100vh-64px)] w-[calc(100vw-32px)] overflow-hidden">`),Y=()=>{let i,[o,s]=(0,n.createSignal)(!1),[c,l]=(0,n.createSignal)({x:0,y:0}),[u,d]=(0,n.createSignal)(``),[f,p]=(0,n.createSignal)(),m=0,h=0,g=O(),_=(0,t.createState)(g,{selector:e=>e.context.newEdge,equals:j}),v=(0,t.createState)(g,{selector:e=>e.context.zoom??1}),y=()=>{let e=f();if(!e)return;let t=e.getBoundingClientRect(),n=()=>f()?.parentElement,r={self:{left:t.left,top:t.top,width:e.clientWidth,height:e.clientHeight},parent:n()?{scrollLeft:n().scrollLeft,scrollTop:n().scrollTop,height:n().clientHeight,width:n().clientWidth}:void 0};g.send({type:`SET_BOARD`,payload:r})},b=()=>{let e=i.scrollWidth-i.clientWidth,t=i.scrollHeight-i.clientHeight;m=e>0?i.scrollLeft/e:0,h=t>0?i.scrollTop/t:0,y()};(0,n.createEffect)((0,n.on)(v,()=>{let e=i.scrollWidth-i.clientWidth,t=i.scrollHeight-i.clientHeight;e>0&&(i.scrollLeft=m*e),t>0&&(i.scrollTop=h*t)},{defer:!0})),(0,n.onMount)(y);let x=(0,t.createState)(g,{selector:e=>e.context?.selected}),S=e=>x()===e,C=(0,t.createState)(g,{selector:({context:e})=>r.toArray.typed(e.data?.nodes).map(e=>e.id),equals:(e,t)=>e.length===t.length}),w=()=>`calc((500vw - 265px) * ${v()})`,T=()=>`calc((500vh - 425px) * ${v()})`;return(()=>{var t=(0,e.getNextElement)(J);return t.addEventListener(`wheel`,e=>{if(e.ctrlKey||e.metaKey){e.preventDefault(),b();let t=e.deltaY<0?.1:-.1;g.send({type:`ZOOM`,payload:t})}}),(0,e.insert)(t,(0,e.createComponent)(a.DragDropProvider,{onDragMove:({draggable:{transform:e,node:t,id:n}})=>{if(d(n),S(n)){let r=t.parentElement?.parentElement,i=v(),a=r?Math.max(0,r.clientWidth/i-t.offsetWidth):1/0,o=r?Math.max(0,r.clientHeight/i-t.offsetHeight):1/0,s=t.offsetLeft+e.x/i,c=t.offsetTop+e.y/i,u=Math.min(Math.max(s,0),a),d=Math.min(Math.max(c,0),o),f=u-t.offsetLeft,p=d-t.offsetTop;t.style.setProperty(`transform`,`translate3d(${f}px, ${p}px, 0)`),g.send({type:`MOVE_IMMEDIATE`,payload:{id:`${n}`,x:u,y:d}}),l({x:f*i,y:p*i})}},onDragEnd:({draggable:{node:e,id:t}})=>{if(!S(t))return;let n=e.parentElement?.parentElement,r=v(),i=n?Math.max(0,n.clientWidth/r-e.offsetWidth):1/0,a=n?Math.max(0,n.clientHeight/r-e.offsetHeight):1/0,o=e.offsetLeft+c().x/r,s=e.offsetTop+c().y/r,u=Math.min(Math.max(o,0),i),d=Math.min(Math.max(s,0),a);e.style.setProperty(`top`,d+`px`),e.style.setProperty(`left`,u+`px`),e.style.removeProperty(`transform`),g.send({type:`MOVE`,payload:{id:`${t}`,x:u,y:d}}),setTimeout(()=>{l({x:0,y:0})},0)},get children(){return[(()=>{var t=(0,e.getNextElement)(K),r=t.firstChild,[c,l]=(0,e.getNextMarker)(r.nextSibling),u=c.nextSibling,d=u.firstChild,f=d.firstChild,[m,h]=(0,e.getNextMarker)(f.nextSibling),y=m.nextSibling,[x,S]=(0,e.getNextMarker)(y.nextSibling),E=x.nextSibling,[D,O]=(0,e.getNextMarker)(E.nextSibling);return t.addEventListener(`scroll`,b),(0,e.use)(e=>i=e,t),(0,e.insert)(t,(0,e.createComponent)(a.DragDropSensors,{}),c,l),u.$$mousedown=e=>{if(_()||e.button!==0)return;g.send(`DESELECT`);let t=e.clientX,n=e.clientY,r=i.scrollLeft,a=i.scrollTop;s(!0);let o=e=>{let o=e.clientX-t,s=e.clientY-n;i.scrollLeft=r-o*3,i.scrollTop=a-s*3,b()},c=()=>{window.removeEventListener(`mousemove`,o),window.removeEventListener(`mouseup`,c),setTimeout(()=>s(!1),200)};window.addEventListener(`mousemove`,o),window.addEventListener(`mouseup`,c)},u.addEventListener(`scroll`,()=>{}),(0,e.use)(p,u),(0,e.insert)(d,(0,e.createComponent)(M,{}),m,h),(0,e.insert)(d,(0,e.createComponent)(z,{}),x,S),(0,e.insert)(d,(0,e.createComponent)(n.For,{get each(){return C()},children:t=>(0,e.createComponent)(G,{id:t})}),D,O),(0,e.effect)(t=>{var n=!!o(),r=T(),i=w(),a=v();return n!==t.e&&u.classList.toggle(`cursor-grabbing`,t.e=n),r!==t.t&&(0,e.setStyleProperty)(u,`height`,t.t=r),i!==t.a&&(0,e.setStyleProperty)(u,`width`,t.a=i),a!==t.o&&(0,e.setStyleProperty)(d,`scale`,t.o=a),t},{e:void 0,t:void 0,a:void 0,o:void 0}),(0,e.runHydrationEvents)(),t})(),(()=>{var t=(0,e.getNextElement)(q),n=t.firstChild,r=n.nextSibling,i=r.firstChild,[a,o]=(0,e.getNextMarker)(i.nextSibling);a.nextSibling;var s=r.nextSibling,c=s.nextSibling.nextSibling;return n.$$click=()=>{b(),g.send({type:`ZOOM`,payload:-.1})},r.$$click=()=>{b(),g.send(`TOGGLE_ZOOM`)},(0,e.insert)(r,()=>Math.round(v()*100),a,o),s.$$click=()=>{b(),g.send({type:`ZOOM`,payload:.1})},c.$$click=()=>g.send(`ADD_PARENT`),(0,e.runHydrationEvents)(),t})(),(0,e.createComponent)(n.Show,{get when(){return!u()||!S(u())},get children(){return(0,e.createComponent)(a.DragOverlay,{children:``})}})]}})),t})()};(0,e.delegateEvents)([`mousedown`,`click`]);var X=(0,e.template)(`<div class="relative h-full w-full"><div class="relative h-full w-full bg-white bg-size-[30px_30px]"style="background-image:radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)">`),Z=r=>{let i=r.config?.nodes??d,a=r.config?.edges,o=O(),s=(0,t.createState)(o,{selector:e=>!!e.context.newEdge});return(0,n.onMount)(()=>{o.resume(),o.send({type:`CONFIGURE`,payload:{nodes:i,edges:a??[]}})}),(0,n.onCleanup)(o.pause),(()=>{var t=(0,e.getNextElement)(X),n=t.firstChild;return t.$$mousemove=e=>{o.send({type:`MOVE_NEW_EDGE`,payload:{x:e.clientX,y:e.clientY}})},t.$$mouseup=()=>o.send(`CLEAR_NEW_EDGE`),(0,e.insert)(n,(0,e.createComponent)(Y,{})),(0,e.effect)(t=>(0,e.setStyleProperty)(n,`cursor`,s()?`inherit`:`crosshair`)),(0,e.runHydrationEvents)(),t})()};(0,e.delegateEvents)([`mouseup`,`mousemove`]);var Q=t=>(0,e.createComponent)(D,{get children(){return(0,e.createComponent)(Z,t)}});exports.CLASSES=o,exports.Flow=Q;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("solid-js/web"),t=require("@bemedev/app-solidjs"),n=require("solid-js"),r=require("@bemedev/app"),i=require("@bemedev/app/bemedev"),a=require("@thisbeyond/solid-dnd");var o=`fill-transparent cursor-pointer relative stroke-[rgba(168,168,168,0.4)] stroke-3 stroke-[rgba(168,168,168,1)] stroke-4 z-100 stroke-[rgba(168,168,168,0.8)] pointer-events-all w-[100px] h-[100px] bg-white fill-white pointer-events-none absolute top-0 w-full h-full overflow-hidden overflow-auto h-[150vh] w-[2160px] bg-size-[30px_30px] flex flex-col cursor-grab rounded-md shadow-[1px_1px_11px_-6px_rgba(0,0,0,0.75)] select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-[2px_2px_12px_-6px_rgba(0,0,0,0.75)] draggable border border-[#e38c29] z-[100] border-[#e6d4be] z-[1] items-center justify-end -top-[30px] right-0 transition-all space-x-2 opacity-100 w-0 -right-3 opacity-0 w-6 h-6 fill-[#a11111] rounded-full size-6 bg-green-500 p-0.5 hover:bg-green-600 font-bold text-center overflow-visible bg-blue-500 text-white rounded-lg hover:bg-blue-600 justify-center p-3 border-b border-[#f0f0f0] cursor-default z-[-3] -left-[18px] bg-[#e38b29] w-3 h-3 my-3 -right-[18px] cursor-crosshair mt-3`.split(` `),s=10.5,c={x:-10.5,y:18},l=(e=0)=>({x:e+s,y:18}),u={horizontal:55,vertical:40},d=[{id:`node-0`,data:{content:`Some text`,label:`Root node`},input:!1,position:{x:350,y:100}}],f=(e,t)=>{let r=(0,n.createContext)(e(),t);return[({children:e})=>r.Provider({value:r.defaultValue,children:e}),()=>(0,n.useContext)(r),r]},p=`useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict`,m=(e=21)=>{let t=``,n=crypto.getRandomValues(new Uint8Array(e|=0));for(;e--;)t+=p[n[e]&63];return t},h=(e,t)=>`edge = ${e} => ${t}`,g=e=>`node-${e}`,_=(e,t={width:192,height:50,inputOffset:c})=>{let n=t.width,r=t.height,i=t.outputOffset??l(n),a=t.inputOffset;return{width:n,height:r,output:{x:e.x+i.x,y:e.y+i.y},input:{x:e.x+a.x,y:e.y+a.y},outputOffset:i,inputOffset:a}},v=(0,i.type)({x:`number`,y:`number`});(0,i.type)(({optional:e,use:t})=>({input:e(t(v)),output:t(v)}));var y=(0,i.type)({from:`string`,to:`string`}),b=(0,i.type)(({optional:e,use:t})=>({position:t(v),data:{label:e(`string`),content:`string`},input:`boolean`})),x=y,S=(0,i.type)(({optional:e,use:t})=>({width:`number`,height:`number`,output:t(v),input:e(t(v)),inputOffset:e(t(v)),outputOffset:e(t(v))})),C=(0,i.type)({x0:`number`,y0:`number`,x1:`number`,y1:`number`}),w=(0,i.type)(({intersection:e,use:t})=>e({from:`string`},t(C))),T=(0,i.type)(({optional:e})=>({self:{left:`number`,top:`number`,width:`number`,height:`number`},parent:e({scrollLeft:`number`,scrollTop:`number`,height:`number`,width:`number`})})),E=(0,r.createMachine)({initial:`idle`,on:{SET_BOARD:{actions:[`setBoard`]}},states:{idle:{on:{CONFIGURE:{actions:[`configure`],target:`/working`},CONFIGURE_EMPTY:`/working`}},construction:{always:{actions:[`buildUI`],target:`/working`}},working:{on:{MOVE_IMMEDIATE:{actions:[{name:`buildUI`,description:`Must be in the ui`}]},ADD_CHILD:{actions:[`generateID`,{name:`placeChild`,description:`Must be in the ui`},`linkChild`],target:`/construction`},ADD_PARENT:{actions:[`generateID`,{name:`placeParent`,description:`Must be in the ui`},`selectParent`],target:`/construction`},ADD_DIMENSION:{actions:[`addDimension`]},ADD_SIBLING:{actions:[`generateID`,{name:`placeSibling`,description:`Must be in the ui`},`linkSibling`],target:`/construction`},MOVE:{actions:[`moveNode`,`buildUI`],target:`/construction`},ADD_EDGE:{actions:[`addEdge`],target:`/construction`},START_NEW_EDGE:{actions:[`startNewEdge`]},MOVE_NEW_EDGE:{actions:[`moveNewEdge`]},CLEAR_NEW_EDGE:{actions:[`clearNewEdge`]},DELETE:{actions:[`delete`],target:`/construction`},SELECT:{actions:[`select`]},DESELECT:{actions:[`deselect`]},ZOOM:{actions:[`zoom`]},TOGGLE_ZOOM:{actions:[`toggleZoom`]},SET_BOARD:{actions:[`setBoard`]}}}}},{eventsMap:(0,i.type)(({intersection:e,use:t,array:n})=>({CONFIGURE:{nodes:n(e(t(b),{id:`string`})),edges:n(e(t(x),{id:`string`}))},SET_BOARD:t(T),CONFIGURE_EMPTY:`never`,MOVE:{id:`string`,x:`number`,y:`number`},MOVE_IMMEDIATE:{id:`string`,x:`number`,y:`number`},ADD_CHILD:`string`,ADD_PARENT:`never`,ADD_SIBLING:`string`,DELETE:`string`,SELECT:`string`,DESELECT:`never`,ADD_EDGE:t(y),START_NEW_EDGE:`string`,MOVE_NEW_EDGE:t(v),CLEAR_NEW_EDGE:`never`,ZOOM:`number`,TOGGLE_ZOOM:`never`,ADD_DIMENSION:{id:`string`,dimension:t(S)}})),sync:!0,pContext:(0,i.type)(({union:e,optional:t,record:n,use:r,custom:i})=>({generatedId:e(`string`,`null`),previousZoom:t(`number`),dimensions:n(r(S)),getBoardPosition:i(),clampPosition:i(),calculateDimensions:i()})),context:(0,i.type)(({optional:e,use:t,array:n,record:r})=>({data:e({nodes:n({...t(b),id:`string`}),edges:n({...t(x),id:`string`})}),board:e(t(T)),edgesPositions:r(t(C)),newEdge:e(t(w)),selected:e(`string`),updatingUI:e(`boolean`),zoom:`number`,bounds:t(v)}))}).provideOptions(({assign:e,batch:t,erase:n,filter:r,action:a})=>({actions:{configure:t(e(`data`,{CONFIGURE:({payload:e})=>e}),e(`newEdge`,()=>void 0),e(`updatingUI`,()=>!1),a(({pContext:e})=>{e.generatedId=null}),a({CONFIGURE:({payload:{nodes:e},pContext:{dimensions:t}})=>{e.forEach(({id:e,position:n})=>{t[e]=_(n)})}})),startNewEdge:e(`newEdge`,{START_NEW_EDGE:({payload:e,pContext:{dimensions:t}})=>{let{x:n,y:r}=t[e].output;return{from:e,x0:n,y0:r,x1:n,y1:r}}}),setBoard:e(`board`,{SET_BOARD:({payload:e})=>e}),buildUI:t(e(`edgesPositions`,{MOVE:({context:{data:e,edgesPositions:t},payload:n,pContext:{dimensions:r}})=>{let i=e?.edges,a=r[n.id],o=a?.outputOffset??l(a?.width),s=a?.inputOffset??c,u={x:n.x+o.x,y:n.y+o.y},d={x:n.x+s.x,y:n.y+s.y};return a&&(a.output=u,a.input=d),i?.forEach(({from:e,to:r,id:i})=>{e===n.id&&(t[i].x0=u.x,t[i].y0=u.y),r===n.id&&(t[i].x1=d.x,t[i].y1=d.y)}),t},MOVE_IMMEDIATE:({context:{data:e,edgesPositions:t},payload:n,pContext:{dimensions:r}})=>((e?.edges)?.forEach(({from:e,to:i,id:a})=>{if(e===n.id){let e=r[n.id],i=e?.outputOffset??l(e?.width),o=n.x+i.x,s=n.y+i.y;t[a].x0=o,t[a].y0=s,e&&(e.output.x=o,e.output.y=s)}if(i===n.id){let e=r[n.id],i=e?.inputOffset??c,o=n.x+i.x,s=n.y+i.y;t[a].x1=o,t[a].y1=s,e&&(e.input={x:o,y:s})}}),t),else:({context:{data:e,edgesPositions:t},pContext:{dimensions:n}})=>{let r=e?.edges??[];return t={},r.forEach(({from:e,id:r,to:i})=>{let a=n[e]?.output,o=n[i]?.input;a&&o?t[r]={x0:a.x,y0:a.y,x1:o.x,y1:o.y}:delete t[r]}),t}}),e(`updatingUI`,()=>!0)),addDimension:a({ADD_DIMENSION:({payload:{id:e,dimension:t},pContext:{dimensions:n}})=>{n[e]=t}}),generateID:a(({pContext:e})=>{e.generatedId=m()}),linkChild:t(e(`data.edges`,{ADD_CHILD:({context:{data:e},pContext:t,payload:n})=>{let r=i.toArray.typed(e?.edges),a=n,o=t?.generatedId,s=g(o),c=h(a,s);return r.push({id:c,from:a,to:s}),r}}),e(`selected`,({pContext:{generatedId:e}})=>g(e))),linkSibling:t(e(`data.edges`,{ADD_SIBLING:({pContext:e,payload:t,context:{data:n}})=>{let r=i.toArray.typed(n?.edges),a=e?.generatedId,o=r.find(({to:e})=>e===t)?.from;if(!o)return r;let s=g(a),c=h(o,s);return r.push({from:o,to:s,id:c}),r}}),e(`selected`,({pContext:{generatedId:e}})=>g(e))),selectParent:e(`selected`,({pContext:{generatedId:e}})=>g(e)),moveNode:e(`data.nodes`,{MOVE:({context:{data:e},payload:t})=>{let{id:n,x:r,y:i}=t;return e?.nodes?.map(e=>e.id===n?{...e,position:{x:r,y:i}}:e)??[]}}),select:e(`selected`,{SELECT:({payload:e})=>e}),delete:t(r(`data.edges`,{DELETE:({id:e,from:t,to:n},r,{payload:i})=>e!==i&&t!==i&&n!==i}),r(`data.nodes`,{DELETE:({id:e},t,{payload:n})=>e!==n})),addEdge:t(e(`data.edges`,{ADD_EDGE:({context:e,payload:{from:t,to:n}})=>{let r=e.data?.edges??[],i=h(t,n);return r.some(e=>e.id===i)?r:[...r,{id:i,from:t,to:n}]}}),n(`newEdge`)),clearNewEdge:n(`newEdge`),deselect:n(`selected`),zoom:e(`zoom`,{ZOOM:({context:{zoom:e},payload:t,pContext:n})=>{let r=e+t,i=Math.min(Math.max(Number(r.toFixed(2)),.2),3);return n.previousZoom=void 0,i}}),toggleZoom:e(`zoom`,{TOGGLE_ZOOM:({context:{zoom:e},pContext:t})=>{let n=t.previousZoom;return n===void 0?(t.previousZoom=e,1):(t.previousZoom=void 0,n)}})}})),[D,O]=f(()=>{let e=(0,r.interpret)(E,{context:{zoom:1,edgesPositions:{},bounds:{x:0,y:0}},pContext:{generatedId:null,dimensions:{},getBoardPosition(t,n,r){if(!r)return{x:t,y:n};let i=e.state.context.zoom;return{x:(t-r.self.left)/i,y:(n-r.self.top)/i}},clampPosition(t,n,r,i=192,a=50){let o=t?.parent;if(!o)return{x:n,y:r};let s=e.state.context.zoom??1,c=o.scrollLeft/s+u.horizontal,l=Math.max(c,(o.scrollLeft+o.width)/s-u.horizontal-i),d=o.scrollTop/s+u.vertical,f=Math.max(d,(o.scrollTop+o.height)/s-u.vertical-a);return{x:Math.min(Math.max(n,c),l),y:Math.min(Math.max(r,d),f)}},calculateDimensions:(e,t={width:192,height:50,inputOffset:c})=>{let n=t.width,r=t.height,i=t.outputOffset??l(n),a=t.inputOffset;return{width:n,height:r,output:{x:e.x+i.x,y:e.y+i.y},input:{x:e.x+a.x,y:e.y+a.y},outputOffset:i,inputOffset:a}}}});return e.addOptions(({assign:e})=>({actions:{placeChild:e(`data.nodes`,{ADD_CHILD:({payload:e,context:{data:t,board:n},pContext:r})=>{if(!n)return t?.nodes;let i=t?.nodes;if(!e)return i;let a=i?.find(t=>t.id===e);if(!a)return i;let o=r.dimensions[e],s=`node-${r.generatedId}`,c=o?.width??192,l=o?.height??50,u=a.position.x+c+100,d=a.position.y,f=r.clampPosition(n,u,d,c,l),p=r.calculateDimensions(f,o);return i?.push({id:s,data:{content:`<Nouveau nœud>`},input:!0,position:f}),r.dimensions[s]=p,i}}),placeParent:e(`data.nodes`,{ADD_PARENT:({context:{data:e,zoom:t=1,board:n},pContext:r})=>{if(!n)return e?.nodes;let i=e?.nodes,a=`node-${r.generatedId}`,o=n.parent,s=o?.scrollLeft??0,c=o?.scrollTop??0,l=o?.width??0,u=o?.height??0,d=t,f=(s+l/2)/d,p=(c+u/2)/d,m=r.clampPosition(n,f,p),h=r.calculateDimensions(m);return i?.push({id:a,data:{content:`<Nouveau nœud>`},input:!1,position:m}),r.dimensions[a]=h,i}}),placeSibling:e(`data.nodes`,{ADD_SIBLING:({payload:e,context:{data:t,board:n},pContext:r})=>{if(!n)return t?.nodes;let i=t?.edges,a=t?.nodes,o=i?.find(t=>t.to===e)?.from;if(!o)return a;let s=a?.find(e=>e.id===o);if(!s)return a;let c=r.dimensions[o],l=`node-${r.generatedId}`,u=c?.width??192,d=c?.height??50,f=s.position.x+u+100,p=s.position.y+100,m=r.clampPosition(n,f,p,u,d),h=r.calculateDimensions(m,c);return a?.push({id:l,data:{content:`<Nouveau nœud>`},input:!0,position:m}),r.dimensions[l]=h,a}}),moveNewEdge:e(`newEdge`,{MOVE_NEW_EDGE:({context:{newEdge:e,board:t},payload:n,pContext:r})=>{if(!t||!e)return;let{x:i,y:a}=r.getBoardPosition(n.x,n.y,t);return{...e,x1:i,y1:a}}})}})),e.start(),e},{name:`FlowContext`}),k=Object.prototype.hasOwnProperty;function A(e,t,n){for(n of e.keys())if(j(n,t))return n}function j(e,t){var n,r,i;if(e===t)return!0;if(e&&t&&(n=e.constructor)===t.constructor){if(n===Date)return e.getTime()===t.getTime();if(n===RegExp)return e.toString()===t.toString();if(n===Array){if((r=e.length)===t.length)for(;r--&&j(e[r],t[r]););return r===-1}if(n===Set){if(e.size!==t.size)return!1;for(r of e)if(i=r,i&&typeof i==`object`&&(i=A(t,i),!i)||!t.has(i))return!1;return!0}if(n===Map){if(e.size!==t.size)return!1;for(r of e)if(i=r[0],i&&typeof i==`object`&&(i=A(t,i),!i)||!j(r[1],t.get(i)))return!1;return!0}if(n===ArrayBuffer)e=new Uint8Array(e),t=new Uint8Array(t);else if(n===DataView){if((r=e.byteLength)===t.byteLength)for(;r--&&e.getInt8(r)===t.getInt8(r););return r===-1}if(ArrayBuffer.isView(e)){if((r=e.byteLength)===t.byteLength)for(;r--&&e[r]===t[r];);return r===-1}if(!n||typeof e==`object`){for(n in r=0,e)if(k.call(e,n)&&++r&&!k.call(t,n)||!(n in t)||!j(e[n],t[n]))return!1;return Object.keys(t).length===r}}return e!==e&&t!==t}var M=()=>{let e=O(),n=(0,t.createState)(e,{selector:({context:e})=>e.zoom}),r=(0,t.createState)(e,{selector:({context:e})=>e.board}),[i,{addTransformer:o,removeTransformer:s,onDragStart:c,onDragEnd:l}]=(0,a.useDragDropContext)(),d={id:`clamp-to-container`,order:100,callback:e=>{let t=r()?.self,a=i.active.draggable;if(!t||!a)return e;let o=a.node;if(!o)return e;let s=n(),c=u.horizontal,l=Math.max(c,t.width/s-o.offsetWidth-u.horizontal),d=u.vertical,f=Math.max(d,t.height/s-o.offsetHeight-u.vertical),p=(c-o.offsetLeft)*s,m=(l-o.offsetLeft)*s,h=(d-o.offsetTop)*s,g=(f-o.offsetTop)*s;return{x:Math.min(Math.max(e.x,p),m),y:Math.min(Math.max(e.y,h),g)}}};return c(({draggable:e})=>{o(`draggables`,e.id,d)}),l(({draggable:e})=>{s(`draggables`,e.id,d.id)}),null},N=(0,e.template)(`<svg><path class="relative cursor-pointer fill-transparent"></svg>`,!1,!0,!1),P=(0,e.template)(`<svg><g cursor=pointer style=pointer-events:all;z-index:30><circle cx=0 cy=0 r=12 fill="rgba(168, 168, 168, 1)"></circle><svg fill=currentColor stroke-width=0 xmlns=http://www.w3.org/2000/svg class="h-25 w-25 bg-white fill-white"width=20 height=20 viewBox="0 0 20 20"color=white x=-10 y=-10><path d="M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z"></svg>`,!1,!0,!1),F=e=>e*100/200,I=({x0:e,y0:t,x1:n,y1:r})=>`M ${e} ${t} C ${e+F(Math.abs(n-e))} ${t}, ${n-F(Math.abs(n-e))} ${r}, ${n} ${r}`,L=r=>{let i=O(),a=(0,t.createState)(i,{selector:({context:{newEdge:e,edgesPositions:t}})=>r.isNew?e:t[r.id],equals:j}),o=(0,t.createState)(i,{selector:e=>e.context.selected===r.id}),s=()=>{let e=a();return{x:e.x0+(e.x1-e.x0)/2,y:e.y0+(e.y1-e.y0)/2}};return[(()=>{var t=(0,e.getNextElement)(N);return t.$$mousedown=e=>(e.stopPropagation(),i.send({type:`SELECT`,payload:r.id})),(0,e.effect)(n=>{var i={"stroke-[rgba(168,168,168,0.4)] stroke-3 z-200":!!r.isNew,"stroke-[rgba(168,168,168,1)] stroke-4 z-100":o()&&!r.isNew,"stroke-[rgba(168,168,168,0.8)] stroke-3":!o()&&!r.isNew},s=r.isNew?`none`:`all`,c=I(a());return n.e=(0,e.classList)(t,i,n.e),s!==n.t&&(0,e.setStyleProperty)(t,`pointer-events`,n.t=s),c!==n.a&&(0,e.setAttribute)(t,`d`,n.a=c),n},{e:void 0,t:void 0,a:void 0}),(0,e.runHydrationEvents)(),t})(),(0,e.createComponent)(n.Show,{get when(){return o()},get children(){var t=(0,e.getNextElement)(P);return t.$$mousedown=e=>{e.stopPropagation(),i.send({type:`DELETE`,payload:r.id})},(0,e.effect)(()=>(0,e.setAttribute)(t,`transform`,`translate(${s().x}, ${s().y})`)),(0,e.runHydrationEvents)(),t}})]};(0,e.delegateEvents)([`mousedown`]);var R=(0,e.template)(`<svg class="pointer-events-none h-full w-full overflow-visible"><!$><!/><!$><!/>`),z=()=>{let r=O(),i=(0,t.createState)(r,{selector:e=>!!e.context.newEdge}),a=(0,t.createState)(r,{selector:({context:e})=>Object.keys(e.edgesPositions),equals:(e,t)=>e.length===t.length});return(()=>{var t=(0,e.getNextElement)(R),r=t.firstChild,[o,s]=(0,e.getNextMarker)(r.nextSibling),c=o.nextSibling,[l,u]=(0,e.getNextMarker)(c.nextSibling);return(0,e.insert)(t,(0,e.createComponent)(n.Show,{get when(){return i()},get children(){return(0,e.createComponent)(L,{id:`__#new-edge#__TEMP`,isNew:!0})}}),o,s),(0,e.insert)(t,(0,e.createComponent)(n.For,{get each(){return a()},children:t=>(0,e.createComponent)(L,{id:t})}),l,u),t})()},B=(0,e.template)(`<svg class="cursor-pointer overflow-visible rounded-full bg-green-500 p-0.5 text-center font-bold hover:bg-green-600"viewBox="0 0 1024 1024"preserveAspectRatio=xMaxYMax xmlns=http://www.w3.org/2000/svg fill=white style=pointer-events:all;fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2><g id=background><path d="M467.40667,277.66696c-0.05948,-14.53055 5.75527,-22.95613 -8.62044,-20.90487c-112.55699,16.0607 -222.1609,112.14558 -245.06161,239.85765c-46.52056,259.43466 231.33083,443.06705 449.51209,316.97506c117.31668,-67.80002 160.95215,-190.43324 151.34416,-288.29849c-5.92276,-60.32819 -27.80273,-107.95668 -53.44246,-144.25469l59.39269,-42.05363c111.72214,156.309 73.11535,351.55635 -25.06953,459.45565c-184.18877,202.4124 -470.46624,145.52064 -592.95027,-32.92123c-156.18269,-227.53604 -27.15324,-543.64371 261.18883,-582.44416c5.0579,-0.68061 3.56556,-7.04079 3.56442,-8.58985c-0.05594,-76.3354 -0.11021,-76.7687 1.10909,-77.24589c2.06886,-0.80969 151.41433,118.4561 151.92482,118.95524c4.65592,4.55233 -0.99548,7.829 -29.07828,30.50907c-120.49369,97.31245 -120.4977,98.55675 -123.0691,97.87586c-0.43639,-0.11555 -0.80698,-0.31322 -0.74442,-66.91571Z"></path><path d="M316.61562,611.03414c0.11517,-90.16257 -0.25516,-99.92912 0.64739,-101.78856c1.56486,-3.22393 131.99102,0.91032 134.6959,-1.89763c2.21336,-2.2977 -0.59362,-129.97807 1.1376,-132.37034c0.7253,-1.00225 11.10552,-0.99175 12.07474,-0.99077c104.50336,0.10564 104.90098,-0.37811 105.967,0.85765c1.56461,1.81373 0.25596,114.18436 0.67852,129.81412c0.1322,4.88975 3.22386,3.28152 99.72028,3.4563c33.0841,0.05992 36.14259,-1.40368 36.21852,4.50462c0.11713,9.11348 1.41954,110.45369 -0.40274,113.92715c-1.81106,3.45208 -130.39967,-0.42618 -134.48289,1.62075c-2.29035,1.14816 -0.36989,101.12392 -1.11542,130.51904c-0.09548,3.76459 -2.13506,3.20617 -47.84854,3.17365c-69.30253,-0.0493 -69.31099,-0.25627 -69.65762,-0.42191c-3.77927,-1.80595 0.16287,-129.33555 -2.24266,-132.58994c-1.79931,-2.43424 -124.06108,-0.29118 -132.80252,-0.97392c-3.81102,-0.29766 -2.58229,-14.8847 -2.58758,-16.8402Z">`),V=(0,e.template)(`<div id=outputs class="pointer-events-none absolute top-0 z-10 flex cursor-default flex-col"><div class="cursor-default rounded-full bg-[#e38b29] shadow-md"style=pointer-events:all>`),H=(0,e.template)(`<div class=min-w-48><div><svg class="cursor-pointer rounded-full fill-[#a11111] opacity-100 transition-all duration-200 ease-in-out"fill=currentColor stroke-width=2 viewBox="4 4 16 16"style=overflow:visible;pointer-events:all><path d="M12 4c-4.419 0-8 3.582-8 8s3.581 8 8 8 8-3.582 8-8-3.581-8-8-8zm3.707 10.293a.999.999 0 11-1.414 1.414L12 13.414l-2.293 2.293a.997.997 0 01-1.414 0 .999.999 0 010-1.414L10.586 12 8.293 9.707a.999.999 0 111.414-1.414L12 10.586l2.293-2.293a.999.999 0 111.414 1.414L13.414 12l2.293 2.293z"></path></svg><!$><!/><svg class="flex cursor-pointer items-center justify-center rounded-lg bg-blue-500 p-0.5 text-center font-bold text-white hover:bg-blue-600"viewBox="0 0 24 24"stroke=currentColor stroke-width=2 style=pointer-events:all><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg></div><!$><!/><!$><!/><!$><!/><div id=inputs class="pointer-events-none absolute top-0 z-10 flex flex-col"><div class="cursor-crosshair rounded-full bg-[#e38b29] shadow-md"style=pointer-events:all>`),U=(0,e.template)(`<span class="min-w-max border-b border-[#f0f0f0] p-3 whitespace-nowrap text-red-600 select-none">`),W=(0,e.template)(`<div class="p-3 select-none">`),G=i=>{let o=O(),s=(0,t.createState)(o,{selector:({context:e})=>{let t=r.toArray.typed(e.data?.nodes).find(e=>e.id===i.id);return{x:t.position.x,y:t.position.y,label:t.data.label,content:t.data.content??``,input:t.input}},equals:j}),c=(0,t.createState)(o,{selector:e=>e.context.newEdge}),l=(0,t.createState)(o,{selector:e=>e.context.selected===i.id}),u=(0,t.createState)(o,{selector:({context:{data:e}})=>{let t=e?.edges;return t?t.some(({to:e})=>e===i.id):!1}}),d=(0,a.createDraggable)(i.id);return(()=>{var t=(0,e.getNextElement)(H),r=t.firstChild,a=r.firstChild,f=a.nextSibling,[p,m]=(0,e.getNextMarker)(f.nextSibling),h=p.nextSibling,g=r.nextSibling,[_,v]=(0,e.getNextMarker)(g.nextSibling),y=_.nextSibling,[b,x]=(0,e.getNextMarker)(y.nextSibling),S=b.nextSibling,[C,w]=(0,e.getNextMarker)(S.nextSibling),T=C.nextSibling,E=T.firstChild;return t.$$mousedown=e=>{e.stopPropagation(),o.send({type:`SELECT`,payload:i.id})},(0,e.use)(d,t,()=>({skipTransform:!0})),a.$$click=e=>{e.stopPropagation(),o.send({type:`DELETE`,payload:i.id})},(0,e.setStyleProperty)(a,`width`,`24px`),(0,e.setStyleProperty)(a,`height`,`24px`),(0,e.insert)(r,(0,e.createComponent)(n.Show,{get when(){return u()},get children(){var t=(0,e.getNextElement)(B);return t.$$click=()=>o.send({type:`ADD_SIBLING`,payload:i.id}),(0,e.setStyleProperty)(t,`width`,`24px`),(0,e.setStyleProperty)(t,`height`,`24px`),(0,e.runHydrationEvents)(),t}}),p,m),h.$$click=()=>o.send({type:`ADD_CHILD`,payload:i.id}),(0,e.setStyleProperty)(h,`width`,`24px`),(0,e.setStyleProperty)(h,`height`,`24px`),(0,e.insert)(t,(0,e.createComponent)(n.Show,{get when(){return s().label},keyed:!0,children:t=>(()=>{var n=(0,e.getNextElement)(U);return(0,e.insert)(n,t),n})()}),_,v),(0,e.insert)(t,(0,e.createComponent)(n.Show,{get when(){return s().content},keyed:!0,children:t=>(()=>{var n=(0,e.getNextElement)(W);return(0,e.insert)(n,t),n})()}),b,x),(0,e.insert)(t,(0,e.createComponent)(n.Show,{get when(){return s().input||u()},get children(){var t=(0,e.getNextElement)(V),n=t.firstChild;return(0,e.setStyleProperty)(t,`left`,`-18px`),n.$$mouseup=e=>{e.stopPropagation();let t=c()?.from;t?o.send({type:`ADD_EDGE`,payload:{from:t,to:i.id}}):o.send(`CLEAR_NEW_EDGE`)},n.$$mousedown=e=>{e.stopPropagation()},(0,e.setStyleProperty)(n,`width`,`12px`),(0,e.setStyleProperty)(n,`height`,`12px`),(0,e.setStyleProperty)(n,`margin-top`,`12px`),(0,e.runHydrationEvents)(),t}}),C,w),(0,e.setStyleProperty)(T,`right`,`-18px`),E.$$mousedown=e=>{e.stopPropagation(),o.send(`DESELECT`),o.send({type:`START_NEW_EDGE`,payload:i.id})},(0,e.setStyleProperty)(E,`width`,`12px`),(0,e.setStyleProperty)(E,`height`,`12px`),(0,e.setStyleProperty)(E,`margin-top`,`12px`),(0,e.effect)(n=>{var a={"flex flex-col absolute cursor-grab bg-white rounded-md shadow-md select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-lg draggable":!0,"border border-[#e38c29] z-[100]":l(),"border border-[#e6d4be] z-[1]":!l()},o=`${s().y}px`,c=`${s().x}px`,u=i.id,d={"pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2":!0,"w-full opacity-100":l(),"w-0 -right-3 opacity-0 overflow-hidden":!l()};return n.e=(0,e.classList)(t,a,n.e),o!==n.t&&(0,e.setStyleProperty)(t,`top`,n.t=o),c!==n.a&&(0,e.setStyleProperty)(t,`left`,n.a=c),u!==n.o&&(0,e.setAttribute)(t,`id`,n.o=u),n.i=(0,e.classList)(r,d,n.i),n},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),(0,e.runHydrationEvents)(),t})()};(0,e.delegateEvents)([`mousedown`,`click`,`mouseup`]);var K=(0,e.template)(`<div class="relative h-full w-full overflow-auto rounded-lg border-2 border-gray-600"><!$><!/><div class="relative cursor-crosshair overflow-hidden"><div class="relative h-full w-full"style="transform-origin:top left"><!$><!/><!$><!/><!$><!/>`),q=(0,e.template)(`<div class="absolute right-4 bottom-4 z-50 flex items-center gap-2 rounded-xl border border-gray-200 bg-white/90 p-2 shadow-lg backdrop-blur-md"><button type=button class="flex size-9 cursor-pointer items-center justify-center rounded-lg bg-gray-100 text-lg font-bold text-gray-700 shadow-sm transition-all duration-150 hover:bg-gray-200 active:scale-95"title="Zoom out"aria-label="Zoom out">-</button><button type=button class="h-9 cursor-pointer rounded-lg px-2 text-xs font-semibold text-gray-700 transition-colors hover:bg-gray-100"title="Reset zoom"aria-label="Reset zoom"><!$><!/>%</button><button type=button class="flex size-9 cursor-pointer items-center justify-center rounded-lg bg-gray-100 text-lg font-bold text-gray-700 shadow-sm transition-all duration-150 hover:bg-gray-200 active:scale-95"title="Zoom in"aria-label="Zoom in">+</button><div class="h-5 w-px bg-gray-300"></div><button type=button class="flex size-9 cursor-pointer items-center justify-center rounded-lg bg-blue-600 text-white shadow transition-all duration-150 hover:bg-blue-700 active:scale-95"title="Add parent node"aria-label="Add parent node"><svg class=size-5 viewBox="0 0 24 24"fill=currentColor><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">`),J=(0,e.template)(`<div class="relative mx-auto h-[calc(100vh-64px)] w-[calc(100vw-32px)] overflow-hidden">`),Y=()=>{let i,[o,s]=(0,n.createSignal)(!1),[c,l]=(0,n.createSignal)({x:0,y:0}),[u,d]=(0,n.createSignal)(``),[f,p]=(0,n.createSignal)(),m=0,h=0,g=O(),_=(0,t.createState)(g,{selector:e=>e.context.newEdge,equals:j}),v=(0,t.createState)(g,{selector:e=>e.context.zoom??1}),y=()=>{let e=f();if(!e)return;let t=e.getBoundingClientRect(),n=()=>f()?.parentElement,r={self:{left:t.left,top:t.top,width:e.clientWidth,height:e.clientHeight},parent:n()?{scrollLeft:n().scrollLeft,scrollTop:n().scrollTop,height:n().clientHeight,width:n().clientWidth}:void 0};g.send({type:`SET_BOARD`,payload:r})},b=()=>{let e=i.scrollWidth-i.clientWidth,t=i.scrollHeight-i.clientHeight;m=e>0?i.scrollLeft/e:0,h=t>0?i.scrollTop/t:0,y()};(0,n.createEffect)((0,n.on)(v,()=>{let e=i.scrollWidth-i.clientWidth,t=i.scrollHeight-i.clientHeight;e>0&&(i.scrollLeft=m*e),t>0&&(i.scrollTop=h*t)},{defer:!0})),(0,n.onMount)(y);let x=(0,t.createState)(g,{selector:e=>e.context?.selected}),S=e=>x()===e,C=(0,t.createState)(g,{selector:({context:e})=>r.toArray.typed(e.data?.nodes).map(e=>e.id),equals:(e,t)=>e.length===t.length}),w=()=>`calc((500vw - 265px) * ${v()})`,T=()=>`calc((500vh - 425px) * ${v()})`;return(()=>{var t=(0,e.getNextElement)(J);return t.addEventListener(`wheel`,e=>{if(e.ctrlKey||e.metaKey){e.preventDefault(),b();let t=e.deltaY<0?.1:-.1;g.send({type:`ZOOM`,payload:t})}}),(0,e.insert)(t,(0,e.createComponent)(a.DragDropProvider,{onDragMove:({draggable:{transform:e,node:t,id:n}})=>{if(d(n),S(n)){let r=t.parentElement?.parentElement,i=v(),a=r?Math.max(0,r.clientWidth/i-t.offsetWidth):1/0,o=r?Math.max(0,r.clientHeight/i-t.offsetHeight):1/0,s=t.offsetLeft+e.x/i,c=t.offsetTop+e.y/i,u=Math.min(Math.max(s,0),a),d=Math.min(Math.max(c,0),o),f=u-t.offsetLeft,p=d-t.offsetTop;t.style.setProperty(`transform`,`translate3d(${f}px, ${p}px, 0)`),g.send({type:`MOVE_IMMEDIATE`,payload:{id:`${n}`,x:u,y:d}}),l({x:f*i,y:p*i})}},onDragEnd:({draggable:{node:e,id:t}})=>{if(!S(t))return;let n=e.parentElement?.parentElement,r=v(),i=n?Math.max(0,n.clientWidth/r-e.offsetWidth):1/0,a=n?Math.max(0,n.clientHeight/r-e.offsetHeight):1/0,o=e.offsetLeft+c().x/r,s=e.offsetTop+c().y/r,u=Math.min(Math.max(o,0),i),d=Math.min(Math.max(s,0),a);e.style.setProperty(`top`,d+`px`),e.style.setProperty(`left`,u+`px`),e.style.removeProperty(`transform`),g.send({type:`MOVE`,payload:{id:`${t}`,x:u,y:d}}),setTimeout(()=>{l({x:0,y:0})},0)},get children(){return[(()=>{var t=(0,e.getNextElement)(K),r=t.firstChild,[c,l]=(0,e.getNextMarker)(r.nextSibling),u=c.nextSibling,d=u.firstChild,f=d.firstChild,[m,h]=(0,e.getNextMarker)(f.nextSibling),y=m.nextSibling,[x,S]=(0,e.getNextMarker)(y.nextSibling),E=x.nextSibling,[D,O]=(0,e.getNextMarker)(E.nextSibling);return t.addEventListener(`scroll`,b),(0,e.use)(e=>i=e,t),(0,e.insert)(t,(0,e.createComponent)(a.DragDropSensors,{}),c,l),u.$$mousedown=e=>{if(_()||e.button!==0)return;g.send(`DESELECT`);let t=e.clientX,n=e.clientY,r=i.scrollLeft,a=i.scrollTop;s(!0);let o=e=>{let o=e.clientX-t,s=e.clientY-n;i.scrollLeft=r-o*3,i.scrollTop=a-s*3,b()},c=()=>{window.removeEventListener(`mousemove`,o),window.removeEventListener(`mouseup`,c),setTimeout(()=>s(!1),200)};window.addEventListener(`mousemove`,o),window.addEventListener(`mouseup`,c)},u.addEventListener(`scroll`,()=>{}),(0,e.use)(p,u),(0,e.insert)(d,(0,e.createComponent)(M,{}),m,h),(0,e.insert)(d,(0,e.createComponent)(z,{}),x,S),(0,e.insert)(d,(0,e.createComponent)(n.For,{get each(){return C()},children:t=>(0,e.createComponent)(G,{id:t})}),D,O),(0,e.effect)(t=>{var n=!!o(),r=T(),i=w(),a=v();return n!==t.e&&u.classList.toggle(`cursor-grabbing`,t.e=n),r!==t.t&&(0,e.setStyleProperty)(u,`height`,t.t=r),i!==t.a&&(0,e.setStyleProperty)(u,`width`,t.a=i),a!==t.o&&(0,e.setStyleProperty)(d,`scale`,t.o=a),t},{e:void 0,t:void 0,a:void 0,o:void 0}),(0,e.runHydrationEvents)(),t})(),(()=>{var t=(0,e.getNextElement)(q),n=t.firstChild,r=n.nextSibling,i=r.firstChild,[a,o]=(0,e.getNextMarker)(i.nextSibling);a.nextSibling;var s=r.nextSibling,c=s.nextSibling.nextSibling;return n.$$click=()=>{b(),g.send({type:`ZOOM`,payload:-.1})},r.$$click=()=>{b(),g.send(`TOGGLE_ZOOM`)},(0,e.insert)(r,()=>Math.round(v()*100),a,o),s.$$click=()=>{b(),g.send({type:`ZOOM`,payload:.1})},c.$$click=()=>g.send(`ADD_PARENT`),(0,e.runHydrationEvents)(),t})(),(0,e.createComponent)(n.Show,{get when(){return!u()||!S(u())},get children(){return(0,e.createComponent)(a.DragOverlay,{children:``})}})]}})),t})()};(0,e.delegateEvents)([`mousedown`,`click`]);var X=(0,e.template)(`<div class="relative h-full w-full"><div class="relative h-full w-full bg-white bg-size-[30px_30px]"style="background-image:radial-gradient(circle, #b8b8b8bf 1px, rgba(0, 0, 0, 0) 1px)">`),Z=r=>{let i=r.config?.nodes??d,a=r.config?.edges,o=O(),s=(0,t.createState)(o,{selector:e=>!!e.context.newEdge});return(0,n.onMount)(()=>{o.resume(),o.send({type:`CONFIGURE`,payload:{nodes:i,edges:a??[]}})}),(0,n.onCleanup)(o.pause),(()=>{var t=(0,e.getNextElement)(X),n=t.firstChild;return t.$$mousemove=e=>{o.send({type:`MOVE_NEW_EDGE`,payload:{x:e.clientX,y:e.clientY}})},t.$$mouseup=()=>o.send(`CLEAR_NEW_EDGE`),(0,e.insert)(n,(0,e.createComponent)(Y,{})),(0,e.effect)(t=>(0,e.setStyleProperty)(n,`cursor`,s()?`inherit`:`crosshair`)),(0,e.runHydrationEvents)(),t})()};(0,e.delegateEvents)([`mouseup`,`mousemove`]);var Q=t=>(0,e.createComponent)(D,{get children(){return(0,e.createComponent)(Z,t)}});exports.CLASSES=o,exports.Flow=Q;

package/lib/index.es.js

@@ -527,65 +527,46 @@ var ae = () => {
 	}), null;
 }, oe = /*#__PURE__*/ u("<svg><path class=\"relative cursor-pointer fill-transparent\"></svg>", !1, !0, !1), se = /*#__PURE__*/ u("<svg><g cursor=pointer style=pointer-events:all;z-index:30><circle cx=0 cy=0 r=12 fill=\"rgba(168, 168, 168, 1)\"></circle><svg fill=currentColor stroke-width=0 xmlns=http://www.w3.org/2000/svg class=\"h-25 w-25 bg-white fill-white\"width=20 height=20 viewBox=\"0 0 20 20\"color=white x=-10 y=-10><path d=\"M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z\"></svg>", !1, !0, !1), $ = (e) => e * 100 / 200, ce = ({ x0: e, y0: t, x1: n, y1: r }) => `M ${e} ${t} C ${e + $(Math.abs(n - e))} ${t}, ${n - $(Math.abs(n - e))} ${r}, ${n} ${r}`, le = (n) => {
 	let a = Y(), o = f(a, {
-		selector: ({ context: e }) => {
-			if (n.isNew) {
-				let t = e.newEdge;
-				return t ? {
-					x0: t.x0,
-					y0: t.y0,
-					x1: t.x1,
-					y1: t.y1
-				} : void 0;
-			}
-			return e.edgesPositions[n.id];
-		},
+		selector: ({ context: { newEdge: e, edgesPositions: t } }) => n.isNew ? e : t[n.id],
 		equals: Q
 	}), u = f(a, { selector: (e) => e.context.selected === n.id }), d = () => {
 		let e = o();
-		return e ? {
+		return {
 			x: e.x0 + (e.x1 - e.x0) / 2,
 			y: e.y0 + (e.y1 - e.y0) / 2
-		} : {
-			x: 0,
-			y: 0
 		};
 	};
-	return t(m, {
+	return [(() => {
+		var t = i(oe);
+		return t.$$mousedown = (e) => (e.stopPropagation(), a.send({
+			type: "SELECT",
+			payload: n.id
+		})), r((r) => {
+			var i = {
+				"stroke-[rgba(168,168,168,0.4)] stroke-3 z-200": !!n.isNew,
+				"stroke-[rgba(168,168,168,1)] stroke-4 z-100": u() && !n.isNew,
+				"stroke-[rgba(168,168,168,0.8)] stroke-3": !u() && !n.isNew
+			}, a = n.isNew ? "none" : "all", s = ce(o());
+			return r.e = e(t, i, r.e), a !== r.t && l(t, "pointer-events", r.t = a), s !== r.a && c(t, "d", r.a = s), r;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		}), s(), t;
+	})(), t(m, {
 		get when() {
-			return o();
+			return u();
 		},
-		children: (o) => [(() => {
-			var t = i(oe);
-			return t.$$mousedown = (e) => (e.stopPropagation(), a.send({
-				type: "SELECT",
-				payload: n.id
-			})), r((r) => {
-				var i = {
-					"stroke-[rgba(168,168,168,0.4)] stroke-3 z-200": !!n.isNew,
-					"stroke-[rgba(168,168,168,1)] stroke-4 z-100": u() && !n.isNew,
-					"stroke-[rgba(168,168,168,0.8)] stroke-3": !u() && !n.isNew
-				}, a = n.isNew ? "none" : "all", s = ce(o());
-				return r.e = e(t, i, r.e), a !== r.t && l(t, "pointer-events", r.t = a), s !== r.a && c(t, "d", r.a = s), r;
-			}, {
-				e: void 0,
-				t: void 0,
-				a: void 0
-			}), s(), t;
-		})(), t(m, {
-			get when() {
-				return u();
-			},
-			get children() {
-				var e = i(se);
-				return e.$$mousedown = (e) => {
-					e.stopPropagation(), a.send({
-						type: "DELETE",
-						payload: n.id
-					});
-				}, r(() => c(e, "transform", `translate(${d().x}, ${d().y})`)), s(), e;
-			}
-		})]
-	});
+		get children() {
+			var e = i(se);
+			return e.$$mousedown = (e) => {
+				e.stopPropagation(), a.send({
+					type: "DELETE",
+					payload: n.id
+				});
+			}, r(() => c(e, "transform", `translate(${d().x}, ${d().y})`)), s(), e;
+		}
+	})];
 };
 n(["mousedown"]);
 //#endregion
@@ -618,7 +599,7 @@ var ue = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflo
 	let u = Y(), p = f(u, {
 		selector: ({ context: e }) => {
 			let t = w.typed(e.data?.nodes).find((e) => e.id === n.id);
-			if (t) return {
+			return {
 				x: t.position.x,
 				y: t.position.y,
 				label: t.data.label,
@@ -659,7 +640,7 @@ var ue = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflo
 			payload: n.id
 		}), l(w, "width", "24px"), l(w, "height", "24px"), o(f, t(m, {
 			get when() {
-				return p()?.label;
+				return p().label;
 			},
 			keyed: !0,
 			children: (e) => (() => {
@@ -668,7 +649,7 @@ var ue = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflo
 			})()
 		}), E, D), o(f, t(m, {
 			get when() {
-				return p()?.content;
+				return p().content;
 			},
 			keyed: !0,
 			children: (e) => (() => {
@@ -677,7 +658,7 @@ var ue = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflo
 			})()
 		}), k, A), o(f, t(m, {
 			get when() {
-				return p()?.input || _();
+				return p().input || _();
 			},
 			get children() {
 				var e = i(pe), t = e.firstChild;
@@ -705,7 +686,7 @@ var ue = /*#__PURE__*/ u("<svg class=\"pointer-events-none h-full w-full overflo
 				"flex flex-col absolute cursor-grab bg-white rounded-md shadow-md select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-lg draggable": !0,
 				"border border-[#e38c29] z-[100]": g(),
 				"border border-[#e6d4be] z-[1]": !g()
-			}, i = `${p()?.y ?? 0}px`, a = `${p()?.x ?? 0}px`, o = n.id, s = {
+			}, i = `${p().y}px`, a = `${p().x}px`, o = n.id, s = {
 				"pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2": !0,
 				"w-full opacity-100": g(),
 				"w-0 -right-3 opacity-0 overflow-hidden": !g()

package/lib/server.cjs.js

@@ -917,18 +917,9 @@ var draw = ({ x0, y0, x1, y1 }) => {
 var EdgeComponent = (props) => {
 	const service = useFlow();
 	const vector = (0, _bemedev_app_solidjs.createState)(service, {
-		selector: ({ context }) => {
-			if (props.isNew) {
-				const edge = context.newEdge;
-				if (!edge) return void 0;
-				return {
-					x0: edge.x0,
-					y0: edge.y0,
-					x1: edge.x1,
-					y1: edge.y1
-				};
-			}
-			return context.edgesPositions[props.id];
+		selector: ({ context: { newEdge, edgesPositions } }) => {
+			if (props.isNew) return newEdge;
+			return edgesPositions[props.id];
 		},
 		equals: dequal.dequal
 	});
@@ -936,28 +927,19 @@ var EdgeComponent = (props) => {
 	/** Computes the 2D midpoint coordinate of the edge curve for handle placement. */
 	const middlePoint = () => {
 		const v = vector();
-		if (!v) return {
-			x: 0,
-			y: 0
-		};
 		return {
 			x: v.x0 + (v.x1 - v.x0) / 2,
 			y: v.y0 + (v.y1 - v.y0) / 2
 		};
 	};
-	return (0, solid_js_web.createComponent)(solid_js.Show, {
+	return [(0, solid_js_web.ssr)(_tmpl$$4, (0, solid_js_web.ssrHydrationKey)(), `relative cursor-pointer fill-transparent ${!!props.isNew ? "stroke-[rgba(168,168,168,0.4)] stroke-3 z-200" : ""} ${selected() && !props.isNew ? "stroke-[rgba(168,168,168,1)] stroke-4 z-100" : ""} ${!selected() && !props.isNew ? "stroke-[rgba(168,168,168,0.8)] stroke-3" : ""}`, (0, solid_js_web.ssrStyleProperty)("pointer-events:", props.isNew ? "none" : "all"), (0, solid_js_web.ssrAttribute)("d", (0, solid_js_web.escape)(draw(vector()), true), false)), (0, solid_js_web.createComponent)(solid_js.Show, {
 		get when() {
-			return vector();
+			return selected();
 		},
-		children: (v) => [(0, solid_js_web.ssr)(_tmpl$$4, (0, solid_js_web.ssrHydrationKey)(), `relative cursor-pointer fill-transparent ${!!props.isNew ? "stroke-[rgba(168,168,168,0.4)] stroke-3 z-200" : ""} ${selected() && !props.isNew ? "stroke-[rgba(168,168,168,1)] stroke-4 z-100" : ""} ${!selected() && !props.isNew ? "stroke-[rgba(168,168,168,0.8)] stroke-3" : ""}`, (0, solid_js_web.ssrStyleProperty)("pointer-events:", props.isNew ? "none" : "all"), (0, solid_js_web.ssrAttribute)("d", (0, solid_js_web.escape)(draw(v()), true), false)), (0, solid_js_web.createComponent)(solid_js.Show, {
-			get when() {
-				return selected();
-			},
-			get children() {
-				return (0, solid_js_web.ssr)(_tmpl$2$2, (0, solid_js_web.ssrHydrationKey)(), `translate(${(0, solid_js_web.escape)(middlePoint().x, true)}, ${(0, solid_js_web.escape)(middlePoint().y, true)})`, (0, solid_js_web.ssrStyleProperty)("pointer-events:", "all") + (0, solid_js_web.ssrStyleProperty)(";z-index:", "30"));
-			}
-		})]
-	});
+		get children() {
+			return (0, solid_js_web.ssr)(_tmpl$2$2, (0, solid_js_web.ssrHydrationKey)(), `translate(${(0, solid_js_web.escape)(middlePoint().x, true)}, ${(0, solid_js_web.escape)(middlePoint().y, true)})`, (0, solid_js_web.ssrStyleProperty)("pointer-events:", "all") + (0, solid_js_web.ssrStyleProperty)(";z-index:", "30"));
+		}
+	})];
 };
 //#endregion
 //#region src/ui/components/EdgesBoard.tsx
@@ -1053,7 +1035,6 @@ var NodeComponent = (props) => {
 	const node = (0, _bemedev_app_solidjs.createState)(service, {
 		selector: ({ context }) => {
 			const item = _bemedev_app.toArray.typed(context.data?.nodes).find((n) => n.id === props.id);
-			if (!item) return void 0;
 			return {
 				x: item.position.x,
 				y: item.position.y,
@@ -1072,7 +1053,7 @@ var NodeComponent = (props) => {
 		return edges.some(({ to }) => to === props.id);
 	} });
 	(0, _thisbeyond_solid_dnd.createDraggable)(props.id);
-	return (0, solid_js_web.ssr)(_tmpl$3$1, (0, solid_js_web.ssrHydrationKey)(), `flex flex-col absolute cursor-grab bg-white rounded-md shadow-md select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-lg draggable ${selected() ? "border border-[#e38c29] z-[100]" : ""} ${!selected() ? "border border-[#e6d4be] z-[1]" : ""} min-w-48`, (0, solid_js_web.ssrStyleProperty)("top:", `${(0, solid_js_web.escape)(node()?.y ?? 0, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";left:", `${(0, solid_js_web.escape)(node()?.x ?? 0, true)}px`), (0, solid_js_web.ssrAttribute)("id", (0, solid_js_web.escape)(props.id, true), false), `pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2 ${selected() ? "w-full opacity-100" : ""} ${!selected() ? "w-0 -right-3 opacity-0 overflow-hidden" : ""}`, (0, solid_js_web.ssrStyleProperty)("overflow:", "visible") + (0, solid_js_web.ssrStyleProperty)(";pointer-events:", "all") + (0, solid_js_web.ssrStyleProperty)(";width:", `${(0, solid_js_web.escape)(12, true) * 2}px`) + (0, solid_js_web.ssrStyleProperty)(";height:", `${(0, solid_js_web.escape)(12, true) * 2}px`), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
+	return (0, solid_js_web.ssr)(_tmpl$3$1, (0, solid_js_web.ssrHydrationKey)(), `flex flex-col absolute cursor-grab bg-white rounded-md shadow-md select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-lg draggable ${selected() ? "border border-[#e38c29] z-[100]" : ""} ${!selected() ? "border border-[#e6d4be] z-[1]" : ""} min-w-48`, (0, solid_js_web.ssrStyleProperty)("top:", `${(0, solid_js_web.escape)(node().y, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";left:", `${(0, solid_js_web.escape)(node().x, true)}px`), (0, solid_js_web.ssrAttribute)("id", (0, solid_js_web.escape)(props.id, true), false), `pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2 ${selected() ? "w-full opacity-100" : ""} ${!selected() ? "w-0 -right-3 opacity-0 overflow-hidden" : ""}`, (0, solid_js_web.ssrStyleProperty)("overflow:", "visible") + (0, solid_js_web.ssrStyleProperty)(";pointer-events:", "all") + (0, solid_js_web.ssrStyleProperty)(";width:", `${(0, solid_js_web.escape)(12, true) * 2}px`) + (0, solid_js_web.ssrStyleProperty)(";height:", `${(0, solid_js_web.escape)(12, true) * 2}px`), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
 		get when() {
 			return hasParent();
 		},
@@ -1081,19 +1062,19 @@ var NodeComponent = (props) => {
 		}
 	})), (0, solid_js_web.ssrStyleProperty)("pointer-events:", "all") + (0, solid_js_web.ssrStyleProperty)(";width:", `${(0, solid_js_web.escape)(12, true) * 2}px`) + (0, solid_js_web.ssrStyleProperty)(";height:", `${(0, solid_js_web.escape)(12, true) * 2}px`), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
 		get when() {
-			return node()?.label;
+			return node().label;
 		},
 		keyed: true,
 		children: (label) => (0, solid_js_web.ssr)(_tmpl$4, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)(label))
 	})), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
 		get when() {
-			return node()?.content;
+			return node().content;
 		},
 		keyed: true,
 		children: (content) => (0, solid_js_web.ssr)(_tmpl$5, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.escape)(content))
 	})), (0, solid_js_web.escape)((0, solid_js_web.createComponent)(solid_js.Show, {
 		get when() {
-			return node()?.input || hasParent();
+			return node().input || hasParent();
 		},
 		get children() {
 			return (0, solid_js_web.ssr)(_tmpl$2$1, (0, solid_js_web.ssrHydrationKey)(), (0, solid_js_web.ssrStyleProperty)("left:", `-${(0, solid_js_web.escape)(18, true)}px`), (0, solid_js_web.ssrStyleProperty)("width:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";height:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";margin-top:", `${(0, solid_js_web.escape)(12, true)}px`) + (0, solid_js_web.ssrStyleProperty)(";pointer-events:", "all"));

package/lib/server.es.js

@@ -916,18 +916,9 @@ var draw = ({ x0, y0, x1, y1 }) => {
 var EdgeComponent = (props) => {
 	const service = useFlow();
 	const vector = createState(service, {
-		selector: ({ context }) => {
-			if (props.isNew) {
-				const edge = context.newEdge;
-				if (!edge) return void 0;
-				return {
-					x0: edge.x0,
-					y0: edge.y0,
-					x1: edge.x1,
-					y1: edge.y1
-				};
-			}
-			return context.edgesPositions[props.id];
+		selector: ({ context: { newEdge, edgesPositions } }) => {
+			if (props.isNew) return newEdge;
+			return edgesPositions[props.id];
 		},
 		equals: dequal
 	});
@@ -935,28 +926,19 @@ var EdgeComponent = (props) => {
 	/** Computes the 2D midpoint coordinate of the edge curve for handle placement. */
 	const middlePoint = () => {
 		const v = vector();
-		if (!v) return {
-			x: 0,
-			y: 0
-		};
 		return {
 			x: v.x0 + (v.x1 - v.x0) / 2,
 			y: v.y0 + (v.y1 - v.y0) / 2
 		};
 	};
-	return createComponent(Show, {
+	return [ssr(_tmpl$$4, ssrHydrationKey(), `relative cursor-pointer fill-transparent ${!!props.isNew ? "stroke-[rgba(168,168,168,0.4)] stroke-3 z-200" : ""} ${selected() && !props.isNew ? "stroke-[rgba(168,168,168,1)] stroke-4 z-100" : ""} ${!selected() && !props.isNew ? "stroke-[rgba(168,168,168,0.8)] stroke-3" : ""}`, ssrStyleProperty("pointer-events:", props.isNew ? "none" : "all"), ssrAttribute("d", escape(draw(vector()), true), false)), createComponent(Show, {
 		get when() {
-			return vector();
+			return selected();
 		},
-		children: (v) => [ssr(_tmpl$$4, ssrHydrationKey(), `relative cursor-pointer fill-transparent ${!!props.isNew ? "stroke-[rgba(168,168,168,0.4)] stroke-3 z-200" : ""} ${selected() && !props.isNew ? "stroke-[rgba(168,168,168,1)] stroke-4 z-100" : ""} ${!selected() && !props.isNew ? "stroke-[rgba(168,168,168,0.8)] stroke-3" : ""}`, ssrStyleProperty("pointer-events:", props.isNew ? "none" : "all"), ssrAttribute("d", escape(draw(v()), true), false)), createComponent(Show, {
-			get when() {
-				return selected();
-			},
-			get children() {
-				return ssr(_tmpl$2$2, ssrHydrationKey(), `translate(${escape(middlePoint().x, true)}, ${escape(middlePoint().y, true)})`, ssrStyleProperty("pointer-events:", "all") + ssrStyleProperty(";z-index:", "30"));
-			}
-		})]
-	});
+		get children() {
+			return ssr(_tmpl$2$2, ssrHydrationKey(), `translate(${escape(middlePoint().x, true)}, ${escape(middlePoint().y, true)})`, ssrStyleProperty("pointer-events:", "all") + ssrStyleProperty(";z-index:", "30"));
+		}
+	})];
 };
 //#endregion
 //#region src/ui/components/EdgesBoard.tsx
@@ -1052,7 +1034,6 @@ var NodeComponent = (props) => {
 	const node = createState(service, {
 		selector: ({ context }) => {
 			const item = toArray.typed(context.data?.nodes).find((n) => n.id === props.id);
-			if (!item) return void 0;
 			return {
 				x: item.position.x,
 				y: item.position.y,
@@ -1071,7 +1052,7 @@ var NodeComponent = (props) => {
 		return edges.some(({ to }) => to === props.id);
 	} });
 	createDraggable(props.id);
-	return ssr(_tmpl$3$1, ssrHydrationKey(), `flex flex-col absolute cursor-grab bg-white rounded-md shadow-md select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-lg draggable ${selected() ? "border border-[#e38c29] z-[100]" : ""} ${!selected() ? "border border-[#e6d4be] z-[1]" : ""} min-w-48`, ssrStyleProperty("top:", `${escape(node()?.y ?? 0, true)}px`) + ssrStyleProperty(";left:", `${escape(node()?.x ?? 0, true)}px`), ssrAttribute("id", escape(props.id, true), false), `pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2 ${selected() ? "w-full opacity-100" : ""} ${!selected() ? "w-0 -right-3 opacity-0 overflow-hidden" : ""}`, ssrStyleProperty("overflow:", "visible") + ssrStyleProperty(";pointer-events:", "all") + ssrStyleProperty(";width:", `${escape(12, true) * 2}px`) + ssrStyleProperty(";height:", `${escape(12, true) * 2}px`), escape(createComponent(Show, {
+	return ssr(_tmpl$3$1, ssrHydrationKey(), `flex flex-col absolute cursor-grab bg-white rounded-md shadow-md select-none transition-[border,box-shadow] duration-200 ease-in-out hover:shadow-lg draggable ${selected() ? "border border-[#e38c29] z-[100]" : ""} ${!selected() ? "border border-[#e6d4be] z-[1]" : ""} min-w-48`, ssrStyleProperty("top:", `${escape(node().y, true)}px`) + ssrStyleProperty(";left:", `${escape(node().x, true)}px`), ssrAttribute("id", escape(props.id, true), false), `pointer-events-none absolute flex items-center justify-end -top-7.5 right-0 transition-all duration-200 ease-in-out space-x-2 ${selected() ? "w-full opacity-100" : ""} ${!selected() ? "w-0 -right-3 opacity-0 overflow-hidden" : ""}`, ssrStyleProperty("overflow:", "visible") + ssrStyleProperty(";pointer-events:", "all") + ssrStyleProperty(";width:", `${escape(12, true) * 2}px`) + ssrStyleProperty(";height:", `${escape(12, true) * 2}px`), escape(createComponent(Show, {
 		get when() {
 			return hasParent();
 		},
@@ -1080,19 +1061,19 @@ var NodeComponent = (props) => {
 		}
 	})), ssrStyleProperty("pointer-events:", "all") + ssrStyleProperty(";width:", `${escape(12, true) * 2}px`) + ssrStyleProperty(";height:", `${escape(12, true) * 2}px`), escape(createComponent(Show, {
 		get when() {
-			return node()?.label;
+			return node().label;
 		},
 		keyed: true,
 		children: (label) => ssr(_tmpl$4, ssrHydrationKey(), escape(label))
 	})), escape(createComponent(Show, {
 		get when() {
-			return node()?.content;
+			return node().content;
 		},
 		keyed: true,
 		children: (content) => ssr(_tmpl$5, ssrHydrationKey(), escape(content))
 	})), escape(createComponent(Show, {
 		get when() {
-			return node()?.input || hasParent();
+			return node().input || hasParent();
 		},
 		get children() {
 			return ssr(_tmpl$2$1, ssrHydrationKey(), ssrStyleProperty("left:", `-${escape(18, true)}px`), ssrStyleProperty("width:", `${escape(12, true)}px`) + ssrStyleProperty(";height:", `${escape(12, true)}px`) + ssrStyleProperty(";margin-top:", `${escape(12, true)}px`) + ssrStyleProperty(";pointer-events:", "all"));

package/lib/ui/components/EdgeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EdgeComponent.d.ts","sourceRoot":"","sources":["../../../src/ui/components/EdgeComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAQ,MAAM,UAAU,CAAC;AAM3C,0EAA0E;AAC1E,KAAK,KAAK,GAAG;IACX,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,gEAAgE;IAChE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAyBF;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,EAAE,SAAS,CAAC,KAAK,CA6E1C,CAAC"}
+{"version":3,"file":"EdgeComponent.d.ts","sourceRoot":"","sources":["../../../src/ui/components/EdgeComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAQ,MAAM,UAAU,CAAC;AAM3C,0EAA0E;AAC1E,KAAK,KAAK,GAAG;IACX,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,gEAAgE;IAChE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAyBF;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,EAAE,SAAS,CAAC,KAAK,CAmE1C,CAAC"}

package/lib/ui/components/NodeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeComponent.d.ts","sourceRoot":"","sources":["../../../src/ui/components/NodeComponent.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAQ,MAAM,UAAU,CAAC;AAU3C,OAAO,QAAQ,UAAU,CAAC;IACxB,UAAU,GAAG,CAAC;QACZ,UAAU,UAAU;YAClB,SAAS,EAAE,GAAG,CAAC;SAChB;KACF;CACF;AAED,uEAAuE;AACvE,KAAK,KAAK,GAAG;IACX,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,EAAE,SAAS,CAAC,KAAK,CAgM1C,CAAC"}
+{"version":3,"file":"NodeComponent.d.ts","sourceRoot":"","sources":["../../../src/ui/components/NodeComponent.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAQ,MAAM,UAAU,CAAC;AAU3C,OAAO,QAAQ,UAAU,CAAC;IACxB,UAAU,GAAG,CAAC;QACZ,UAAU,UAAU;YAClB,SAAS,EAAE,GAAG,CAAC;SAChB;KACF;CACF;AAED,uEAAuE;AACvE,KAAK,KAAK,GAAG;IACX,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,EAAE,SAAS,CAAC,KAAK,CA+L1C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bemedev/mind-flow",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Flow Chart UI library for Solid.js applications",
   "keywords": [
     "diagram",
@@ -77,8 +77,8 @@
     "globals": "^17.11.0",
     "husky": "^9.1.7",
     "onchange": "^7.1.0",
-    "oxfmt": "^0.64.0",
-    "oxlint": "^1.79.0",
+    "oxfmt": "^0.65.0",
+    "oxlint": "^1.80.0",
     "pretty-quick": "^4.2.2",
     "rimraf": "^6.1.3",
     "rolldown": "^1.2.5",

package/src/ui/components/EdgeComponent.tsx

@@ -51,13 +51,9 @@ export const EdgeComponent: Component<Props> = props => {
   const service = useFlow();
 
   const vector = createState(service, {
-    selector: ({ context }) => {
-      if (props.isNew) {
-        const edge = context.newEdge;
-        if (!edge) return undefined;
-        return { x0: edge.x0, y0: edge.y0, x1: edge.x1, y1: edge.y1 };
-      }
-      return context.edgesPositions[props.id];
+    selector: ({ context: { newEdge, edgesPositions } }) => {
+      if (props.isNew) return newEdge!;
+      return edgesPositions[props.id];
     },
     equals: dequal,
   });
@@ -69,59 +65,53 @@ export const EdgeComponent: Component<Props> = props => {
   /** Computes the 2D midpoint coordinate of the edge curve for handle placement. */
   const middlePoint = () => {
     const v = vector();
-    if (!v) return { x: 0, y: 0 };
     return { x: v.x0 + (v.x1 - v.x0) / 2, y: v.y0 + (v.y1 - v.y0) / 2 };
   };
 
   return (
-    <Show when={vector()}>
-      {v => (
-        <>
-          <path
-            class='relative cursor-pointer fill-transparent'
-            classList={{
-              'stroke-[rgba(168,168,168,0.4)] stroke-3 z-200': !!props.isNew,
-              'stroke-[rgba(168,168,168,1)] stroke-4 z-100':
-                selected() && !props.isNew,
-              'stroke-[rgba(168,168,168,0.8)] stroke-3': !selected() && !props.isNew,
-            }}
-            style={{ 'pointer-events': props.isNew ? 'none' : 'all' }}
-            d={draw(v())}
+    <>
+      <path
+        class='relative cursor-pointer fill-transparent'
+        classList={{
+          'stroke-[rgba(168,168,168,0.4)] stroke-3 z-200': !!props.isNew,
+          'stroke-[rgba(168,168,168,1)] stroke-4 z-100': selected() && !props.isNew,
+          'stroke-[rgba(168,168,168,0.8)] stroke-3': !selected() && !props.isNew,
+        }}
+        style={{ 'pointer-events': props.isNew ? 'none' : 'all' }}
+        d={draw(vector())}
 
-            onMouseDown={e => {
-              e.stopPropagation();
-              return service.send({ type: 'SELECT', payload: props.id });
-            }}
-          />
-          <Show when={selected()}>
-            <g
-              cursor='pointer'
-              transform={`translate(${middlePoint().x}, ${middlePoint().y})`}
-              onMouseDown={e => {
-                e.stopPropagation();
-                service.send({ type: 'DELETE', payload: props.id });
-              }}
-              style={{ 'pointer-events': 'all', 'z-index': '30' }}
-            >
-              <circle cx='0' cy='0' r='12' fill='rgba(168, 168, 168, 1)' />
-              <svg
-                fill='currentColor'
-                stroke-width='0'
-                xmlns='http://www.w3.org/2000/svg'
-                class='h-25 w-25 bg-white fill-white'
-                width='20'
-                height='20'
-                viewBox='0 0 20 20'
-                color='white'
-                x='-10'
-                y='-10'
-              >
-                <path d='M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z'></path>
-              </svg>
-            </g>
-          </Show>
-        </>
-      )}
-    </Show>
+        onMouseDown={e => {
+          e.stopPropagation();
+          return service.send({ type: 'SELECT', payload: props.id });
+        }}
+      />
+      <Show when={selected()}>
+        <g
+          cursor='pointer'
+          transform={`translate(${middlePoint().x}, ${middlePoint().y})`}
+          onMouseDown={e => {
+            e.stopPropagation();
+            service.send({ type: 'DELETE', payload: props.id });
+          }}
+          style={{ 'pointer-events': 'all', 'z-index': '30' }}
+        >
+          <circle cx='0' cy='0' r='12' fill='rgba(168, 168, 168, 1)' />
+          <svg
+            fill='currentColor'
+            stroke-width='0'
+            xmlns='http://www.w3.org/2000/svg'
+            class='h-25 w-25 bg-white fill-white'
+            width='20'
+            height='20'
+            viewBox='0 0 20 20'
+            color='white'
+            x='-10'
+            y='-10'
+          >
+            <path d='M10.185,1.417c-4.741,0-8.583,3.842-8.583,8.583c0,4.74,3.842,8.582,8.583,8.582S18.768,14.74,18.768,10C18.768,5.259,14.926,1.417,10.185,1.417 M10.185,17.68c-4.235,0-7.679-3.445-7.679-7.68c0-4.235,3.444-7.679,7.679-7.679S17.864,5.765,17.864,10C17.864,14.234,14.42,17.68,10.185,17.68 M10.824,10l2.842-2.844c0.178-0.176,0.178-0.46,0-0.637c-0.177-0.178-0.461-0.178-0.637,0l-2.844,2.841L7.341,6.52c-0.176-0.178-0.46-0.178-0.637,0c-0.178,0.176-0.178,0.461,0,0.637L9.546,10l-2.841,2.844c-0.178,0.176-0.178,0.461,0,0.637c0.178,0.178,0.459,0.178,0.637,0l2.844-2.841l2.844,2.841c0.178,0.178,0.459,0.178,0.637,0c0.178-0.176,0.178-0.461,0-0.637L10.824,10z'></path>
+          </svg>
+        </g>
+      </Show>
+    </>
   );
 };

package/src/ui/components/NodeComponent.tsx

@@ -43,8 +43,7 @@ export const NodeComponent: Component<Props> = props => {
   const node = createState(service, {
     selector: ({ context }) => {
       const list = toArray.typed(context.data?.nodes);
-      const item = list.find(n => n.id === props.id);
-      if (!item) return undefined;
+      const item = list.find(n => n.id === props.id)!;
       return {
         x: item.position.x,
         y: item.position.y,
@@ -81,7 +80,7 @@ export const NodeComponent: Component<Props> = props => {
         'border border-[#e6d4be] z-[1]': !selected(),
       }}
 
-      style={{ top: `${node()?.y ?? 0}px`, left: `${node()?.x ?? 0}px` }}
+      style={{ top: `${node().y}px`, left: `${node().x}px` }}
       class='min-w-48'
       use:draggable={{ skipTransform: true }}
       id={props.id}
@@ -162,7 +161,7 @@ export const NodeComponent: Component<Props> = props => {
         </svg>
       </div>
 
-      <Show when={node()?.label} keyed>
+      <Show when={node().label} keyed>
         {label => (
           <span class='min-w-max border-b border-[#f0f0f0] p-3 whitespace-nowrap text-red-600 select-none'>
             {label}
@@ -170,11 +169,11 @@ export const NodeComponent: Component<Props> = props => {
         )}
       </Show>
 
-      <Show when={node()?.content} keyed>
+      <Show when={node().content} keyed>
         {content => <div class='p-3 select-none'>{content}</div>}
       </Show>
 
-      <Show when={node()?.input || hasParent()}>
+      <Show when={node().input || hasParent()}>
         <div
           id='outputs'
           class='pointer-events-none absolute top-0 z-10 flex cursor-default flex-col'