@bemedev/mind-flow 0.1.0 → 0.3.0

package/README.md

@@ -44,24 +44,25 @@ export const FlowDemo = () => {
 You can provide initial node and edge configurations, as well as callback handlers:
 
 ```tsx
-import { Flow, type FlowProps } from '@bemedev/mind-flow';
+import { Flow, type NodeProps, type EdgeProps } from '@bemedev/mind-flow';
+import type { ComponentProps } from 'solid-js';
 import '@bemedev/mind-flow/style.css';
 
+type FlowProps = ComponentProps<typeof Flow>;
+
 const config: FlowProps['config'] = {
   nodes: [
     {
       id: 'node-1',
-      name: 'Start',
-      description: 'Starting point of workflow',
-      x: 100,
-      y: 100,
+      data: { label: 'Start', content: 'Starting point of workflow' },
+      input: false,
+      position: { x: 100, y: 100 },
     },
     {
       id: 'node-2',
-      name: 'Process',
-      description: 'Step 1 processing',
-      x: 400,
-      y: 100,
+      data: { label: 'Process', content: 'Step 1 processing' },
+      input: true,
+      position: { x: 400, y: 100 },
     },
   ],
   edges: [{ id: 'edge-1', from: 'node-1', to: 'node-2' }],
@@ -85,7 +86,6 @@ export const CustomFlow = () => {
 ## Exports
 
 - **`Flow`**: Root Solid.js flowchart component wrapping context provider and canvas.
-- **`FlowProps`**: Configuration and callback props for the `Flow` component.
 - **`NodeProps`**: Inferred type definition for node elements.
 - **`EdgeProps`**: Inferred type definition for edge connections.
 - **`CLASSES`**: Array of Tailwind CSS safelist class names used in the UI.

package/lib/helpers/createContext.d.ts

@@ -1,10 +1,13 @@
 import { createContext as createSolidContext, ParentComponent } from 'solid-js';
-/** Context options type extracted from Solid's `createContext`. */
+/**
+ * Type alias for context options extracted from Solid's
+ * {@linkcode createSolidContext}.
+ */
 type Options = Parameters<typeof createSolidContext>[1];
 /**
  * Creates a Solid context provider component and a custom hook to consume it.
  *
- * @template T - The type of the context value.
+ * @template `T` - The type of the context value.
  *
  * @param context - Factory function returning a non-nullable context value of type
  *   `NonNullable<T>`.
@@ -12,6 +15,8 @@ type Options = Parameters<typeof createSolidContext>[1];
  *
  * @returns A tuple containing the Provider component of type
  *   {@linkcode ParentComponent}, the accessor hook, and the Solid context object.
+ *
+ * @see {@linkcode createSolidContext}, {@linkcode useContext}
  */
 export declare const createContext: <const T>(context: () => NonNullable<T>, options?: Options) => readonly [ParentComponent, () => NonNullable<T>, import('solid-js').Context<NonNullable<T>>];
 export {};

package/lib/helpers/createContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createContext.d.ts","sourceRoot":"","sources":["../../src/helpers/createContext.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,IAAI,kBAAkB,EAEnC,KAAK,eAAe,EACrB,MAAM,UAAU,CAAC;AAElB,mEAAmE;AACnE,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;AAExD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,GAAI,KAAK,CAAC,CAAC,EACnC,SAAS,MAAM,WAAW,CAAC,CAAC,CAAC,EAC7B,UAAU,OAAO,iGAUlB,CAAC"}
+{"version":3,"file":"createContext.d.ts","sourceRoot":"","sources":["../../src/helpers/createContext.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,IAAI,kBAAkB,EAEnC,KAAK,eAAe,EACrB,MAAM,UAAU,CAAC;AAElB;;;GAGG;AACH,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;AAExD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa,GAAI,KAAK,CAAC,CAAC,EACnC,SAAS,MAAM,WAAW,CAAC,CAAC,CAAC,EAC7B,UAAU,OAAO,iGAUlB,CAAC"}

package/lib/index.cjs.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("solid-js/web"),t=require("solid-js"),n=require("@bemedev/app"),r=require("solid-js/store"),i=require("@bemedev/app/bemedev"),a=require("@bemedev/app-solidjs"),o=require("@thisbeyond/solid-dnd");var s=`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-scroll 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(` `),c=Object.prototype.hasOwnProperty;function l(e,t){var n,r;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--&&l(e[r],t[r]););return r===-1}if(!n||typeof e==`object`){for(n in r=0,e)if(c.call(e,n)&&++r&&!c.call(t,n)||!(n in t)||!l(e[n],t[n]))return!1;return Object.keys(t).length===r}}return e!==e&&t!==t}var u=(e,n)=>{let r=(0,t.createContext)(e(),n);return[({children:e})=>r.Provider({value:r.defaultValue,children:e}),()=>(0,t.useContext)(r),r]},d=`useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict`,f=(e=21)=>{let t=``,n=crypto.getRandomValues(new Uint8Array(e|=0));for(;e--;)t+=d[n[e]&63];return t},p=(0,i.type)({x:`number`,y:`number`});(0,i.type)(({optional:e,use:t})=>({input:e(t(p)),output:t(p)}));var m=(0,i.type)({from:`string`,to:`string`}),h=(0,i.type)(({optional:e,use:t})=>({position:t(p),data:{label:e(`string`),content:`string`},input:`boolean`})),g=m;(0,i.type)(({optional:e,use:t})=>({width:`number`,height:`number`,id:`string`,output:t(p),input:e(t(p))})),(0,i.type)({x0:`number`,y0:`number`,x1:`number`,y1:`number`});var _=(e,t)=>`edge = ${e} => ${t}`,v=e=>`node-${e}`,y=(0,n.createMachine)({initial:`idle`,states:{idle:{on:{CONFIGURE:{actions:[`configure`],target:`/working`},CONFIGURE_EMPTY:`/working`}},construction:{always:{actions:[`buildUI`],target:`/working`}},working:{on:{MOVE_IMMEDIATE:{actions:[{name:`buildImmediateUI`,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_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`},DELETE:{actions:[`delete`],target:`/construction`},SELECT:{actions:[`select`]},DESELECT:{actions:[`deselect`]}}}}},{eventsMap:(0,i.type)(({intersection:e,use:t,array:n})=>({CONFIGURE:{nodes:n(e(t(h),{id:`string`})),edges:n(e(t(g),{id:`string`}))},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(m)})),sync:!0,pContext:(0,i.type)(({union:e})=>({generatedId:e(`string`,`null`)})),context:(0,i.type)(({optional:e,use:t,array:n})=>({data:e({nodes:n({...t(h),id:`string`}),edges:n({...t(g),id:`string`})}),selected:e(`string`),updatingUI:e(`boolean`)}))}).provideOptions(({assign:e,batch:t,erase:n})=>({actions:{configure:t(e(`context.data`,()=>({nodes:[],edges:[]})),e(`context.data.nodes`,{CONFIGURE:({payload:{nodes:e}})=>e}),e(`context.data.edges`,{CONFIGURE:({payload:{edges:e}})=>e}),e(`context.updatingUI`,()=>!1),e(`pContext.generatedId`,()=>null)),generateID:e(`pContext.generatedId`,()=>f()),linkChild:t(e(`context.data.edges`,{ADD_CHILD:({context:e,pContext:t,payload:n})=>{let r=e.data,i=n,a=t?.generatedId,o=v(a),s=_(i,o);return[...r?.edges??[],{id:s,from:i,to:o}]}}),e(`context.selected`,({pContext:{generatedId:e}})=>v(e))),linkSibling:t(e(`context.data.edges`,{ADD_SIBLING:({pContext:e,payload:t,context:n})=>{let r=n.data?.edges,i=e?.generatedId,a=[...r??[]],o=r?.find(({to:e})=>e===t)?.from;if(!o)return a;let s=v(i),c=_(o,s);return a.push({from:o,to:s,id:c}),a}}),e(`context.selected`,({pContext:{generatedId:e}})=>v(e))),selectParent:e(`context.selected`,({pContext:{generatedId:e}})=>v(e)),moveNode:e(`context.data.nodes`,{MOVE:({context:{data:e},payload:t})=>{let{id:n,x:r,y:i}=t;return n?e?.nodes?.map(e=>e.id===n?{...e,position:{x:r,y:i}}:e)??[]:e?.nodes??[]}}),select:e(`context.selected`,{SELECT:({payload:e})=>e}),delete:e([`context.data.nodes`,`context.data.edges`],{DELETE:({context:{data:e},payload:t})=>[e?.nodes?.filter(({id:e})=>e!==t),e?.edges?.filter(({id:e,from:n,to:r})=>e!==t&&n!==t&&r!==t)]}),addEdge:e(`context.data.edges`,{ADD_EDGE:({context:e,payload:{from:t,to:n}})=>{let r=e.data?.edges??[],i=_(t,n);return r.some(e=>e.id===i)?r:[...r,{id:i,from:t,to:n}]}}),deselect:n(`context.selected`)}})),b=10.5,x=-10.5,S={x,y:18},C=(e=0)=>({x:e+b,y:18}),w={horizontal:55,vertical:40},T=[{id:`node-0`,data:{content:`Some text`,label:`Root node`},input:!1,position:{x:350,y:100}}],[E,D]=u(()=>{let e=(0,n.interpret)(y,{context:{},pContext:{generatedId:null}}),i=(0,t.createSignal)(1),a=(0,t.createSignal)(),[o,s]=(0,t.createSignal)(),[c,u]=(0,t.createSignal)({},{equals:l}),d=(e,t)=>{let n=o();if(!n)return{x:e,y:t};let r=n.getBoundingClientRect(),a=i[0]();return{x:e-r.left/a,y:t-r.top/a}},[f,p]=(0,t.createSignal)({},{equals:!1}),m=(e,t,n=192,r=50)=>{let a=o()?.parentElement;if(!a)return{x:e,y:t};let s=i[0](),c=a.scrollLeft/s+w.horizontal,l=Math.max(c,(a.scrollLeft+a.clientWidth)/s-w.horizontal-n),u=a.scrollTop/s+w.vertical,d=Math.max(u,(a.scrollTop+a.clientHeight)/s-w.vertical-r);return{x:Math.min(Math.max(e,c),l),y:Math.min(Math.max(t,u),d)}};return e.addOptions(({voidAction:e,batch:t,assign:n})=>({actions:{placeChild:n(`context.data.nodes`,{ADD_CHILD:({payload:e,context:{data:t},pContext:{generatedId:n}})=>{let r=t?.nodes??[];if(!e)return r;let i=r.find(t=>t.id===e);if(!i)return r;let a=`node-${n}`,o=c()[e]?.width??0,s=c()[e]?.height??0,l=i.position.x+o+100,u=i.position.y,d=m(l,u,o,s);return[...r,{id:a,data:{content:`<Nouveau nœud>`},input:!0,position:d}]}}),placeParent:n(`context.data.nodes`,{ADD_PARENT:({context:{data:e},pContext:{generatedId:t}})=>{let n=e?.nodes??[],r=`node-${t}`,a=o()?.parentElement,s=a?.scrollLeft??0,c=a?.scrollTop??0,l=a?.clientWidth??0,u=a?.clientHeight??0,d=i[0](),f=(s+l/2)/d,p=(c+u/2)/d;return[...n,{id:r,data:{content:`<Nouveau nœud>`},input:!1,position:{x:f,y:p}}]}}),placeSibling:n(`context.data.nodes`,{ADD_SIBLING:({payload:e,context:{data:t},pContext:{generatedId:n}})=>{let r=t?.edges??[],i=t?.nodes??[],a=r.find(t=>t.to===e)?.from;if(!a)return i;let o=i.find(e=>e.id===a);if(!o)return i;let s=`node-${n}`,l=c()[a]?.width??0,u=c()[a]?.height??0,d=o.position.x+l+100,f=o.position.y+100,p=m(d,f,l,u);return[...i,{id:s,data:{content:`<Nouveau nœud>`},input:!0,position:p}]}}),buildUI:t(e(({context:{data:e}})=>{let t=e?.edges??[];p(e=>{let n=Object.entries({...e}).filter(([e])=>t.some(t=>t.id===e));return Object.fromEntries(n)})}),e({else:({context:{data:e}})=>{let t=e?.edges??[];p((0,r.produce)(e=>{t?.forEach(({from:t,id:n,to:r})=>{let i=c()[t]?.output,a=c()[r]?.input;i&&a&&(e[n]={x0:i.x,y0:i.y,x1:a.x,y1:a.y})})}))},MOVE:({context:{data:e},payload:t})=>{let n=e?.edges??[];p((0,r.produce)(e=>{n?.forEach(({from:n,to:i,id:a})=>{if(n===t.id){let n=c()[t.id]?.outputOffset??C(c()[t.id]?.width),i=t.x+n.x,o=t.y+n.y;e[a]={...e[a],x0:i,y0:o},u((0,r.produce)(e=>{e[t.id]&&(e[t.id]={...e[t.id],output:{x:i,y:o}})}))}if(i===t.id){let n=c()[t.id]?.inputOffset??S,i=t.x+n.x,o=t.y+n.y;e[a]={...e[a],x1:i,y1:o},u((0,r.produce)(e=>{e[t.id]&&(e[t.id]={...e[t.id],input:{x:i,y:o}})}))}})}))}}),n(`context.updatingUI`,()=>!0)),buildImmediateUI:e({MOVE_IMMEDIATE:({context:{data:e},payload:t})=>{let n=e?.edges??[];p((0,r.produce)(e=>{n?.forEach(({from:n,to:i,id:a})=>{if(n===t.id){let n=c()[t.id]?.outputOffset??C(c()[t.id]?.width),i=t.x+n.x,o=t.y+n.y;e[a]={...e[a],x0:i,y0:o},u((0,r.produce)(e=>{e[t.id]&&(e[t.id]={...e[t.id],output:{x:i,y:o}})}))}if(i===t.id){let n=c()[t.id]?.inputOffset??S,i=t.x+n.x,o=t.y+n.y;e[a]={...e[a],x1:i,y1:o},u((0,r.produce)(e=>{e[t.id]&&(e[t.id]={...e[t.id],input:{x:i,y:o}})}))}})}))}})}})),e.start(),{dimensions:[c,u],newEdge:a,board:[o,s],getBoardPoint:d,edgesPositions:[f,p],service:e,zoom:i,clampPosition:m}},{name:`FlowContext`}),O=Object.prototype.hasOwnProperty;function k(e,t,n){for(n of e.keys())if(A(n,t))return n}function A(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--&&A(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=k(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=k(t,i),!i)||!A(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(O.call(e,n)&&++r&&!O.call(t,n)||!(n in t)||!A(e[n],t[n]))return!1;return Object.keys(t).length===r}}return e!==e&&t!==t}var j=()=>{let{board:[e],zoom:[t]}=D(),[n,{addTransformer:r,removeTransformer:i,onDragStart:a,onDragEnd:s}]=(0,o.useDragDropContext)(),c={id:`clamp-to-container`,order:100,callback:r=>{let i=e(),a=n.active.draggable;if(!i||!a)return r;let o=a.node;if(!o)return r;let s=t(),c=w.horizontal,l=Math.max(c,i.clientWidth/s-o.offsetWidth-w.horizontal),u=w.vertical,d=Math.max(u,i.clientHeight/s-o.offsetHeight-w.vertical),f=(c-o.offsetLeft)*s,p=(l-o.offsetLeft)*s,m=(u-o.offsetTop)*s,h=(d-o.offsetTop)*s;return{x:Math.min(Math.max(r.x,f),p),y:Math.min(Math.max(r.y,m),h)}}};return a(({draggable:e})=>{r(`draggables`,e.id,c)}),s(({draggable:e})=>{i(`draggables`,e.id,c.id)}),null},M=(0,e.template)(`<svg><path class="relative cursor-pointer fill-transparent"></svg>`,!1,!0,!1),N=(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),P=e=>e*100/200,F=({x0:e,y0:t,x1:n,y1:r})=>`M ${e} ${t} C ${e+P(Math.abs(n-e))} ${t}, ${n-P(Math.abs(n-e))} ${r}, ${n} ${r}`,I=n=>{let[r,i]=(0,t.createSignal)({x:n.x0+(n.x1-n.x0)/2,y:n.y0+(n.y1-n.y0)/2}),{service:o}=D();(0,t.createEffect)(()=>{let e=n.x0+(n.x1-n.x0)/2,t=n.y0+(n.y1-n.y0)/2;i({x:e,y:t})});let s=(0,a.useState)(o,{selector:e=>e.context.selected===n.id});return[(()=>{var t=(0,e.getNextElement)(M);return t.$$click=()=>o.send({type:`SELECT`,payload:n.id}),t.$$mousedown=e=>e.stopPropagation(),(0,e.effect)(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":s()&&!n.isNew,"stroke-[rgba(168,168,168,0.8)] stroke-3":!s()&&!n.isNew},a=n.isNew?`none`:`all`,o=F(n);return r.e=(0,e.classList)(t,i,r.e),a!==r.t&&(0,e.setStyleProperty)(t,`pointer-events`,r.t=a),o!==r.a&&(0,e.setAttribute)(t,`d`,r.a=o),r},{e:void 0,t:void 0,a:void 0}),(0,e.runHydrationEvents)(),t})(),(0,e.createComponent)(t.Show,{get when(){return s()},get children(){var t=(0,e.getNextElement)(N);return t.$$mousedown=e=>{e.stopPropagation(),o.send({type:`DELETE`,payload:n.id})},(0,e.effect)(()=>(0,e.setAttribute)(t,`transform`,`translate(${r().x}, ${r().y})`)),(0,e.runHydrationEvents)(),t}})]};(0,e.delegateEvents)([`mousedown`,`click`]);var L=(0,e.template)(`<svg class="pointer-events-none h-full w-full overflow-visible"><!$><!/><!$><!/>`),R=()=>{let[n,r]=(0,t.createSignal)(),{newEdge:[i],edgesPositions:[a]}=D(),o=(0,t.createMemo)(()=>Object.entries(a()).map(([e,t])=>({id:e,...t})));return(0,t.createEffect)(()=>{n()&&i()&&r()}),(()=>{var n=(0,e.getNextElement)(L),r=n.firstChild,[a,s]=(0,e.getNextMarker)(r.nextSibling),c=a.nextSibling,[l,u]=(0,e.getNextMarker)(c.nextSibling);return(0,e.insert)(n,(0,e.createComponent)(t.Show,{get when(){return i()},children:t=>(0,e.createComponent)(I,{id:`__#new-edge#__TEMP`,isNew:!0,get x0(){return t().x0},get y0(){return t().y0},get x1(){return t().x1},get y1(){return t().y1}})}),a,s),(0,e.insert)(n,(0,e.createComponent)(t.For,{get each(){return o()},children:I}),l,u),n})()},z=(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">`),B=(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>`),V=(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>`),H=(0,e.template)(`<span class="min-w-max border-b border-[#f0f0f0] p-3 whitespace-nowrap text-red-600 select-none">`),U=(0,e.template)(`<div class="p-3 select-none">`),W=n=>{let i,s,[c,l]=(0,t.createSignal)(),{dimensions:[u,d],newEdge:[f,p],getBoardPoint:m,service:h,zoom:[g]}=D(),_=(0,a.useState)(h,{selector:e=>e.context.selected===n.id});(0,t.onMount)(()=>{let e=i,t=s,a=c(),o=g();if(!t||!a)return;let l=a.getBoundingClientRect(),u=t.getBoundingClientRect(),f=e?.getBoundingClientRect(),p=(u.left-l.left+u.width/2)/o,m=(u.top-l.top+u.height/2)/o,h=f?(f.left-l.left+f.width/2)/o:x,_=f?(f.top-l.top+f.height/2)/o:18,v=l.width/o,y=l.height/o,b={x:n.x+p,y:n.y+m},S={x:n.x+h,y:n.y+_};d((0,r.produce)(e=>{e[n.id]={width:v,height:y,output:b,input:S,outputOffset:{x:p,y:m},inputOffset:{x:h,y:_}}}))});let v=(0,a.useState)(h,{selector:({context:{data:e}})=>{let t=e?.edges;return t?t.some(({to:e})=>e===n.id):!1}}),y=(0,o.createDraggable)(n.id);return(()=>{var r=(0,e.getNextElement)(V),a=r.firstChild,o=a.firstChild,c=o.nextSibling,[d,g]=(0,e.getNextMarker)(c.nextSibling),b=d.nextSibling,x=a.nextSibling,[S,C]=(0,e.getNextMarker)(x.nextSibling),w=S.nextSibling,[T,E]=(0,e.getNextMarker)(w.nextSibling),D=T.nextSibling,[O,k]=(0,e.getNextMarker)(D.nextSibling),A=O.nextSibling,j=A.firstChild;return(0,e.use)(y,r,()=>({skipTransform:!0})),r.$$mousedown=e=>{e.stopPropagation(),e.stopImmediatePropagation(),h.send({type:`SELECT`,payload:n.id})},(0,e.use)(l,r),o.$$click=e=>{e.stopPropagation(),h.send({type:`DELETE`,payload:n.id})},(0,e.setStyleProperty)(o,`width`,`24px`),(0,e.setStyleProperty)(o,`height`,`24px`),(0,e.insert)(a,(0,e.createComponent)(t.Show,{get when(){return v()},get children(){var t=(0,e.getNextElement)(z);return t.$$click=()=>h.send({type:`ADD_SIBLING`,payload:n.id}),(0,e.setStyleProperty)(t,`width`,`24px`),(0,e.setStyleProperty)(t,`height`,`24px`),(0,e.runHydrationEvents)(),t}}),d,g),b.$$click=()=>h.send({type:`ADD_CHILD`,payload:n.id}),(0,e.setStyleProperty)(b,`width`,`24px`),(0,e.setStyleProperty)(b,`height`,`24px`),(0,e.insert)(r,(0,e.createComponent)(t.Show,{get when(){return n.label},keyed:!0,children:t=>(()=>{var n=(0,e.getNextElement)(H);return(0,e.insert)(n,t),n})()}),S,C),(0,e.insert)(r,(0,e.createComponent)(t.Show,{get when(){return n.content},keyed:!0,children:t=>(()=>{var n=(0,e.getNextElement)(U);return(0,e.insert)(n,t),n})()}),T,E),(0,e.insert)(r,(0,e.createComponent)(t.Show,{get when(){return n.input||v()},get children(){var t=(0,e.getNextElement)(B),r=t.firstChild;return(0,e.setStyleProperty)(t,`left`,`-18px`),r.$$mouseup=e=>{e.stopPropagation();let t=f()?.from;t&&h.send({type:`ADD_EDGE`,payload:{from:t,to:n.id}}),p()},r.$$mousedown=e=>{e.stopPropagation()},(0,e.use)(e=>i=e,r),(0,e.setStyleProperty)(r,`width`,`12px`),(0,e.setStyleProperty)(r,`height`,`12px`),(0,e.setStyleProperty)(r,`margin-top`,`12px`),(0,e.runHydrationEvents)(),t}}),O,k),(0,e.setStyleProperty)(A,`right`,`-18px`),j.$$mousedown=e=>{e.stopPropagation(),h.send(`DESELECT`);let t=u()[n.id]?.output,r=m(e.clientX,e.clientY);t&&p({x0:t.x,y0:t.y,x1:r.x,y1:r.y,from:n.id})},(0,e.use)(e=>s=e,j),(0,e.setStyleProperty)(j,`width`,`12px`),(0,e.setStyleProperty)(j,`height`,`12px`),(0,e.setStyleProperty)(j,`margin-top`,`12px`),(0,e.effect)(t=>{var i=n.id,o={"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]":_(),"border border-[#e6d4be] z-[1]":!_()},s=`${n.y}px`,c=`${n.x}px`,l={"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":_(),"w-0 -right-3 opacity-0 overflow-hidden":!_()};return i!==t.e&&(0,e.setAttribute)(r,`id`,t.e=i),t.t=(0,e.classList)(r,o,t.t),s!==t.a&&(0,e.setStyleProperty)(r,`top`,t.a=s),c!==t.o&&(0,e.setStyleProperty)(r,`left`,t.o=c),t.i=(0,e.classList)(a,l,t.i),t},{e:void 0,t:void 0,a:void 0,o:void 0,i:void 0}),(0,e.runHydrationEvents)(),r})()};(0,e.delegateEvents)([`mousedown`,`click`,`mouseup`]);var G=(0,e.template)(`<div class="relative h-full w-full overflow-scroll 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"><!$><!/><!$><!/><!$><!/>`),K=(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">`),q=(0,e.template)(`<div class="relative mx-auto h-[calc(100vh-64px)] w-[calc(100vw-32px)] overflow-hidden">`),J=()=>{let n,[r,i]=(0,t.createSignal)(!1),[s,c]=(0,t.createSignal)({x:0,y:0}),[l,u]=(0,t.createSignal)(``),[d,f]=(0,t.createSignal)(),p=0,m=0,{board:[,h],service:g,newEdge:[_],zoom:[v,y]}=D(),b=()=>{let e=n.scrollWidth-n.clientWidth,t=n.scrollHeight-n.clientHeight;p=e>0?n.scrollLeft/e:0,m=t>0?n.scrollTop/t:0};(0,t.createEffect)((0,t.on)(v,()=>{let e=n.scrollWidth-n.clientWidth,t=n.scrollHeight-n.clientHeight;e>0&&(n.scrollLeft=p*e),t>0&&(n.scrollTop=m*t)},{defer:!0}));let x=(0,a.useState)(g,{selector:e=>e.context?.selected}),S=e=>x()===e,C=(0,a.useState)(g,{selector:e=>(e.context.data?.nodes??[]).map(e=>({id:e.id,x:e.position.x,y:e.position.y,label:e.data.label,content:e.data.content??``,input:e.input})),equals:A}),w=()=>`calc((500vw - 265px) * ${v()})`,T=()=>`calc((500vh - 425px) * ${v()})`;return(()=>{var a=(0,e.getNextElement)(q);return a.addEventListener(`wheel`,e=>{if(e.ctrlKey||e.metaKey){e.preventDefault(),b();let t=e.deltaY<0?.1:-.1;y(e=>Math.min(Math.max(Number((e+t).toFixed(2)),.2),3))}}),(0,e.insert)(a,(0,e.createComponent)(o.DragDropProvider,{onDragMove:({draggable:{transform:e,node:t,id:n}})=>{if(u(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,l=t.offsetTop+e.y/i,u=Math.min(Math.max(s,0),a),d=Math.min(Math.max(l,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}}),c({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+s().x/r,l=e.offsetTop+s().y/r,u=Math.min(Math.max(o,0),i),d=Math.min(Math.max(l,0),a);e.style.setProperty(`top`,d+`px`),e.style.setProperty(`left`,u+`px`),e.style.removeProperty(`transform`),setTimeout(()=>{g.send({type:`MOVE`,payload:{id:`${t}`,x:u,y:d}}),c({x:0,y:0})},0)},get children(){return[(()=>{var a=(0,e.getNextElement)(G),s=a.firstChild,[c,l]=(0,e.getNextMarker)(s.nextSibling),u=c.nextSibling,d=u.firstChild,f=d.firstChild,[p,m]=(0,e.getNextMarker)(f.nextSibling),y=p.nextSibling,[x,S]=(0,e.getNextMarker)(y.nextSibling),E=x.nextSibling,[D,O]=(0,e.getNextMarker)(E.nextSibling);return a.addEventListener(`scroll`,b),(0,e.use)(e=>n=e,a),(0,e.insert)(a,(0,e.createComponent)(o.DragDropSensors,{}),c,l),u.$$mousedown=e=>{if(_()||e.button!==0)return;g.send(`DESELECT`);let t=e.clientX,r=e.clientY,a=n.scrollLeft,o=n.scrollTop;i(!0);let s=e=>{let i=e.clientX-t,s=e.clientY-r;n.scrollLeft=a-i*3,n.scrollTop=o-s*3,b()},c=()=>{window.removeEventListener(`mousemove`,s),window.removeEventListener(`mouseup`,c),setTimeout(()=>i(!1),200)};window.addEventListener(`mousemove`,s),window.addEventListener(`mouseup`,c)},(0,e.use)(h,u),(0,e.insert)(d,(0,e.createComponent)(j,{}),p,m),(0,e.insert)(d,(0,e.createComponent)(R,{}),x,S),(0,e.insert)(d,(0,e.createComponent)(t.For,{get each(){return C()},children:W}),D,O),(0,e.effect)(t=>{var n=!!r(),i=T(),a=w(),o=v();return n!==t.e&&u.classList.toggle(`cursor-grabbing`,t.e=n),i!==t.t&&(0,e.setStyleProperty)(u,`height`,t.t=i),a!==t.a&&(0,e.setStyleProperty)(u,`width`,t.a=a),o!==t.o&&(0,e.setStyleProperty)(d,`scale`,t.o=o),t},{e:void 0,t:void 0,a:void 0,o:void 0}),(0,e.runHydrationEvents)(),a})(),(()=>{var t=(0,e.getNextElement)(K),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(),f(void 0),y(e=>Math.max(1/5,Number((e-.1).toFixed(2))))},r.$$click=()=>{b(),d()?(y(d()),f(void 0)):(f(v()),y(1))},(0,e.insert)(r,()=>Math.round(v()*100),a,o),s.$$click=()=>{b(),f(void 0),y(e=>Math.min(3,Number((e+.1).toFixed(2))))},c.$$click=()=>g.send(`ADD_PARENT`),(0,e.runHydrationEvents)(),t})(),(0,e.createComponent)(t.Show,{get when(){return!l()||!S(l())},get children(){return(0,e.createComponent)(o.DragOverlay,{children:``})}})]}})),a})()};(0,e.delegateEvents)([`mousedown`,`click`]);var Y=(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)">`),X=n=>{let r=n.config?.nodes??T,i=n.config?.edges,{service:a,newEdge:[o,s],getBoardPoint:c}=D();return(0,t.onMount)(()=>{a.start(),a.send({type:`CONFIGURE`,payload:{nodes:r,edges:i??[]}})}),(0,t.onCleanup)(a.stop),(()=>{var t=(0,e.getNextElement)(Y),n=t.firstChild;return t.$$mousemove=e=>{let t=o();if(t){let n=c(e.clientX,e.clientY);s({...t,x1:n.x,y1:n.y})}},t.$$mouseup=()=>s(),(0,e.insert)(n,(0,e.createComponent)(J,{})),(0,e.effect)(t=>(0,e.setStyleProperty)(n,`cursor`,o()?`inherit`:`crosshair`)),(0,e.runHydrationEvents)(),t})()};(0,e.delegateEvents)([`mouseup`,`mousemove`]);var Z=t=>(0,e.createComponent)(E,{get children(){return(0,e.createComponent)(X,t)}});exports.CLASSES=s,exports.Flow=Z;
+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;