@bemedev/mind-flow 0.0.1 → 0.1.1

package/README.md

@@ -0,0 +1,95 @@
+# @bemedev/mind-flow
+
+Flow Chart and diagramming UI library for [Solid.js](https://www.solidjs.com/)
+applications.
+
+## Features
+
+- **Interactive Canvas**: Drag-and-drop nodes and interactive connecting edges.
+- **State Machine Powered**: State management built with `@bemedev/app`.
+- **Zoom & Controls**: Built-in zoom in/out, reset, and node creation toolbar.
+- **Dynamic Edge Creation**: Interactive drag-to-connect endpoints between nodes.
+- **Type-Safe**: Full TypeScript definitions for nodes, edges, and configuration
+  handlers.
+
+## Installation
+
+```bash
+# Using pnpm
+pnpm add @bemedev/mind-flow
+
+# Peer dependencies
+pnpm add solid-js @bemedev/app @bemedev/app-solidjs @thisbeyond/solid-dnd
+```
+
+## Quick Start
+
+Import the `Flow` component and include the CSS stylesheet:
+
+```tsx
+import { Flow } from '@bemedev/mind-flow';
+import '@bemedev/mind-flow/style.css';
+
+export const FlowDemo = () => {
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <Flow />
+    </div>
+  );
+};
+```
+
+## Custom Configuration
+
+You can provide initial node and edge configurations, as well as callback handlers:
+
+```tsx
+import { Flow, type FlowProps } from '@bemedev/mind-flow';
+import '@bemedev/mind-flow/style.css';
+
+const config: FlowProps['config'] = {
+  nodes: [
+    {
+      id: 'node-1',
+      name: 'Start',
+      description: 'Starting point of workflow',
+      x: 100,
+      y: 100,
+    },
+    {
+      id: 'node-2',
+      name: 'Process',
+      description: 'Step 1 processing',
+      x: 400,
+      y: 100,
+    },
+  ],
+  edges: [{ id: 'edge-1', from: 'node-1', to: 'node-2' }],
+};
+
+export const CustomFlow = () => {
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <Flow
+        config={config}
+        onNodeAdded={node => console.log('Node added:', node)}
+        onNodeDeleted={nodeId => console.log('Node deleted:', nodeId)}
+        onEdgeAdded={edge => console.log('Edge added:', edge)}
+        onEdgeDeleted={edgeId => console.log('Edge deleted:', edgeId)}
+      />
+    </div>
+  );
+};
+```
+
+## 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.
+
+## License
+
+[MIT](LICENSE)

package/lib/helpers/createContext.d.ts

@@ -1,20 +1,17 @@
 import { createContext as createSolidContext, ParentComponent } from 'solid-js';
-/** Context options type extracted from Solid's `createContext`. */
+/** Context options type extracted from Solid's `createSolidContext`. */
 type Options = Parameters<typeof createSolidContext>[1];
 /**
- * Creates a Solid context provider component and a custom hook to consume
- * it.
+ * 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>`.
- * @param options - Optional context configuration of type
- *   {@linkcode Options}.
+ * @param context - Factory function returning a non-nullable context value of type
+ *   `NonNullable<T>`.
+ * @param options - Optional context configuration of type {@linkcode Options}.
  *
- * @returns A tuple containing the Provider component of type
- *   {@linkcode ParentComponent}, the accessor hook, and the Solid context
- *   object.
+ * @returns A tuple containing the Provider component of interface
+ *   {@linkcode ParentComponent}, the accessor hook, and the Solid context object.
  */
 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;;;;;;;;;;;;;;GAcG;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,wEAAwE;AACxE,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"}

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:{actions:[`moveNode`,`buildUI`],target:`/construction`},MOVE_IMMEDIATE:{actions:[{name:`buildImmediateUI`,description:`Must be in the ui`}]},UPDATE_UI:`/construction`,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`},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)})),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`)})),sync:!0}).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:20,vertical:35},T=[{id:`node-0`,data:{content:`Some text`,label:`Root node`},input:!1,position:{x:350,y:100}}],E=(0,n.interpret)(y,{context:{},pContext:{generatedId:null}}),[D,O]=u(()=>{let e=(0,t.createSignal)(1),n=(0,t.createSignal)(),[i,a]=(0,t.createSignal)(),[o,s]=(0,t.createSignal)({},{equals:l}),c=(t,n)=>{let r=i();if(!r)return{x:t,y:n};let a=r.getBoundingClientRect(),o=e[0]();return{x:(t-a.left)/o,y:(n-a.top)/o}},[u,d]=(0,t.createSignal)({},{equals:!1}),f=(t,n,r=192,a=50)=>{let o=i()?.parentElement;if(!o)return{x:t,y:n};let s=e[0](),c=o.scrollLeft/s+w.horizontal,l=Math.max(c,(o.scrollLeft+o.clientWidth)/s-w.horizontal-r),u=o.scrollTop/s+w.vertical,d=Math.max(u,(o.scrollTop+o.clientHeight)/s-w.vertical-a);return{x:Math.min(Math.max(t,c),l),y:Math.min(Math.max(n,u),d)}};return E.addOptions(({voidAction:t,batch:n,assign:a})=>({actions:{placeChild:a(`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}`,s=o()[e]?.width??0,c=o()[e]?.height??0,l=i.position.x+s+100,u=i.position.y,d=f(l,u,s,c);return[...r,{id:a,data:{content:`<Nouveau nœud>`},input:!0,position:d}]}}),placeParent:a(`context.data.nodes`,{ADD_PARENT:({context:{data:t},pContext:{generatedId:n}})=>{let r=t?.nodes??[],a=`node-${n}`,o=i()?.parentElement,s=o?.scrollLeft??0,c=o?.scrollTop??0,l=o?.clientWidth??0,u=o?.clientHeight??0,d=e[0](),f=(s+l/2)/d,p=(c+u/2)/d;return[...r,{id:a,data:{content:`<Nouveau nœud>`},input:!1,position:{x:f,y:p}}]}}),placeSibling:a(`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 s=i.find(e=>e.id===a);if(!s)return i;let c=`node-${n}`,l=o()[a]?.width??0,u=o()[a]?.height??0,d=s.position.x+l+100,p=s.position.y+100,m=f(d,p,l,u);return[...i,{id:c,data:{content:`<Nouveau nœud>`},input:!0,position:m}]}}),buildUI:n(t(({context:{data:e}})=>{let t=e?.edges??[];d(e=>{let n=Object.entries({...e}).filter(([e])=>t?.some(t=>t.id===e));return Object.fromEntries(n)})}),t({else:({context:{data:e}})=>{let t=e?.edges??[];d((0,r.produce)(e=>{t?.forEach(({from:t,id:n,to:r})=>{let i=o()[t]?.output,a=o()[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??[];d((0,r.produce)(e=>{n?.forEach(({from:n,to:i,id:a})=>{if(n===t.id){let n=o()[t.id]?.outputOffset??C(o()[t.id]?.width),i=t.x+n.x,c=t.y+n.y;e[a]={...e[a],x0:i,y0:c},s((0,r.produce)(e=>{e[t.id]&&(e[t.id]={...e[t.id],output:{x:i,y:c}})}))}if(i===t.id){let n=o()[t.id]?.inputOffset??S,i=t.x+n.x,c=t.y+n.y;e[a]={...e[a],x1:i,y1:c},s((0,r.produce)(e=>{e[t.id]&&(e[t.id]={...e[t.id],input:{x:i,y:c}})}))}})}))}}),a(`context.updatingUI`,()=>!0)),buildImmediateUI:t({MOVE_IMMEDIATE:({context:{data:e},payload:t})=>{let n=e?.edges??[];d((0,r.produce)(e=>{n?.forEach(({from:n,to:i,id:a})=>{if(n===t.id){let n=o()[t.id]?.outputOffset??C(o()[t.id]?.width),i=t.x+n.x,c=t.y+n.y;e[a]={...e[a],x0:i,y0:c},s((0,r.produce)(e=>{e[t.id]&&(e[t.id]={...e[t.id],output:{x:i,y:c}})}))}if(i===t.id){let n=o()[t.id]?.inputOffset??S,i=t.x+n.x,c=t.y+n.y;e[a]={...e[a],x1:i,y1:c},s((0,r.produce)(e=>{e[t.id]&&(e[t.id]={...e[t.id],input:{x:i,y:c}})}))}})}))}})}})),E.start(),{dimensions:[o,s],newEdge:n,board:[i,a],getBoardPoint:c,edgesPositions:[u,d],service:E,zoom: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{board:[e],zoom:[t]}=O(),[n,{addTransformer:r,removeTransformer:i,onDragStart:a,onDragEnd:s}]=(0,o.useDragDropContext)(),c={id:`clamp-to-container`,order:100,callback:r=>{let i=e()?.parentElement,a=n.active.draggable;if(!i||!a)return r;let o=a.layout,s=i.getBoundingClientRect(),c=s.left+i.clientLeft,l=s.top+i.clientTop,u=c+i.clientWidth,d=l+i.clientHeight,f=t(),p=c-o.left+w.horizontal*f,m=Math.max(p,u-o.right-w.horizontal*f),h=l-o.top+w.vertical*f,g=Math.max(h,d-o.bottom-w.vertical*f);return{x:Math.min(Math.max(r.x,p),m),y:Math.min(Math.max(r.y,h),g)}}};return a(({draggable:e})=>{r(`draggables`,e.id,c)}),s(({draggable:e})=>{i(`draggables`,e.id,c.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=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}=O();(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)(N);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=I(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)(P);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 R=(0,e.template)(`<svg class="pointer-events-none h-full w-full overflow-visible"><!$><!/><!$><!/>`),z=()=>{let[n,r]=(0,t.createSignal)(),{newEdge:[i],edgesPositions:[a]}=O(),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)(R),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)(L,{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:L}),l,u),n})()},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=n=>{let i,s,[c,l]=(0,t.createSignal)(),{dimensions:[u,d],newEdge:[f,p],getBoardPoint:m,service:h,zoom:[g]}=O(),_=(0,a.useState)(h,{selector:e=>e.context.selected===n.id});(0,t.createEffect)(()=>{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?Object.values(t).some(e=>e.to===n.id):!1}}),y=(0,o.createDraggable)(n.id);return(()=>{var r=(0,e.getNextElement)(H),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)(B);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)(U);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)(W);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)(V),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 K=(0,e.template)(`<div class="relative mx-auto h-[calc(100vh-64px)] w-[calc(100vw-32px)]"><div class="relative h-full w-full overflow-scroll rounded-lg border-2 border-gray-600"><!$><!/><!$><!/><div class="relative cursor-crosshair"style="transform-origin:top left"><!$><!/><!$><!/></div></div><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=()=>{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,t.onCleanup)(p);let m=0,h=0,{board:[,g],service:_,newEdge:[v],zoom:[y,b]}=O(),x=()=>{if(!n)return;let e=n.scrollWidth-n.clientWidth,t=n.scrollHeight-n.clientHeight;m=e>0?n.scrollLeft/e:0,h=t>0?n.scrollTop/t:0};(0,t.createEffect)((0,t.on)(y,()=>{if(!n)return;let e=n.scrollWidth-n.clientWidth,t=n.scrollHeight-n.clientHeight;e>0&&(n.scrollLeft=m*e),t>0&&(n.scrollTop=h*t)},{defer:!0}));let S=(0,a.useState)(_,{selector:e=>e.context?.selected}),C=e=>S()===e,w=(0,a.useState)(_,{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:j}),T=()=>{let e=y();return e<1?500*e:500};return(0,e.createComponent)(o.DragDropProvider,{onDragMove:({draggable:{transform:e,node:t,id:n},overlay:r})=>{if(u(n),C(n)){let i=t.offsetLeft+e.x/y(),a=t.offsetTop+e.y/y();r?.node.style.setProperty(`top`,a*2+`px`),r?.node.style.setProperty(`left`,i*2+`px`);let o=e.x/y(),s=e.y/y();t.style.setProperty(`transform`,`translate3d(${o}px, ${s}px, 0)`),_.send({type:`MOVE_IMMEDIATE`,payload:{id:`${n}`,x:i,y:a}}),c({...e})}},onDragEnd:({draggable:{node:e,id:t}})=>{if(!C(t))return;let n=e.offsetLeft+s().x/y(),r=e.offsetTop+s().y/y();e.style.setProperty(`top`,r+`px`),e.style.setProperty(`left`,n+`px`),e.style.removeProperty(`transform`),setTimeout(()=>{_.send({type:`MOVE`,payload:{id:`${t}`,x:n,y:r}}),c({x:0,y:0})},0)},get children(){return[(()=>{var a=(0,e.getNextElement)(K),s=a.firstChild,c=s.firstChild,[l,u]=(0,e.getNextMarker)(c.nextSibling),m=l.nextSibling,[h,S]=(0,e.getNextMarker)(m.nextSibling),C=h.nextSibling,E=C.firstChild,[D,O]=(0,e.getNextMarker)(E.nextSibling),k=D.nextSibling,[A,j]=(0,e.getNextMarker)(k.nextSibling),N=s.nextSibling.firstChild,P=N.nextSibling,F=P.firstChild,[I,L]=(0,e.getNextMarker)(F.nextSibling);I.nextSibling;var R=P.nextSibling,B=R.nextSibling.nextSibling;return a.addEventListener(`wheel`,e=>{if(e.ctrlKey||e.metaKey){e.preventDefault(),x();let t=e.deltaY<0?.1:-.1;b(e=>Math.min(Math.max(Number((e+t).toFixed(2)),.2),3))}}),s.addEventListener(`scroll`,x),(0,e.use)(e=>n=e,s),(0,e.insert)(s,(0,e.createComponent)(o.DragDropSensors,{}),l,u),(0,e.insert)(s,(0,e.createComponent)(M,{}),h,S),C.$$mousedown=e=>{if(v()||e.button!==0||!n)return;_.send(`DESELECT`);let t=e.clientX,r=e.clientY,a=n.scrollLeft,o=n.scrollTop;i(!0);let s=e=>{if(!n)return;let i=e.clientX-t,s=e.clientY-r;n.scrollLeft=a-i*3,n.scrollTop=o-s*3,x()},c=()=>{window.removeEventListener(`mousemove`,s),window.removeEventListener(`mouseup`,c),setTimeout(()=>i(!1),200),p=void 0};p=c,window.addEventListener(`mousemove`,s),window.addEventListener(`mouseup`,c)},(0,e.use)(g,C),(0,e.insert)(C,(0,e.createComponent)(z,{}),D,O),(0,e.insert)(C,(0,e.createComponent)(t.For,{get each(){return w()},children:G}),A,j),N.$$click=()=>{x(),f(void 0),b(e=>Math.max(.2,Number((e-.1).toFixed(2))))},P.$$click=()=>{x(),d()?(b(d()),f(void 0)):(f(y()),b(1))},(0,e.insert)(P,()=>Math.round(y()*100),I,L),R.$$click=()=>{x(),f(void 0),b(e=>Math.min(3,Number((e+.1).toFixed(2))))},B.$$click=()=>_.send(`ADD_PARENT`),(0,e.effect)(t=>{var n=!!r(),i=`calc(${T()}vh - 85px)`,a=`calc(${T()}vw - 53px)`,o=y();return n!==t.e&&C.classList.toggle(`cursor-grabbing`,t.e=n),i!==t.t&&(0,e.setStyleProperty)(C,`height`,t.t=i),a!==t.a&&(0,e.setStyleProperty)(C,`width`,t.a=a),o!==t.o&&(0,e.setStyleProperty)(C,`scale`,t.o=o),t},{e:void 0,t:void 0,a:void 0,o:void 0}),(0,e.runHydrationEvents)(),a})(),(0,e.createComponent)(t.Show,{get when(){return!l()||!C(l())},get children(){return(0,e.createComponent)(o.DragOverlay,{children:``})}})]}})};(0,e.delegateEvents)([`mousedown`,`click`]);var J=(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)">`),Y=n=>{let r=n.config?.nodes??T,i=n.config?.edges,{service:a,newEdge:[o,s],getBoardPoint:c}=O();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)(J),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)(q,{})),(0,e.effect)(t=>(0,e.setStyleProperty)(n,`cursor`,o()?`inherit`:`crosshair`)),(0,e.runHydrationEvents)(),t})()};(0,e.delegateEvents)([`mouseup`,`mousemove`]);var X=t=>(0,e.createComponent)(D,{get children(){return(0,e.createComponent)(Y,t)}});exports.CLASSES=s,exports.Flow=X;
+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;