@dschz/solid-flow 0.1.2 → 0.1.4

package/dist/index/index.jsx

@@ -1,207 +1,4470 @@
-import{For as Ts}from"solid-js";import{createContext as ur,useContext as yr}from"solid-js";var xo=ur();function ke(){let e=yr(xo);if(!e)throw new Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useEdgeId");return e}import{createContext as as,useContext as ls}from"solid-js";import{ReactiveMap as ze}from"@solid-primitives/map";import{createMediaQuery as Bi}from"@solid-primitives/media";import{addEdge as Vi,calculateNodePosition as Ki,clampPosition as Xi,fitViewport as Fi,getEdgePosition as Yi,getElevatedEdgeZIndex as Wi,getInternalNodesBounds as Zi,getNodeDimensions as $i,getNodePositionWithOrigin as Ui,getViewportForBounds as Ji,infiniteExtent as Gi,initialConnection as Yo,isCoordinateExtent as ji,isEdgeVisible as qi,mergeAriaLabelConfig as Qi,panBy as es,pointToRendererPoint as ln,snapPosition as os,updateAbsolutePositions as ts,updateNodeInternals as ns}from"@xyflow/system";import{batch as Ce,createComputed as Re,createEffect as Te,createMemo as Ue,createSignal as re,mapArray as cn,mergeProps as pn,onCleanup as gn,untrack as rs}from"solid-js";import{produce as ve}from"solid-js/store";import Tr from"clsx";import{mergeProps as vr,Show as Ut,splitProps as Mr}from"solid-js";import xr from"clsx";import{mergeProps as wr,splitProps as Cr}from"solid-js";import{isEdgeBase as fr,isNodeBase as hr}from"@xyflow/system";import{createMemo as Zt,createSignal as Sr}from"solid-js";import{createStore as Nr}from"solid-js/store";var wo=e=>hr(e),$t=e=>fr(e),J=e=>e===void 0?void 0:`${e}px`,Xe={ArrowUp:{x:0,y:-1},ArrowDown:{x:0,y:1},ArrowLeft:{x:-1,y:0},ArrowRight:{x:1,y:0}};function se(e){let o=Zt(()=>Sr(e()));return[()=>o()[0](),S=>o()[1](S)]}function Fe(e){let o=Zt(()=>{let[t,N]=Nr(e());return{get:t,set:N}});return{get(){return o().get},get set(){return o().set}}}import{Show as Pr}from"solid-js";import{Portal as Er}from"solid-js/web";var Co=e=>{let{store:o}=z(),t=()=>o.domNode?.querySelector(".solid-flow__edge-labels");return<Pr when={t()}>{N=><Er mount={N()}>{e.children}</Er>}</Pr>};var De=e=>{let o=wr({x:0,y:0,selectEdgeOnClick:!1,transparent:!1,style:{}},e),[t,N]=Cr(o,["x","y","width","height","selectEdgeOnClick","transparent","children","class","style"]),{actions:S}=z(),P=ke(),x=()=>S.getEdge(P())?.zIndex;return<Co>
-      <div role="button"tabIndex={-1}class={xr("solid-flow__edge-label",{transparent:t.transparent},t.class)}style={{"pointer-events":"all",width:J(t.width),height:J(t.height),transform:`translate(-50%, -50%) translate(${t.x}px,${t.y}px)`,cursor:t.selectEdgeOnClick?"pointer":void 0,"z-index":x(),...t.style}}onClick={()=>{t.selectEdgeOnClick&&S.handleEdgeSelection(P())}}{...N}>
-        {t.children}
+// src/components/container/EdgeRenderer.tsx
+import { For as For2 } from "solid-js";
+
+// src/components/contexts/edgeId.tsx
+import { createContext, useContext } from "solid-js";
+var EdgeIdContext = createContext();
+function useEdgeId() {
+  const ctx = useContext(EdgeIdContext);
+  if (!ctx) {
+    throw new Error(
+      "solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useEdgeId"
+    );
+  }
+  return ctx;
+}
+
+// src/components/contexts/flow.tsx
+import { createContext as createContext4, useContext as useContext4 } from "solid-js";
+
+// src/data/createSolidFlow.tsx
+import { ReactiveMap } from "@solid-primitives/map";
+import { createMediaQuery } from "@solid-primitives/media";
+import {
+  addEdge as systemAddEdge,
+  calculateNodePosition,
+  clampPosition as clampPosition2,
+  fitViewport,
+  getEdgePosition,
+  getElevatedEdgeZIndex,
+  getInternalNodesBounds,
+  getNodeDimensions as getNodeDimensions2,
+  getNodePositionWithOrigin as getNodePositionWithOrigin2,
+  getViewportForBounds,
+  infiniteExtent as infiniteExtent3,
+  initialConnection,
+  isCoordinateExtent as isCoordinateExtent2,
+  isEdgeVisible,
+  mergeAriaLabelConfig,
+  panBy as panBySystem,
+  pointToRendererPoint,
+  snapPosition,
+  updateAbsolutePositions,
+  updateNodeInternals as systemUpdateNodeInternals
+} from "@xyflow/system";
+import {
+  batch as batch2,
+  createComputed,
+  createEffect as createEffect4,
+  createMemo as createMemo5,
+  createSignal as createSignal5,
+  mapArray,
+  mergeProps as mergeProps8,
+  onCleanup as onCleanup2,
+  untrack
+} from "solid-js";
+import { produce } from "solid-js/store";
+
+// src/components/graph/edge/BaseEdge.tsx
+import clsx2 from "clsx";
+import { mergeProps as mergeProps2, Show as Show2, splitProps as splitProps2 } from "solid-js";
+
+// src/components/graph/edge/EdgeLabel.tsx
+import clsx from "clsx";
+import { mergeProps, splitProps } from "solid-js";
+
+// src/utils.ts
+import { isEdgeBase, isNodeBase } from "@xyflow/system";
+import { createMemo, createSignal } from "solid-js";
+import { createStore } from "solid-js/store";
+var isNode = (element) => isNodeBase(element);
+var isEdge = (element) => isEdgeBase(element);
+var toPxString = (value) => value === void 0 ? void 0 : `${value}px`;
+var ARROW_KEY_DIFFS = {
+  ArrowUp: { x: 0, y: -1 },
+  ArrowDown: { x: 0, y: 1 },
+  ArrowLeft: { x: -1, y: 0 },
+  ArrowRight: { x: 1, y: 0 }
+};
+function createWritable(accessor) {
+  const signal = createMemo(() => createSignal(accessor()));
+  const get = () => signal()[0]();
+  const set = (v) => signal()[1](v);
+  return [get, set];
+}
+function createWritableStore(accessor) {
+  const storeMemo = createMemo(() => {
+    const [get, set] = createStore(accessor());
+    return { get, set };
+  });
+  return {
+    get() {
+      return storeMemo().get;
+    },
+    get set() {
+      return storeMemo().set;
+    }
+  };
+}
+
+// src/components/graph/edge/EdgeLabelRenderer.tsx
+import { Show } from "solid-js";
+import { Portal } from "solid-js/web";
+var EdgeLabelRenderer = (props) => {
+  const { store } = useInternalSolidFlow();
+  const labelNode = () => store.domNode?.querySelector(".solid-flow__edge-labels");
+  return <Show when={labelNode()}>{(root) => <Portal mount={root()}>{props.children}</Portal>}</Show>;
+};
+
+// src/components/graph/edge/EdgeLabel.tsx
+var EdgeLabel = (props) => {
+  const _props = mergeProps(
+    {
+      x: 0,
+      y: 0,
+      selectEdgeOnClick: false,
+      transparent: false,
+      style: {}
+    },
+    props
+  );
+  const [local, rest] = splitProps(_props, [
+    "x",
+    "y",
+    "width",
+    "height",
+    "selectEdgeOnClick",
+    "transparent",
+    "children",
+    "class",
+    "style"
+  ]);
+  const { actions } = useInternalSolidFlow();
+  const id = useEdgeId();
+  const zIndex = () => actions.getEdge(id())?.zIndex;
+  return <EdgeLabelRenderer>
+      <div
+    role="button"
+    tabIndex={-1}
+    class={clsx("solid-flow__edge-label", { transparent: local.transparent }, local.class)}
+    style={{
+      // TODO: Add hideOnSSR
+      "pointer-events": "all",
+      width: toPxString(local.width),
+      height: toPxString(local.height),
+      transform: `translate(-50%, -50%) translate(${local.x}px,${local.y}px)`,
+      cursor: local.selectEdgeOnClick ? "pointer" : void 0,
+      "z-index": zIndex(),
+      ...local.style
+    }}
+    onClick={() => {
+      if (local.selectEdgeOnClick) actions.handleEdgeSelection(id());
+    }}
+    {...rest}
+  >
+        {local.children}
       </div>
-    </Co>};var Q=e=>{let o=vr({interactionWidth:20},e),[t,N]=Mr(o,["class","style","path","interactionWidth","label","labelStyle","labelX","labelY","markerStart","markerEnd"]);return<>
-      <path d={t.path}class={Tr(["solid-flow__edge-path",t.class])}marker-start={t.markerStart}marker-end={t.markerEnd}fill="none"style={t.style}{...N}/>
-
-      <Ut when={t.interactionWidth>0}>
-        <path d={t.path}stroke-opacity={0}stroke-width={t.interactionWidth}fill="none"class="solid-flow__edge-interaction"/>
-      </Ut>
-
-      <Ut when={t.label}>
-        <De x={t.labelX}y={t.labelY}style={t.labelStyle}>
-          {t.label}
-        </De>
-      </Ut>
-    </>};import{getBezierPath as Ir}from"@xyflow/system";var kr=e=>{let o=()=>{let[t,N,S]=Ir({sourceX:e.sourceX,sourceY:e.sourceY,targetX:e.targetX,targetY:e.targetY,sourcePosition:e.sourcePosition,targetPosition:e.targetPosition,curvature:e.pathOptions?.curvature});return{path:t,labelX:N,labelY:S}};return<Q id={e.id}path={o().path}labelX={o().labelX}labelY={o().labelY}label={e.label}labelStyle={e.labelStyle}markerStart={e.markerStart}markerEnd={e.markerEnd}interactionWidth={e.interactionWidth}style={e.style}/>};import{getBezierPath as Dr}from"@xyflow/system";var To=e=>{let o=()=>{let[t,N,S]=Dr({sourceX:e.sourceX,sourceY:e.sourceY,targetX:e.targetX,targetY:e.targetY,sourcePosition:e.sourcePosition,targetPosition:e.targetPosition});return{path:t,labelX:N,labelY:S}};return<Q path={o().path}labelX={o().labelX}labelY={o().labelY}label={e.label}labelStyle={e.labelStyle}markerStart={e.markerStart}markerEnd={e.markerEnd}interactionWidth={e.interactionWidth}style={e.style}/>};import{XYHandle as Or}from"@xyflow/system";import zr from"clsx";import{createSignal as Rr,mergeProps as Ar,Show as _r,splitProps as Lr}from"solid-js";var Hr=e=>{let o=Ar({size:25,reconnecting:!1,style:{}},e),[t,N]=Lr(o,["type","class","style","position","size","reconnecting","children"]),{store:S,nodeLookup:P,edgeLookup:x,actions:b}=z(),C=ke(),[T,v]=Rr(!1);if(!C())throw new Error("[solid-flow]: EdgeReconnectAnchor must be used within an Edge component");let E=()=>x.get(C()),w=I=>{if(I.button!==0)return;v(!0),S.onReconnectStart?.(I,E(),t.type);let D=t.type==="target"?{nodeId:E().source,handleId:E().sourceHandle??null,type:"source"}:{nodeId:E().target,handleId:E().targetHandle??null,type:"target"};Or.onPointerDown(I,{lib:S.lib,flowId:S.id,domNode:S.domNode,nodeId:D.nodeId,handleId:D.handleId,autoPanOnConnect:S.autoPanOnConnect,connectionMode:S.connectionMode,connectionRadius:S.connectionRadius,nodeLookup:P,isTarget:D.type==="target",edgeUpdaterType:D.type,cancelConnection:b.cancelConnection,panBy:b.panBy,updateConnection:b.setConnection,isValidConnection:S.isValidConnection,onConnectStart:S.onConnectStart,onConnectEnd:S.onConnectEnd,onConnect:k=>{let R={...E(),...k};R=S.onBeforeReconnect?.(R,E())??R,R&&b.setEdges(Y=>Y.map(H=>H.id===E().id?R:H)),S.onReconnect?.(E(),k)},onReconnectEnd:(k,R)=>{v(!1),S.onReconnectEnd?.(k,E(),D.type,R)},getTransform:()=>S.transform,getFromHandle:()=>S.connection.fromHandle,autoPanSpeed:S.autoPanSpeed,dragThreshold:S.connectionDragThreshold,handleDomNode:I.currentTarget})};return<De x={t.position?.x}y={t.position?.y}style={t.style}{...N}>
-      <div onPointerDown={w}class={zr("solid-flow__edgeupdater",`solid-flow__edgeupdater-${t.type}`,S.noPanClass,t.class)}style={{width:J(t.size),height:J(t.size),background:"transparent",border:"none",cursor:"move",...t.style}}>
-        <_r when={!T()}>{t.children}</_r>
+    </EdgeLabelRenderer>;
+};
+
+// src/components/graph/edge/BaseEdge.tsx
+var BaseEdge = (props) => {
+  const _props = mergeProps2(
+    {
+      interactionWidth: 20
+    },
+    props
+  );
+  const [local, rest] = splitProps2(_props, [
+    "class",
+    "style",
+    "path",
+    "interactionWidth",
+    "label",
+    "labelStyle",
+    "labelX",
+    "labelY",
+    "markerStart",
+    "markerEnd"
+  ]);
+  return <>
+      <path
+    d={local.path}
+    class={clsx2(["solid-flow__edge-path", local.class])}
+    marker-start={local.markerStart}
+    marker-end={local.markerEnd}
+    fill="none"
+    style={local.style}
+    {...rest}
+  />
+
+      <Show2 when={local.interactionWidth > 0}>
+        <path
+    d={local.path}
+    stroke-opacity={0}
+    stroke-width={local.interactionWidth}
+    fill="none"
+    class="solid-flow__edge-interaction"
+  />
+      </Show2>
+
+      <Show2 when={local.label}>
+        <EdgeLabel x={local.labelX} y={local.labelY} style={local.labelStyle}>
+          {local.label}
+        </EdgeLabel>
+      </Show2>
+    </>;
+};
+
+// src/components/graph/edge/BezierEdge.tsx
+import { getBezierPath } from "@xyflow/system";
+var BezierEdge = (props) => {
+  const pathData = () => {
+    const [path, labelX, labelY] = getBezierPath({
+      sourceX: props.sourceX,
+      sourceY: props.sourceY,
+      targetX: props.targetX,
+      targetY: props.targetY,
+      sourcePosition: props.sourcePosition,
+      targetPosition: props.targetPosition,
+      curvature: props.pathOptions?.curvature
+    });
+    return { path, labelX, labelY };
+  };
+  return <BaseEdge
+    id={props.id}
+    path={pathData().path}
+    labelX={pathData().labelX}
+    labelY={pathData().labelY}
+    label={props.label}
+    labelStyle={props.labelStyle}
+    markerStart={props.markerStart}
+    markerEnd={props.markerEnd}
+    interactionWidth={props.interactionWidth}
+    style={props.style}
+  />;
+};
+
+// src/components/graph/edge/BezierEdgeInternal.tsx
+import { getBezierPath as getBezierPath2 } from "@xyflow/system";
+var BezierEdgeInternal = (props) => {
+  const pathData = () => {
+    const [path, labelX, labelY] = getBezierPath2({
+      sourceX: props.sourceX,
+      sourceY: props.sourceY,
+      targetX: props.targetX,
+      targetY: props.targetY,
+      sourcePosition: props.sourcePosition,
+      targetPosition: props.targetPosition
+    });
+    return { path, labelX, labelY };
+  };
+  return <BaseEdge
+    path={pathData().path}
+    labelX={pathData().labelX}
+    labelY={pathData().labelY}
+    label={props.label}
+    labelStyle={props.labelStyle}
+    markerStart={props.markerStart}
+    markerEnd={props.markerEnd}
+    interactionWidth={props.interactionWidth}
+    style={props.style}
+  />;
+};
+
+// src/components/graph/edge/EdgeReconnectAnchor.tsx
+import { XYHandle } from "@xyflow/system";
+import clsx3 from "clsx";
+import { createSignal as createSignal2, mergeProps as mergeProps3, Show as Show3, splitProps as splitProps3 } from "solid-js";
+var EdgeReconnectAnchor = (props) => {
+  const _props = mergeProps3(
+    {
+      size: 25,
+      reconnecting: false,
+      style: {}
+    },
+    props
+  );
+  const [local, rest] = splitProps3(_props, [
+    "type",
+    "class",
+    "style",
+    "position",
+    "size",
+    "reconnecting",
+    "children"
+  ]);
+  const { store, nodeLookup, edgeLookup, actions } = useInternalSolidFlow();
+  const edgeId = useEdgeId();
+  const [reconnecting, setReconnecting] = createSignal2(false);
+  if (!edgeId()) {
+    throw new Error("[solid-flow]: EdgeReconnectAnchor must be used within an Edge component");
+  }
+  const edge = () => edgeLookup.get(edgeId());
+  const onPointerDown = (event) => {
+    if (event.button !== 0) {
+      return;
+    }
+    setReconnecting(true);
+    store.onReconnectStart?.(event, edge(), local.type);
+    const opposite = local.type === "target" ? {
+      nodeId: edge().source,
+      handleId: edge().sourceHandle ?? null,
+      type: "source"
+    } : {
+      nodeId: edge().target,
+      handleId: edge().targetHandle ?? null,
+      type: "target"
+    };
+    XYHandle.onPointerDown(event, {
+      lib: store.lib,
+      flowId: store.id,
+      domNode: store.domNode,
+      nodeId: opposite.nodeId,
+      handleId: opposite.handleId,
+      autoPanOnConnect: store.autoPanOnConnect,
+      connectionMode: store.connectionMode,
+      connectionRadius: store.connectionRadius,
+      nodeLookup,
+      isTarget: opposite.type === "target",
+      edgeUpdaterType: opposite.type,
+      cancelConnection: actions.cancelConnection,
+      panBy: actions.panBy,
+      updateConnection: actions.setConnection,
+      isValidConnection: store.isValidConnection,
+      onConnectStart: store.onConnectStart,
+      onConnectEnd: store.onConnectEnd,
+      onConnect: (connection) => {
+        let newEdge = { ...edge(), ...connection };
+        newEdge = store.onBeforeReconnect?.(newEdge, edge()) ?? newEdge;
+        if (newEdge) {
+          actions.setEdges((edges) => edges.map((e) => e.id === edge().id ? newEdge : e));
+        }
+        store.onReconnect?.(edge(), connection);
+      },
+      onReconnectEnd: (event2, connectionState) => {
+        setReconnecting(false);
+        store.onReconnectEnd?.(event2, edge(), opposite.type, connectionState);
+      },
+      getTransform: () => store.transform,
+      getFromHandle: () => store.connection.fromHandle,
+      autoPanSpeed: store.autoPanSpeed,
+      dragThreshold: store.connectionDragThreshold,
+      handleDomNode: event.currentTarget
+    });
+  };
+  return <EdgeLabel x={local.position?.x} y={local.position?.y} style={local.style} {...rest}>
+      <div
+    onPointerDown={onPointerDown}
+    class={clsx3(
+      "solid-flow__edgeupdater",
+      `solid-flow__edgeupdater-${local.type}`,
+      store.noPanClass,
+      local.class
+    )}
+    style={{
+      width: toPxString(local.size),
+      height: toPxString(local.size),
+      background: "transparent",
+      border: "none",
+      cursor: "move",
+      ...local.style
+    }}
+  >
+        <Show3 when={!reconnecting()}>{local.children}</Show3>
       </div>
-    </De>};import{elementSelectionKeys as Vr,getMarkerId as Gt}from"@xyflow/system";import Kr from"clsx";import{Show as Xr}from"solid-js";import{Dynamic as Fr}from"solid-js/web";import{Show as Br}from"solid-js";var Ye="solid-flow__node-desc",We="solid-flow__edge-desc",Jt="solid-flow__aria-live";var Mo=()=>{let{store:e}=z();return<>
-      <div id={`${Ye}-${e.id}`}class="a11y-hidden">
-        {e.disableKeyboardA11y?e.ariaLabelConfig["node.a11yDescription.default"]:e.ariaLabelConfig["node.a11yDescription.keyboardDisabled"]}
+    </EdgeLabel>;
+};
+
+// src/components/graph/edge/EdgeWrapper.tsx
+import { elementSelectionKeys, getMarkerId } from "@xyflow/system";
+import clsx4 from "clsx";
+import { Show as Show5 } from "solid-js";
+import { Dynamic } from "solid-js/web";
+
+// src/components/accessibility/A11yDescriptions.tsx
+import { Show as Show4 } from "solid-js";
+
+// src/components/accessibility/constants.ts
+var ARIA_NODE_DESC_KEY = "solid-flow__node-desc";
+var ARIA_EDGE_DESC_KEY = "solid-flow__edge-desc";
+var ARIA_LIVE_MESSAGE = "solid-flow__aria-live";
+
+// src/components/accessibility/A11yDescriptions.tsx
+var A11yDescriptions = () => {
+  const { store } = useInternalSolidFlow();
+  return <>
+      <div id={`${ARIA_NODE_DESC_KEY}-${store.id}`} class="a11y-hidden">
+        {store.disableKeyboardA11y ? store.ariaLabelConfig["node.a11yDescription.default"] : store.ariaLabelConfig["node.a11yDescription.keyboardDisabled"]}
       </div>
-      <div id={`${We}-${e.id}`}class="a11y-hidden">
-        {e.ariaLabelConfig["edge.a11yDescription.default"]}
+      <div id={`${ARIA_EDGE_DESC_KEY}-${store.id}`} class="a11y-hidden">
+        {store.ariaLabelConfig["edge.a11yDescription.default"]}
       </div>
 
-      <Br when={!e.disableKeyboardA11y}>
-        <div id={`${Jt}-${e.id}`}aria-live="assertive"aria-atomic="true"class="a11y-live-msg">
-          {e.ariaLiveMessage}
+      <Show4 when={!store.disableKeyboardA11y}>
+        <div
+    id={`${ARIA_LIVE_MESSAGE}-${store.id}`}
+    aria-live="assertive"
+    aria-atomic="true"
+    class="a11y-live-msg"
+  >
+          {store.ariaLiveMessage}
         </div>
-      </Br>
-    </>};var Io=e=>{let o,{store:t,actions:N}=z(),S=()=>e.edgeId,P=()=>N.getEdge(S()),x=()=>P().type??"default",b=()=>P().selectable??t.elementsSelectable,C=()=>P().focusable??t.edgesFocusable,T=()=>t.edgeTypes[x()],v=()=>P().markerStart?`url('#${Gt(P().markerStart,t.id)}')`:void 0,E=()=>P().markerEnd?`url('#${Gt(P().markerEnd,t.id)}')`:void 0,w=R=>{b()&&N.handleEdgeSelection(S()),e.onEdgeClick?.({edge:P(),event:R})},I=(R,Y)=>{({contextmenu:e.onEdgeContextMenu,pointerenter:e.onEdgePointerEnter,pointerleave:e.onEdgePointerLeave})[Y]?.({edge:P(),event:R})},D=R=>{if(t.disableKeyboardA11y||!Vr.includes(R.key)||!b())return;R.key==="Escape"?(o?.blur(),N.unselectNodesAndEdges({edges:[P()]})):N.addSelectedEdges([P().id])},k=()=>P().ariaLabel??`Edge from ${P().source} to ${P().target}`;return<xo.Provider value={S}>
-      <Xr when={!P().hidden}>
-        <svg class="solid-flow__edge-wrapper"style={{"z-index":P().zIndex}}>
-          <g ref={o}data-id={P().id}tabIndex={C()?0:void 0}role={P().ariaRole??(C()?"group":"img")}aria-label={k()}aria-roledescription="edge"aria-describedby={C()?`${We}-${t.id}`:void 0}class={Kr("solid-flow__edge",`solid-flow__edge-${x()}`,{animated:P().animated,selected:P().selected,selectable:b()},P().class)}onClick={w}onKeyDown={R=>C()&&D(R)}onContextMenu={R=>I(R,"contextmenu")}onPointerEnter={R=>I(R,"pointerenter")}onPointerLeave={R=>I(R,"pointerleave")}{...P().domAttributes}>
-            <Fr component={T()}id={P().id}source={P().source}target={P().target}sourceX={P().sourceX}sourceY={P().sourceY}targetX={P().targetX}targetY={P().targetY}sourcePosition={P().sourcePosition}targetPosition={P().targetPosition}animated={P().animated}selected={P().selected}label={P().label}labelStyle={P().labelStyle}data={P().data}style={P().style}interactionWidth={P().interactionWidth}selectable={b()}deletable={P().deletable??!0}type={x()}sourceHandleId={P().sourceHandle}targetHandleId={P().targetHandle}markerStart={v()}markerEnd={E()}/>
+      </Show4>
+    </>;
+};
+
+// src/components/graph/edge/EdgeWrapper.tsx
+var EdgeWrapper = (props) => {
+  let edgeRef;
+  const { store, actions } = useInternalSolidFlow();
+  const edgeId = () => props.edgeId;
+  const edge = () => actions.getEdge(edgeId());
+  const edgeType = () => edge().type ?? "default";
+  const selectable = () => edge().selectable ?? store.elementsSelectable;
+  const focusable = () => edge().focusable ?? store.edgesFocusable;
+  const edgeComponent = () => store.edgeTypes[edgeType()];
+  const markerStartUrl = () => edge().markerStart ? `url('#${getMarkerId(edge().markerStart, store.id)}')` : void 0;
+  const markerEndUrl = () => edge().markerEnd ? `url('#${getMarkerId(edge().markerEnd, store.id)}')` : void 0;
+  const onClick = (event) => {
+    if (selectable()) {
+      actions.handleEdgeSelection(edgeId());
+    }
+    props.onEdgeClick?.({ edge: edge(), event });
+  };
+  const onPointerEvent = (event, type) => {
+    const handlers = {
+      contextmenu: props.onEdgeContextMenu,
+      pointerenter: props.onEdgePointerEnter,
+      pointerleave: props.onEdgePointerLeave
+    };
+    handlers[type]?.({ edge: edge(), event });
+  };
+  const onKeyDown = (event) => {
+    if (store.disableKeyboardA11y || !elementSelectionKeys.includes(event.key) || !selectable()) {
+      return;
+    }
+    const unselect = event.key === "Escape";
+    if (unselect) {
+      edgeRef?.blur();
+      actions.unselectNodesAndEdges({ edges: [edge()] });
+    } else {
+      actions.addSelectedEdges([edge().id]);
+    }
+  };
+  const ariaLabel = () => edge().ariaLabel ?? `Edge from ${edge().source} to ${edge().target}`;
+  return <EdgeIdContext.Provider value={edgeId}>
+      <Show5 when={!edge().hidden}>
+        <svg class="solid-flow__edge-wrapper" style={{ "z-index": edge().zIndex }}>
+          <g
+    ref={edgeRef}
+    data-id={edge().id}
+    tabIndex={focusable() ? 0 : void 0}
+    role={edge().ariaRole ?? (focusable() ? "group" : "img")}
+    aria-label={ariaLabel()}
+    aria-roledescription="edge"
+    aria-describedby={focusable() ? `${ARIA_EDGE_DESC_KEY}-${store.id}` : void 0}
+    class={clsx4(
+      "solid-flow__edge",
+      `solid-flow__edge-${edgeType()}`,
+      {
+        animated: edge().animated,
+        selected: edge().selected,
+        selectable: selectable()
+      },
+      edge().class
+    )}
+    onClick={onClick}
+    onKeyDown={(e) => focusable() && onKeyDown(e)}
+    onContextMenu={(e) => onPointerEvent(e, "contextmenu")}
+    onPointerEnter={(e) => onPointerEvent(e, "pointerenter")}
+    onPointerLeave={(e) => onPointerEvent(e, "pointerleave")}
+    {...edge().domAttributes}
+  >
+            <Dynamic
+    component={edgeComponent()}
+    id={edge().id}
+    source={edge().source}
+    target={edge().target}
+    sourceX={edge().sourceX}
+    sourceY={edge().sourceY}
+    targetX={edge().targetX}
+    targetY={edge().targetY}
+    sourcePosition={edge().sourcePosition}
+    targetPosition={edge().targetPosition}
+    animated={edge().animated}
+    selected={edge().selected}
+    label={edge().label}
+    labelStyle={edge().labelStyle}
+    data={edge().data}
+    style={edge().style}
+    interactionWidth={edge().interactionWidth}
+    selectable={selectable()}
+    deletable={edge().deletable ?? true}
+    type={edgeType()}
+    sourceHandleId={edge().sourceHandle}
+    targetHandleId={edge().targetHandle}
+    markerStart={markerStartUrl()}
+    markerEnd={markerEndUrl()}
+  />
           </g>
         </svg>
-      </Xr>
-    </xo.Provider>};import{getSmoothStepPath as Yr}from"@xyflow/system";import{createMemo as Wr}from"solid-js";var Zr=e=>{let o=Wr(()=>{let[t,N,S]=Yr({sourceX:e.sourceX,sourceY:e.sourceY,targetX:e.targetX,targetY:e.targetY,sourcePosition:e.sourcePosition,targetPosition:e.targetPosition,borderRadius:e.pathOptions?.borderRadius,offset:e.pathOptions?.offset});return{path:t,labelX:N,labelY:S}});return<Q id={e.id}path={o().path}labelX={o().labelX}labelY={o().labelY}label={e.label}labelStyle={e.labelStyle}markerStart={e.markerStart}markerEnd={e.markerEnd}interactionWidth={e.interactionWidth}style={e.style}/>};import{getSmoothStepPath as $r}from"@xyflow/system";var ko=e=>{let o=()=>{let[t,N,S]=$r({sourceX:e.sourceX,sourceY:e.sourceY,targetX:e.targetX,targetY:e.targetY,sourcePosition:e.sourcePosition,targetPosition:e.targetPosition});return{path:t,labelX:N,labelY:S}};return<Q path={o().path}labelX={o().labelX}labelY={o().labelY}label={e.label}labelStyle={e.labelStyle}markerStart={e.markerStart}markerEnd={e.markerEnd}interactionWidth={e.interactionWidth}style={e.style}/>};import{getSmoothStepPath as Ur}from"@xyflow/system";import{createMemo as Jr}from"solid-js";var Gr=e=>{let o=Jr(()=>{let[t,N,S]=Ur({sourceX:e.sourceX,sourceY:e.sourceY,targetX:e.targetX,targetY:e.targetY,sourcePosition:e.sourcePosition,targetPosition:e.targetPosition,borderRadius:0,offset:e.pathOptions?.offset});return{path:t,labelX:N,labelY:S}});return<Q id={e.id}path={o().path}labelX={o().labelX}labelY={o().labelY}label={e.label}labelStyle={e.labelStyle}markerStart={e.markerStart}markerEnd={e.markerEnd}interactionWidth={e.interactionWidth}style={e.style}/>};import{getSmoothStepPath as jr}from"@xyflow/system";var Do=e=>{let o=()=>{let[t,N,S]=jr({sourceX:e.sourceX,sourceY:e.sourceY,targetX:e.targetX,targetY:e.targetY,sourcePosition:e.sourcePosition,targetPosition:e.targetPosition,borderRadius:0});return{path:t,labelX:N,labelY:S}};return<Q path={o().path}labelX={o().labelX}labelY={o().labelY}label={e.label}labelStyle={e.labelStyle}markerStart={e.markerStart}markerEnd={e.markerEnd}interactionWidth={e.interactionWidth}style={e.style}/>};import{getStraightPath as qr}from"@xyflow/system";import{createMemo as Qr}from"solid-js";var ei=e=>{let o=Qr(()=>{let[t,N,S]=qr({sourceX:e.sourceX,sourceY:e.sourceY,targetX:e.targetX,targetY:e.targetY});return{path:t,labelX:N,labelY:S}});return<Q id={e.id}path={o().path}labelX={o().labelX}labelY={o().labelY}label={e.label}labelStyle={e.labelStyle}markerStart={e.markerStart}markerEnd={e.markerEnd}interactionWidth={e.interactionWidth}style={e.style}/>};import{getStraightPath as oi}from"@xyflow/system";var Oo=e=>{let o=()=>{let[t,N,S]=oi({sourceX:e.sourceX,sourceY:e.sourceY,targetX:e.targetX,targetY:e.targetY});return{path:t,labelX:N,labelY:S}};return<Q path={o().path}labelX={o().labelX}labelY={o().labelY}label={e.label}labelStyle={e.labelStyle}markerStart={e.markerStart}markerEnd={e.markerEnd}interactionWidth={e.interactionWidth}style={e.style}/>};import{mergeProps as pi}from"solid-js";import{areConnectionMapsEqual as ri,getHostForElement as ii,handleConnectionChange as Qt,XYHandle as en}from"@xyflow/system";import si from"clsx";import{createEffect as di,mergeProps as ai,splitProps as li}from"solid-js";import{unwrap as ci}from"solid-js/store";import{getNodesInside as rp}from"@xyflow/system";var jt=e=>{let{source:o,sourceHandle:t,target:N,targetHandle:S}=e;return`xy-edge__${o}${t||""}-${N}${S||""}`};import{createContext as ti,useContext as ni}from"solid-js";var zo=ti();function qt(){let e=ni(zo);if(!e)throw new Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useNodeConnectable");return e}var Se=e=>{let o=ai({id:null,type:"source",position:"top",isConnectableStart:!0,isConnectableEnd:!0},e),{store:t,nodeLookup:N,connectionLookup:S,actions:P}=z(),[x,b]=li(o,["id","type","position","isConnectable","isConnectableStart","isConnectableEnd","isValidConnection","onConnect","onDisconnect","children","class","style"]),C=Oe(),T=qt(),v=()=>x.isConnectable??T(),E=()=>x.type==="target",w=()=>x.id??null,I=()=>!!t.connection.fromHandle,D=()=>t.connection.fromHandle&&t.connection.fromHandle.nodeId===C()&&t.connection.fromHandle.type===x.type&&t.connection.fromHandle.id===w(),k=()=>t.connection.toHandle&&t.connection.toHandle.nodeId===C()&&t.connection.toHandle.type===x.type&&t.connection.toHandle.id===w(),R=()=>t.connectionMode==="strict"?t.connection.fromHandle?.type!==x.type:C()!==t.connection.fromHandle?.nodeId||w()!==t.connection.fromHandle?.id,Y=()=>!!(k()&&t.connection.isValid),H=null,_;di(()=>{if(!x.onConnect&&!x.onDisconnect)return;let U=`${C()}-${x.type}${x.id?`-${x.id}`:""}`;if(_=S.get(U),H&&!ri(_,H)){let G=_??new Map;Qt(H,G,e.onDisconnect),Qt(G,H,e.onConnect)}H=_??new Map});let $=U=>{let G={...U,id:jt(U)},O=t.onBeforeConnect?.(G)??G;P.addEdge(O),t.onConnect?.(G)},ee=U=>{en.onPointerDown(U,{handleId:w(),nodeId:C(),isTarget:E(),connectionRadius:t.connectionRadius,domNode:t.domNode,nodeLookup:N,connectionMode:t.connectionMode,lib:t.lib,autoPanOnConnect:t.autoPanOnConnect,flowId:t.id,isValidConnection:x.isValidConnection??t.isValidConnection,updateConnection:P.setConnection,cancelConnection:P.cancelConnection,panBy:P.panBy,onConnect:$,onConnectStart:(G,O)=>{t.onConnectStart?.(G,{nodeId:O.nodeId,handleId:O.handleId,handleType:O.handleType})},onConnectEnd:t.onConnectEnd,getTransform:()=>t.transform,getFromHandle:()=>t.connection.fromHandle,autoPanSpeed:t.autoPanSpeed,dragThreshold:t.connectionDragThreshold,handleDomNode:U.currentTarget})},ie=U=>{if(!C()||!t.clickConnectStartHandle&&!x.isConnectableStart)return;if(!t.clickConnectStartHandle){t.onClickConnectStart?.(U,{nodeId:C(),handleId:w(),handleType:x.type}),P.setClickConnectStartHandle({nodeId:C(),type:x.type,id:w()});return}let G=ii(U.target),O=x.isValidConnection??t.isValidConnection,{connection:F,isValid:K}=en.isValid(U,{handle:{nodeId:C(),id:w(),type:x.type},connectionMode:t.connectionMode,fromNodeId:t.clickConnectStartHandle.nodeId,fromHandleId:t.clickConnectStartHandle.id??null,fromType:t.clickConnectStartHandle.type,isValidConnection:O,flowId:t.id,doc:G,lib:t.lib,nodeLookup:N});K&&F&&$(F);let Z=structuredClone(ci(t.connection));delete Z.inProgress,Z.toPosition=Z.toHandle?Z.toHandle.position:null,t.onClickConnectEnd?.(U,Z),P.setClickConnectStartHandle(void 0)},de=()=>v()&&(!I()||R())&&(I()||t.clickConnectStartHandle?x.isConnectableEnd:x.isConnectableStart);return<div role="button"aria-label={t.ariaLabelConfig["handle.ariaLabel"]}tabIndex={-1}data-handleid={w()}data-nodeid={C()}data-handlepos={x.position}data-id={`${t.id}-${C()}-${x.id||null}-${x.type}`}onClick={t.clickConnect?ie:void 0}onPointerDown={ee}style={x.style}class={si("solid-flow__handle",`solid-flow__handle-${x.position}`,t.noDragClass,t.noPanClass,x.class,{valid:Y(),connectingto:k(),connectingfrom:D(),source:!E(),target:E(),connectablestart:o.isConnectableStart,connectableend:o.isConnectableEnd,connectable:v(),connectionindicator:de()})}{...b}>
-      {x.children}
-    </div>};var Ro=e=>{let o=pi({targetPosition:"top",sourcePosition:"bottom"},e);return<>
-      <Se type="target"position={o.targetPosition}isConnectable={o.isConnectable}/>
-      {e.data.label}
-      <Se type="source"position={o.sourcePosition}isConnectable={o.isConnectable}/>
-    </>};var Ao=e=><div style={{position:"absolute",left:0,top:0,width:J(e.width),height:J(e.height)}}/>;import{mergeProps as gi}from"solid-js";var _o=e=>{let o=gi({sourcePosition:"bottom"},e);return<>
-      {e.data?.label}
-      <Se type="source"position={o.sourcePosition}isConnectable={o.isConnectable}/>
-    </>};import{elementSelectionKeys as bi,getNodesInside as Ei,isInputDOMNode as xi,nodeHasDimensions as on}from"@xyflow/system";import wi from"clsx";import{batch as Ci,createEffect as Lo,createSignal as Ti,Show as Mi}from"solid-js";import{Dynamic as Ii}from"solid-js/web";import{XYDrag as mi}from"@xyflow/system";import{createEffect as ui,createSignal as yi,onCleanup as fi,onMount as hi}from"solid-js";var Si=(e,o)=>{let{store:t,nodeLookup:N,actions:S}=z(),[P,x]=yi(!1);return hi(()=>{let{onDrag:b,onDragStart:C,onDragStop:T,onNodeMouseDown:v}=o(),E=mi({onDrag:b,onDragStart:(I,D,k,R)=>{x(!0),C?.(I,D,k,R)},onDragStop:(I,D,k,R)=>{x(!1),T?.(I,D,k,R)},onNodeMouseDown:v,getStoreItems:()=>({nodes:t.nodes,nodeLookup:N,edges:t.edges,nodeExtent:t.nodeExtent,snapGrid:t.snapGrid??[0,0],snapToGrid:!!t.snapGrid,autoPanSpeed:t.autoPanSpeed,nodeOrigin:t.nodeOrigin,multiSelectionActive:t.multiselectionKeyPressed,domNode:t.domNode,transform:t.transform,autoPanOnNodeDrag:t.autoPanOnNodeDrag,nodesDraggable:t.nodesDraggable,selectNodesOnDrag:t.selectNodesOnDrag,nodeDragThreshold:t.nodeDragThreshold,unselectNodesAndEdges:S.unselectNodesAndEdges,updateNodePositions:S.updateNodePositions,panBy:S.panBy})});function w(I,D){if(D.disabled){E.destroy();return}E.update({domNode:I,nodeId:D.nodeId,noDragClassName:D.noDragClass,handleSelector:D.handleSelector,isSelectable:D.isSelectable,nodeClickDistance:D.nodeClickDistance})}ui(()=>{w(e(),o())}),fi(()=>{E.destroy()})}),P},Ze=Si;import{createContext as Ni,useContext as Pi}from"solid-js";var Ne=Ni();function Oe(){let e=Pi(Ne);if(!e)throw new Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useNodeId");return e}var Ho=e=>{let{store:o,nodeLookup:t,parentLookup:N,actions:S}=z(),[P,x]=Ti(),b=()=>t.get(e.nodeId),C=()=>b().id,T=()=>b().type??"default",v=()=>b().deletable??!0,E=()=>b().selectable??o.elementsSelectable,w=()=>b().focusable??o.nodesFocusable,I=()=>b().draggable??o.nodesDraggable,D=()=>b().connectable??o.nodesConnectable,k=()=>b().internals.userNode,R=()=>T()in o.nodeTypes,Y=()=>o.nodeTypes[T()],H=()=>N.has(b().id),_=()=>{let{x:O,y:F}=b().internals.positionAbsolute;return`translate(${O}px, ${F}px)`},$=()=>{let O=b().width??b().initialWidth,F=b().height??b().initialHeight;return{...b().style,...O?{width:J(O)}:{},...F?{height:J(F)}:{}}},ee=()=>({"z-index":b().internals.z,transform:_(),visibility:on(b())?"visible":"hidden",...$(),...b().style??{}});Lo(()=>{R()}),Lo(O=>O&&O.sourcePosition===b().sourcePosition&&O.targetPosition===b().targetPosition&&O.nodeType===T()?O:(S.requestUpdateNodeInternals([[b().id,{id:b().id,nodeElement:P(),force:!0}]]),{nodeType:T(),sourcePosition:b().sourcePosition,targetPosition:b().targetPosition})),Lo(O=>{let F=P();return F===O&&on(b())?O:(O&&e.resizeObserver.unobserve(O),F&&e.resizeObserver.observe(F),F)});let ie=O=>{E()&&(!o.selectNodesOnDrag||!I()||o.nodeDragThreshold>0)&&S.handleNodeSelection(b().id),e.onNodeClick?.({node:k(),event:O})},de=O=>{if(xi(O)||o.disableKeyboardA11y)return;if(bi.includes(O.key)&&E()){S.handleNodeSelection(b().id,O.key==="Escape",P());return}let F=Xe[O.key];I()&&b().selected&&F&&Ci(()=>{O.preventDefault(),S.setAriaLiveMessage(o.ariaLabelConfig["node.a11yDescription.ariaLiveMessage"]({direction:O.key.replace("Arrow","").toLowerCase(),x:~~b().internals.positionAbsolute.x,y:~~b().internals.positionAbsolute.y})),S.moveSelectedNodes(F,O.shiftKey?4:1)})},U=()=>{if(o.disableKeyboardA11y||!o.autoPanOnNodeFocus||!P()?.matches(":focus-visible"))return;let{width:O,height:F,viewport:K}=o;Ei(new Map([[b().id,b()]]),{x:0,y:0,width:O,height:F},[K.x,K.y,K.zoom],!0).length>0||S.setCenter(b().position.x+(b().measured.width??0)/2,b().position.y+(b().measured.height??0)/2,{zoom:K.zoom})},G=Ze(P,()=>({nodeId:b().id,isSelectable:E(),disabled:!I(),handleSelector:b().dragHandle,noDragClass:o.noDragClass,nodeClickDistance:e.nodeClickDistance,onNodeMouseDown:S.handleNodeSelection,onDrag:(O,F,K,Z)=>{e.onNodeDrag?.({event:O,targetNode:K,nodes:Z})},onDragStart:(O,F,K,Z)=>{e.onNodeDragStart?.({event:O,targetNode:K,nodes:Z})},onDragStop:(O,F,K,Z)=>{e.onNodeDragStop?.({event:O,targetNode:K,nodes:Z})}}));return<Mi when={!b().hidden}>
-      <div ref={x}data-id={b().id}class={wi("solid-flow__node",`solid-flow__node-${T()}`,{connectable:D(),draggable:I(),dragging:G(),nopan:I(),parent:H(),selectable:E(),selected:b().selected},b().class)}style={ee()}onClick={ie}onPointerEnter={O=>e.onNodePointerEnter?.({node:k(),event:O})}onPointerLeave={O=>e.onNodePointerLeave?.({node:k(),event:O})}onPointerMove={O=>e.onNodePointerMove?.({node:k(),event:O})}onContextMenu={O=>e.onNodeContextMenu?.({node:k(),event:O})}onKeyDown={O=>w()&&de(O)}onFocus={()=>w()&&U()}tabIndex={w()?0:void 0}role={b().ariaRole??(w()?"group":void 0)}aria-roledescription="node"aria-describedby={o.disableKeyboardA11y?void 0:`${Ye}-${o.id}`}{...b().domAttributes}>
-        <Ne.Provider value={C}>
-          <zo.Provider value={D}>
-            <Ii component={Y()}data={b().data}id={b().id}selected={!!b().selected}selectable={E()}deletable={v()}sourcePosition={b().sourcePosition}targetPosition={b().targetPosition}zIndex={b().internals.z}dragging={G()}draggable={I()}dragHandle={b().dragHandle}parentId={b().parentId}type={T()}isConnectable={D()}positionAbsoluteX={b().internals.positionAbsolute.x}positionAbsoluteY={b().internals.positionAbsolute.y}width={b().width}height={b().height}/>
-          </zo.Provider>
-        </Ne.Provider>
+      </Show5>
+    </EdgeIdContext.Provider>;
+};
+
+// src/components/graph/edge/SmoothStepEdge.tsx
+import { getSmoothStepPath } from "@xyflow/system";
+import { createMemo as createMemo2 } from "solid-js";
+var SmoothStepEdge = (props) => {
+  const pathData = createMemo2(() => {
+    const [path, labelX, labelY] = getSmoothStepPath({
+      sourceX: props.sourceX,
+      sourceY: props.sourceY,
+      targetX: props.targetX,
+      targetY: props.targetY,
+      sourcePosition: props.sourcePosition,
+      targetPosition: props.targetPosition,
+      borderRadius: props.pathOptions?.borderRadius,
+      offset: props.pathOptions?.offset
+    });
+    return { path, labelX, labelY };
+  });
+  return <BaseEdge
+    id={props.id}
+    path={pathData().path}
+    labelX={pathData().labelX}
+    labelY={pathData().labelY}
+    label={props.label}
+    labelStyle={props.labelStyle}
+    markerStart={props.markerStart}
+    markerEnd={props.markerEnd}
+    interactionWidth={props.interactionWidth}
+    style={props.style}
+  />;
+};
+
+// src/components/graph/edge/SmoothStepEdgeInternal.tsx
+import { getSmoothStepPath as getSmoothStepPath2 } from "@xyflow/system";
+var SmoothStepEdgeInternal = (props) => {
+  const pathData = () => {
+    const [path, labelX, labelY] = getSmoothStepPath2({
+      sourceX: props.sourceX,
+      sourceY: props.sourceY,
+      targetX: props.targetX,
+      targetY: props.targetY,
+      sourcePosition: props.sourcePosition,
+      targetPosition: props.targetPosition
+    });
+    return { path, labelX, labelY };
+  };
+  return <BaseEdge
+    path={pathData().path}
+    labelX={pathData().labelX}
+    labelY={pathData().labelY}
+    label={props.label}
+    labelStyle={props.labelStyle}
+    markerStart={props.markerStart}
+    markerEnd={props.markerEnd}
+    interactionWidth={props.interactionWidth}
+    style={props.style}
+  />;
+};
+
+// src/components/graph/edge/StepEdge.tsx
+import { getSmoothStepPath as getSmoothStepPath3 } from "@xyflow/system";
+import { createMemo as createMemo3 } from "solid-js";
+var StepEdge = (props) => {
+  const pathData = createMemo3(() => {
+    const [path, labelX, labelY] = getSmoothStepPath3({
+      sourceX: props.sourceX,
+      sourceY: props.sourceY,
+      targetX: props.targetX,
+      targetY: props.targetY,
+      sourcePosition: props.sourcePosition,
+      targetPosition: props.targetPosition,
+      borderRadius: 0,
+      offset: props.pathOptions?.offset
+    });
+    return { path, labelX, labelY };
+  });
+  return <BaseEdge
+    id={props.id}
+    path={pathData().path}
+    labelX={pathData().labelX}
+    labelY={pathData().labelY}
+    label={props.label}
+    labelStyle={props.labelStyle}
+    markerStart={props.markerStart}
+    markerEnd={props.markerEnd}
+    interactionWidth={props.interactionWidth}
+    style={props.style}
+  />;
+};
+
+// src/components/graph/edge/StepEdgeInternal.tsx
+import { getSmoothStepPath as getSmoothStepPath4 } from "@xyflow/system";
+var StepEdgeInternal = (props) => {
+  const pathData = () => {
+    const [path, labelX, labelY] = getSmoothStepPath4({
+      sourceX: props.sourceX,
+      sourceY: props.sourceY,
+      targetX: props.targetX,
+      targetY: props.targetY,
+      sourcePosition: props.sourcePosition,
+      targetPosition: props.targetPosition,
+      borderRadius: 0
+    });
+    return { path, labelX, labelY };
+  };
+  return <BaseEdge
+    path={pathData().path}
+    labelX={pathData().labelX}
+    labelY={pathData().labelY}
+    label={props.label}
+    labelStyle={props.labelStyle}
+    markerStart={props.markerStart}
+    markerEnd={props.markerEnd}
+    interactionWidth={props.interactionWidth}
+    style={props.style}
+  />;
+};
+
+// src/components/graph/edge/StraightEdge.tsx
+import { getStraightPath } from "@xyflow/system";
+import { createMemo as createMemo4 } from "solid-js";
+var StraightEdge = (props) => {
+  const pathData = createMemo4(() => {
+    const [path, labelX, labelY] = getStraightPath({
+      sourceX: props.sourceX,
+      sourceY: props.sourceY,
+      targetX: props.targetX,
+      targetY: props.targetY
+    });
+    return { path, labelX, labelY };
+  });
+  return <BaseEdge
+    id={props.id}
+    path={pathData().path}
+    labelX={pathData().labelX}
+    labelY={pathData().labelY}
+    label={props.label}
+    labelStyle={props.labelStyle}
+    markerStart={props.markerStart}
+    markerEnd={props.markerEnd}
+    interactionWidth={props.interactionWidth}
+    style={props.style}
+  />;
+};
+
+// src/components/graph/edge/StraightEdgeInternal.tsx
+import { getStraightPath as getStraightPath2 } from "@xyflow/system";
+var StraightEdgeInternal = (props) => {
+  const pathData = () => {
+    const [path, labelX, labelY] = getStraightPath2({
+      sourceX: props.sourceX,
+      sourceY: props.sourceY,
+      targetX: props.targetX,
+      targetY: props.targetY
+    });
+    return { path, labelX, labelY };
+  };
+  return <BaseEdge
+    path={pathData().path}
+    labelX={pathData().labelX}
+    labelY={pathData().labelY}
+    label={props.label}
+    labelStyle={props.labelStyle}
+    markerStart={props.markerStart}
+    markerEnd={props.markerEnd}
+    interactionWidth={props.interactionWidth}
+    style={props.style}
+  />;
+};
+
+// src/components/graph/node/DefaultNode.tsx
+import { mergeProps as mergeProps5 } from "solid-js";
+
+// src/components/graph/handle/Handle.tsx
+import {
+  areConnectionMapsEqual,
+  getHostForElement,
+  handleConnectionChange,
+  XYHandle as XYHandle2
+} from "@xyflow/system";
+import clsx5 from "clsx";
+import { createEffect, mergeProps as mergeProps4, splitProps as splitProps4 } from "solid-js";
+import { unwrap } from "solid-js/store";
+
+// src/data/utils.ts
+import {
+  getNodesInside
+} from "@xyflow/system";
+var getEdgeId = (connection) => {
+  const { source, sourceHandle, target, targetHandle } = connection;
+  return `xy-edge__${source}${sourceHandle || ""}-${target}${targetHandle || ""}`;
+};
+
+// src/components/contexts/nodeConnectable.tsx
+import { createContext as createContext2, useContext as useContext2 } from "solid-js";
+var NodeConnectableContext = createContext2();
+function useNodeConnectable() {
+  const ctx = useContext2(NodeConnectableContext);
+  if (!ctx) {
+    throw new Error(
+      "solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useNodeConnectable"
+    );
+  }
+  return ctx;
+}
+
+// src/components/graph/handle/Handle.tsx
+var Handle = (props) => {
+  const _props = mergeProps4(
+    {
+      id: null,
+      type: "source",
+      position: "top",
+      isConnectableStart: true,
+      isConnectableEnd: true
+    },
+    props
+  );
+  const { store, nodeLookup, connectionLookup, actions } = useInternalSolidFlow();
+  const [local, rest] = splitProps4(_props, [
+    "id",
+    "type",
+    "position",
+    "isConnectable",
+    "isConnectableStart",
+    "isConnectableEnd",
+    "isValidConnection",
+    "onConnect",
+    "onDisconnect",
+    "children",
+    "class",
+    "style"
+  ]);
+  const nodeId = useNodeId();
+  const nodeConnectable = useNodeConnectable();
+  const connectable = () => local.isConnectable ?? nodeConnectable();
+  const isTarget = () => local.type === "target";
+  const handleId = () => local.id ?? null;
+  const connectionInProcess = () => Boolean(store.connection.fromHandle);
+  const connectingFrom = () => store.connection.fromHandle && store.connection.fromHandle.nodeId === nodeId() && store.connection.fromHandle.type === local.type && store.connection.fromHandle.id === handleId();
+  const connectingTo = () => store.connection.toHandle && store.connection.toHandle.nodeId === nodeId() && store.connection.toHandle.type === local.type && store.connection.toHandle.id === handleId();
+  const isPossibleTargetHandle = () => store.connectionMode === "strict" ? store.connection.fromHandle?.type !== local.type : nodeId() !== store.connection.fromHandle?.nodeId || handleId() !== store.connection.fromHandle?.id;
+  const valid = () => Boolean(connectingTo() && store.connection.isValid);
+  let prevConnections = null;
+  let connections;
+  createEffect(() => {
+    if (!local.onConnect && !local.onDisconnect) return;
+    const conectionKey = `${nodeId()}-${local.type}${local.id ? `-${local.id}` : ""}`;
+    connections = connectionLookup.get(conectionKey);
+    if (prevConnections && !areConnectionMapsEqual(connections, prevConnections)) {
+      const _connections = connections ?? /* @__PURE__ */ new Map();
+      handleConnectionChange(prevConnections, _connections, props.onDisconnect);
+      handleConnectionChange(_connections, prevConnections, props.onConnect);
+    }
+    prevConnections = connections ?? /* @__PURE__ */ new Map();
+  });
+  const onConnectExtended = (connection) => {
+    const handleConnection = {
+      ...connection,
+      id: getEdgeId(connection)
+    };
+    const edge = store.onBeforeConnect?.(handleConnection) ?? handleConnection;
+    actions.addEdge(edge);
+    store.onConnect?.(handleConnection);
+  };
+  const onPointerDown = (event) => {
+    XYHandle2.onPointerDown(event, {
+      handleId: handleId(),
+      nodeId: nodeId(),
+      isTarget: isTarget(),
+      connectionRadius: store.connectionRadius,
+      domNode: store.domNode,
+      nodeLookup,
+      connectionMode: store.connectionMode,
+      lib: store.lib,
+      autoPanOnConnect: store.autoPanOnConnect,
+      flowId: store.id,
+      isValidConnection: local.isValidConnection ?? store.isValidConnection,
+      updateConnection: actions.setConnection,
+      cancelConnection: actions.cancelConnection,
+      panBy: actions.panBy,
+      onConnect: onConnectExtended,
+      onConnectStart: (event2, startParams) => {
+        store.onConnectStart?.(event2, {
+          nodeId: startParams.nodeId,
+          handleId: startParams.handleId,
+          handleType: startParams.handleType
+        });
+      },
+      onConnectEnd: store.onConnectEnd,
+      getTransform: () => store.transform,
+      getFromHandle: () => store.connection.fromHandle,
+      autoPanSpeed: store.autoPanSpeed,
+      dragThreshold: store.connectionDragThreshold,
+      handleDomNode: event.currentTarget
+    });
+  };
+  const onClick = (event) => {
+    if (!nodeId() || !store.clickConnectStartHandle && !local.isConnectableStart) {
+      return;
+    }
+    if (!store.clickConnectStartHandle) {
+      store.onClickConnectStart?.(event, {
+        nodeId: nodeId(),
+        handleId: handleId(),
+        handleType: local.type
+      });
+      actions.setClickConnectStartHandle({ nodeId: nodeId(), type: local.type, id: handleId() });
+      return;
+    }
+    const doc = getHostForElement(event.target);
+    const isValidConnectionHandler = local.isValidConnection ?? store.isValidConnection;
+    const { connection, isValid } = XYHandle2.isValid(event, {
+      handle: {
+        nodeId: nodeId(),
+        id: handleId(),
+        type: local.type
+      },
+      connectionMode: store.connectionMode,
+      fromNodeId: store.clickConnectStartHandle.nodeId,
+      fromHandleId: store.clickConnectStartHandle.id ?? null,
+      fromType: store.clickConnectStartHandle.type,
+      isValidConnection: isValidConnectionHandler,
+      flowId: store.id,
+      doc,
+      lib: store.lib,
+      nodeLookup
+    });
+    if (isValid && connection) {
+      onConnectExtended(connection);
+    }
+    const connectionClone = structuredClone(unwrap(store.connection));
+    delete connectionClone.inProgress;
+    connectionClone.toPosition = connectionClone.toHandle ? connectionClone.toHandle.position : null;
+    store.onClickConnectEnd?.(event, connectionClone);
+    actions.setClickConnectStartHandle(void 0);
+  };
+  const connectionIndicator = () => connectable() && (!connectionInProcess() || isPossibleTargetHandle()) && (connectionInProcess() || store.clickConnectStartHandle ? local.isConnectableEnd : local.isConnectableStart);
+  return <div
+    role="button"
+    aria-label={store.ariaLabelConfig[`handle.ariaLabel`]}
+    tabIndex={-1}
+    data-handleid={handleId()}
+    data-nodeid={nodeId()}
+    data-handlepos={local.position}
+    data-id={`${store.id}-${nodeId()}-${local.id || null}-${local.type}`}
+    onClick={store.clickConnect ? onClick : void 0}
+    onPointerDown={onPointerDown}
+    style={local.style}
+    class={clsx5(
+      "solid-flow__handle",
+      `solid-flow__handle-${local.position}`,
+      store.noDragClass,
+      store.noPanClass,
+      local.class,
+      {
+        valid: valid(),
+        connectingto: connectingTo(),
+        connectingfrom: connectingFrom(),
+        source: !isTarget(),
+        target: isTarget(),
+        connectablestart: _props.isConnectableStart,
+        connectableend: _props.isConnectableEnd,
+        connectable: connectable(),
+        connectionindicator: connectionIndicator()
+      }
+    )}
+    {...rest}
+  >
+      {local.children}
+    </div>;
+};
+
+// src/components/graph/node/DefaultNode.tsx
+var DefaultNode = (props) => {
+  const _props = mergeProps5(
+    {
+      targetPosition: "top",
+      sourcePosition: "bottom"
+    },
+    props
+  );
+  return <>
+      <Handle type="target" position={_props.targetPosition} isConnectable={_props.isConnectable} />
+      {props.data.label}
+      <Handle type="source" position={_props.sourcePosition} isConnectable={_props.isConnectable} />
+    </>;
+};
+
+// src/components/graph/node/GroupNode.tsx
+var GroupNode = (props) => <div
+  style={{
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: toPxString(props.width),
+    height: toPxString(props.height)
+  }}
+/>;
+
+// src/components/graph/node/InputNode.tsx
+import { mergeProps as mergeProps6 } from "solid-js";
+var InputNode = (props) => {
+  const _props = mergeProps6(
+    {
+      sourcePosition: "bottom"
+    },
+    props
+  );
+  return <>
+      {props.data?.label}
+      <Handle type="source" position={_props.sourcePosition} isConnectable={_props.isConnectable} />
+    </>;
+};
+
+// src/components/graph/node/NodeWrapper.tsx
+import {
+  elementSelectionKeys as elementSelectionKeys2,
+  getNodesInside as getNodesInside2,
+  isInputDOMNode,
+  nodeHasDimensions
+} from "@xyflow/system";
+import clsx6 from "clsx";
+import { batch, createEffect as createEffect3, createSignal as createSignal4, Show as Show6 } from "solid-js";
+import { Dynamic as Dynamic2 } from "solid-js/web";
+
+// src/actions/createDraggable.tsx
+import { XYDrag } from "@xyflow/system";
+import { createEffect as createEffect2, createSignal as createSignal3, onCleanup, onMount } from "solid-js";
+var createDraggable = (elem, params) => {
+  const { store, nodeLookup, actions } = useInternalSolidFlow();
+  const [dragging, setDragging] = createSignal3(false);
+  onMount(() => {
+    const { onDrag, onDragStart, onDragStop, onNodeMouseDown } = params();
+    const dragInstance = XYDrag({
+      onDrag,
+      onDragStart: (event, dragItems, node, nodes) => {
+        setDragging(true);
+        onDragStart?.(event, dragItems, node, nodes);
+      },
+      onDragStop: (event, dragItems, node, nodes) => {
+        setDragging(false);
+        onDragStop?.(event, dragItems, node, nodes);
+      },
+      onNodeMouseDown,
+      getStoreItems: () => {
+        return {
+          nodes: store.nodes,
+          nodeLookup,
+          edges: store.edges,
+          nodeExtent: store.nodeExtent,
+          snapGrid: store.snapGrid ?? [0, 0],
+          snapToGrid: !!store.snapGrid,
+          autoPanSpeed: store.autoPanSpeed,
+          nodeOrigin: store.nodeOrigin,
+          multiSelectionActive: store.multiselectionKeyPressed,
+          domNode: store.domNode,
+          transform: store.transform,
+          autoPanOnNodeDrag: store.autoPanOnNodeDrag,
+          nodesDraggable: store.nodesDraggable,
+          selectNodesOnDrag: store.selectNodesOnDrag,
+          nodeDragThreshold: store.nodeDragThreshold,
+          unselectNodesAndEdges: actions.unselectNodesAndEdges,
+          updateNodePositions: actions.updateNodePositions,
+          panBy: actions.panBy
+        };
+      }
+    });
+    function updateDrag(elem2, params2) {
+      if (params2.disabled) {
+        dragInstance.destroy();
+        return;
+      }
+      dragInstance.update({
+        domNode: elem2,
+        nodeId: params2.nodeId,
+        noDragClassName: params2.noDragClass,
+        handleSelector: params2.handleSelector,
+        isSelectable: params2.isSelectable,
+        nodeClickDistance: params2.nodeClickDistance
+      });
+    }
+    createEffect2(() => {
+      updateDrag(elem(), params());
+    });
+    onCleanup(() => {
+      dragInstance.destroy();
+    });
+  });
+  return dragging;
+};
+var createDraggable_default = createDraggable;
+
+// src/components/contexts/nodeId.tsx
+import { createContext as createContext3, useContext as useContext3 } from "solid-js";
+var NodeIdContext = createContext3();
+function useNodeId() {
+  const ctx = useContext3(NodeIdContext);
+  if (!ctx) {
+    throw new Error(
+      "solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useNodeId"
+    );
+  }
+  return ctx;
+}
+
+// src/components/graph/node/NodeWrapper.tsx
+var NodeWrapper = (props) => {
+  const { store, nodeLookup, parentLookup, actions } = useInternalSolidFlow();
+  const [nodeRef, setNodeRef] = createSignal4();
+  const node = () => nodeLookup.get(props.nodeId);
+  const nodeId = () => node().id;
+  const nodeType = () => node().type ?? "default";
+  const deletable = () => node().deletable ?? true;
+  const selectable = () => node().selectable ?? store.elementsSelectable;
+  const focusable = () => node().focusable ?? store.nodesFocusable;
+  const draggable = () => node().draggable ?? store.nodesDraggable;
+  const connectable = () => node().connectable ?? store.nodesConnectable;
+  const userNode = () => node().internals.userNode;
+  const nodeTypeValid = () => nodeType() in store.nodeTypes;
+  const nodeComponent = () => store.nodeTypes[nodeType()];
+  const isParentNode = () => parentLookup.has(node().id);
+  const transform = () => {
+    const { x, y } = node().internals.positionAbsolute;
+    return `translate(${x}px, ${y}px)`;
+  };
+  const sizeStyle = () => {
+    const w = node().width ?? node().initialWidth;
+    const h = node().height ?? node().initialHeight;
+    return {
+      ...node().style,
+      ...w ? { width: toPxString(w) } : {},
+      ...h ? { height: toPxString(h) } : {}
+    };
+  };
+  const style = () => ({
+    "z-index": node().internals.z,
+    transform: transform(),
+    visibility: nodeHasDimensions(node()) ? "visible" : "hidden",
+    ...sizeStyle(),
+    ...node().style ?? {}
+  });
+  createEffect3(() => {
+    if (!nodeTypeValid()) {
+    }
+  });
+  createEffect3((prev) => {
+    if (prev && prev.sourcePosition === node().sourcePosition && prev.targetPosition === node().targetPosition && prev.nodeType === nodeType()) {
+      return prev;
+    }
+    actions.requestUpdateNodeInternals([
+      [
+        node().id,
+        {
+          id: node().id,
+          nodeElement: nodeRef(),
+          force: true
+        }
+      ]
+    ]);
+    return {
+      nodeType: nodeType(),
+      sourcePosition: node().sourcePosition,
+      targetPosition: node().targetPosition
+    };
+  });
+  createEffect3((prevNodeRef) => {
+    const currentNodeRef = nodeRef();
+    if (currentNodeRef === prevNodeRef && nodeHasDimensions(node())) {
+      return prevNodeRef;
+    }
+    if (prevNodeRef) {
+      props.resizeObserver.unobserve(prevNodeRef);
+    }
+    if (currentNodeRef) {
+      props.resizeObserver.observe(currentNodeRef);
+    }
+    return currentNodeRef;
+  });
+  const onSelectNodeHandler = (event) => {
+    if (selectable() && (!store.selectNodesOnDrag || !draggable() || store.nodeDragThreshold > 0)) {
+      actions.handleNodeSelection(node().id);
+    }
+    props.onNodeClick?.({ node: userNode(), event });
+  };
+  const onKeyDown = (event) => {
+    if (isInputDOMNode(event) || store.disableKeyboardA11y) {
+      return;
+    }
+    if (elementSelectionKeys2.includes(event.key) && selectable()) {
+      actions.handleNodeSelection(node().id, event.key === "Escape", nodeRef());
+      return;
+    }
+    const arrowKeyDiff = ARROW_KEY_DIFFS[event.key];
+    if (draggable() && node().selected && arrowKeyDiff) {
+      batch(() => {
+        event.preventDefault();
+        actions.setAriaLiveMessage(
+          store.ariaLabelConfig["node.a11yDescription.ariaLiveMessage"]({
+            direction: event.key.replace("Arrow", "").toLowerCase(),
+            x: ~~node().internals.positionAbsolute.x,
+            y: ~~node().internals.positionAbsolute.y
+          })
+        );
+        actions.moveSelectedNodes(arrowKeyDiff, event.shiftKey ? 4 : 1);
+      });
+    }
+  };
+  const onFocus = () => {
+    if (store.disableKeyboardA11y || !store.autoPanOnNodeFocus || !nodeRef()?.matches(":focus-visible")) {
+      return;
+    }
+    const { width, height, viewport } = store;
+    const withinViewport = getNodesInside2(
+      /* @__PURE__ */ new Map([[node().id, node()]]),
+      { x: 0, y: 0, width, height },
+      [viewport.x, viewport.y, viewport.zoom],
+      true
+    ).length > 0;
+    if (withinViewport) return;
+    void actions.setCenter(
+      node().position.x + (node().measured.width ?? 0) / 2,
+      node().position.y + (node().measured.height ?? 0) / 2,
+      { zoom: viewport.zoom }
+    );
+  };
+  const dragging = createDraggable_default(nodeRef, () => ({
+    nodeId: node().id,
+    isSelectable: selectable(),
+    disabled: !draggable(),
+    handleSelector: node().dragHandle,
+    noDragClass: store.noDragClass,
+    nodeClickDistance: props.nodeClickDistance,
+    onNodeMouseDown: actions.handleNodeSelection,
+    onDrag: (event, _, targetNode, nodes) => {
+      props.onNodeDrag?.({ event, targetNode, nodes });
+    },
+    onDragStart: (event, _, targetNode, nodes) => {
+      props.onNodeDragStart?.({
+        event,
+        targetNode,
+        nodes
+      });
+    },
+    onDragStop: (event, _, targetNode, nodes) => {
+      props.onNodeDragStop?.({
+        event,
+        targetNode,
+        nodes
+      });
+    }
+  }));
+  return <Show6 when={!node().hidden}>
+      <div
+    ref={setNodeRef}
+    data-id={node().id}
+    class={clsx6(
+      "solid-flow__node",
+      `solid-flow__node-${nodeType()}`,
+      {
+        connectable: connectable(),
+        draggable: draggable(),
+        dragging: dragging(),
+        nopan: draggable(),
+        parent: isParentNode(),
+        selectable: selectable(),
+        selected: node().selected
+      },
+      node().class
+    )}
+    style={style()}
+    onClick={onSelectNodeHandler}
+    onPointerEnter={(event) => props.onNodePointerEnter?.({ node: userNode(), event })}
+    onPointerLeave={(event) => props.onNodePointerLeave?.({ node: userNode(), event })}
+    onPointerMove={(event) => props.onNodePointerMove?.({ node: userNode(), event })}
+    onContextMenu={(event) => props.onNodeContextMenu?.({ node: userNode(), event })}
+    onKeyDown={(e) => focusable() && onKeyDown(e)}
+    onFocus={() => focusable() && onFocus()}
+    tabIndex={focusable() ? 0 : void 0}
+    role={node().ariaRole ?? (focusable() ? "group" : void 0)}
+    aria-roledescription="node"
+    aria-describedby={store.disableKeyboardA11y ? void 0 : `${ARIA_NODE_DESC_KEY}-${store.id}`}
+    {...node().domAttributes}
+  >
+        <NodeIdContext.Provider value={nodeId}>
+          <NodeConnectableContext.Provider value={connectable}>
+            <Dynamic2
+    component={nodeComponent()}
+    data={node().data}
+    id={node().id}
+    selected={Boolean(node().selected)}
+    selectable={selectable()}
+    deletable={deletable()}
+    sourcePosition={node().sourcePosition}
+    targetPosition={node().targetPosition}
+    zIndex={node().internals.z}
+    dragging={dragging()}
+    draggable={draggable()}
+    dragHandle={node().dragHandle}
+    parentId={node().parentId}
+    type={nodeType()}
+    isConnectable={connectable()}
+    positionAbsoluteX={node().internals.positionAbsolute.x}
+    positionAbsoluteY={node().internals.positionAbsolute.y}
+    width={node().width}
+    height={node().height}
+  />
+          </NodeConnectableContext.Provider>
+        </NodeIdContext.Provider>
       </div>
-    </Mi>};import{mergeProps as ki}from"solid-js";var Bo=e=>{let o=ki({targetPosition:"top"},e);return<>
-      <Se type="target"position={o.targetPosition}isConnectable={o.isConnectable}/>
-      {e.data?.label}
-    </>};import{devWarn as Di,infiniteExtent as Oi}from"@xyflow/system";var we=()=>({id:"1",nodes:[],edges:[],nodeOrigin:[0,0],nodeExtent:Oi,defaultEdgeOptions:{},colorMode:"system",colorModeSSR:"light",connectionMode:"strict",connectionLineType:"default",connectionRadius:20,nodeDragThreshold:1,minZoom:.5,maxZoom:2,selectionMode:"partial",fitView:!1,noPanClass:"nopan",noDragClass:"nodrag",noWheelClass:"nowheel",autoPanOnNodeDrag:!0,autoPanOnConnect:!0,autoPanOnNodeFocus:!0,autoPanSpeed:15,elevateEdgesOnSelect:!0,nodesDraggable:!0,nodesConnectable:!0,nodesFocusable:!0,edgesFocusable:!0,elementsSelectable:!0,selectNodesOnDrag:!0,elevateNodesOnSelect:!0,onlyRenderVisibleElements:!1,disableKeyboardA11y:!1,defaultMarkerColor:"#b1b1b7",ariaLiveMessage:"",style:{},isValidConnection:()=>!0,onFlowError:Di});import{clampPosition as Vo,clampPositionToParent as zi,getBoundsOfRects as rg,getDimensions as ig,getHandleBounds as sg,getNodeDimensions as tn,getNodePositionWithOrigin as nn,infiniteExtent as Ri,isCoordinateExtent as rn,isNumeric as Ai,nodeToRect as dg}from"@xyflow/system";var sn={nodeOrigin:[0,0],nodeExtent:Ri,elevateNodesOnSelect:!0,defaults:{}},_i={...sn,checkEquality:!0};function dn(e,o){let t={...e};for(let N in o)o[N]!==void 0&&(t[N]=o[N]);return t}function an(e,o,t,N){let S=dn(_i,N),P=e.length>0,x=new Map(o),b=S?.elevateNodesOnSelect?1e3:0;o.clear(),t.clear();for(let C of e){let T=x.get(C.id);if(S.checkEquality&&C===T?.internals.userNode)o.set(C.id,T);else{let v=nn(C,S.nodeOrigin),E=rn(C.extent)?C.extent:S.nodeExtent,w=Vo(v,E,tn(C));T={...S.defaults,...C,measured:{width:C.measured?.width,height:C.measured?.height},internals:{positionAbsolute:w,handleBounds:C.measured?T?.internals.handleBounds:void 0,z:$e(C,b),userNode:C}},o.set(C.id,T)}(T.measured===void 0||T.measured.width===void 0||T.measured.height===void 0)&&!T.hidden&&(P=!1),C.parentId&&Ko(T,o,t,N)}return P}function Li(e,o){if(!e.parentId)return;let t=o.get(e.parentId);t?t.set(e.id,e):o.set(e.parentId,new Map([[e.id,e]]))}function Ko(e,o,t,N){let{elevateNodesOnSelect:S,nodeOrigin:P,nodeExtent:x}=dn(sn,N),b=e.parentId,C=o.get(b);if(!C)return;Li(e,t);let T=S?1e3:0,{x:v,y:E,z:w}=Hi(e,C,P,x,T),{positionAbsolute:I}=e.internals,D=v!==I.x||E!==I.y;(D||w!==e.internals.z)&&o.set(e.id,{...e,internals:{...e.internals,positionAbsolute:D?{x:v,y:E}:I,z:w}})}function $e(e,o){return(Ai(e.zIndex)?e.zIndex:0)+(e.selected?o:0)}function Hi(e,o,t,N,S){let{x:P,y:x}=o.internals.positionAbsolute,b=tn(e),C=nn(e,t),T=rn(e.extent)?Vo(C,e.extent,b):C,v=Vo({x:P+T.x,y:x+T.y},N,b);e.extent==="parent"&&(v=zi(v,b,o));let E=$e(e,S),w=o.internals.z??0;return{x:v.x,y:v.y,z:w>=E?w+1:E}}function Xo(e,o,t,N,S,P){let x=S,b=N.get(x)||new Map;N.set(x,b.set(t,o)),x=`${S}-${e}`;let C=N.get(x)||new Map;if(N.set(x,C.set(t,o)),P){x=`${S}-${e}-${P}`;let T=N.get(x)||new Map;N.set(x,T.set(t,o))}}function Fo(e,o,t,N,S){let P=N,x=t.get(P);x&&(x.delete(o),x.size===0&&t.delete(P)),P=`${N}-${e}`;let b=t.get(P);if(b&&(b.delete(o),b.size===0&&t.delete(P)),S){P=`${N}-${e}-${S}`;let C=t.get(P);C&&(C.delete(o),C.size===0&&t.delete(P))}}var is={input:_o,output:Bo,default:Ro,group:Ao},ss={straight:Oo,smoothstep:ko,default:To,step:Do},ds=(e,o,t,N,S,P)=>{if(o&&!t&&N&&S){let x=Zi(P,{filter:b=>!!((b.width||b.initialWidth)&&(b.height||b.initialHeight))});return Ji(x,N,S,.5,2,.1)}else return t??{x:0,y:0,zoom:1}},Je=e=>{let o=pn(we(),e),t=new ze,N=new ze,S=new ze,P=new ze,x=new ze,b=Ce(()=>an(o.nodes,t,N,{nodeExtent:o.nodeExtent,nodeOrigin:o.nodeOrigin,elevateNodesOnSelect:o.elevateNodesOnSelect,checkEquality:!0})),C=ds(b,o.fitView,o.initialViewport,o.width??0,o.height??0,t),T=Bi("(prefers-color-scheme: dark)",o.colorModeSSR==="dark"),[v,E]=re(o),[w,I]=se(()=>Qi(v().ariaLabelConfig)),[D,k]=se(()=>v().ariaLiveMessage),[R,Y]=re(void 0),[H,_]=re(Yo),[$,ee]=re(null),[ie,de]=re(!1),[U,G]=se(()=>v().elementsSelectable),[O,F]=se(()=>v().height),[K,Z]=se(()=>v().minZoom),[te,Ot]=se(()=>v().maxZoom),[Le,An]=se(()=>v().nodesDraggable),[_n,Ln]=se(()=>v().nodesDraggable),[bo,Hn]=re(null),[Bn,He]=re(),[Vn,Be]=re(),[Kn,Xn]=se(()=>v().snapGrid),[Fn,Cl]=se(()=>v().translateExtent??Gi),[Yn,Wn]=se(()=>v().width),[Zn,zt]=re(!1),[$n,Rt]=re(!1),[Un,At]=re(!1),[Jn,_t]=re(!1),[Gn,Lt]=re(!1),be=Fe(()=>v().nodes),Ve=Fe(()=>v().edges),Ee=Fe(()=>v().viewport??C),jn=Ue(()=>[Ee.get().x,Ee.get().y,Ee.get().zoom]),A=pn({width:0,height:0},v,{get _colorMode(){return v().colorMode},get _colorModeSSR(){return v().colorModeSSR},get _connection(){return H()},get _nodeTypes(){return v().nodeTypes},get _edgeTypes(){return v().edgeTypes},get ariaLabelConfig(){return w()},get ariaLiveMessage(){return D()},get clickConnectStartHandle(){return R()},get colorMode(){return this._colorMode==="system"?T()?"dark":"light":this._colorMode},get connection(){let M=H();return{...M,from:M.inProgress?ln(M.from,this.transform):M.from,to:M.inProgress?ln(M.to,this.transform):M.to}},get domNode(){return $()},get dragging(){return ie()},get edgeTypes(){return{...ss,...this._edgeTypes}},get elementsSelectable(){return U()},get height(){return O()},get lib(){return"solid"},get onError(){return v().onFlowError},get maxZoom(){return te()},get minZoom(){return K()},get nodes(){return be.get()},get nodesConnectable(){return Le()},get nodesDraggable(){return _n()},get nodeTypes(){return{...is,...this._nodeTypes}},get panZoom(){return bo()},get selectedNodes(){return v().nodes.filter(M=>M.selected)},get selectedEdges(){return v().edges.filter(M=>M.selected)},get selectionRect(){return Bn()},get selectionRectMode(){return Vn()},get snapGrid(){return Kn()},get viewport(){return Ee.get()},get viewportInitialized(){return bo()!==null},get visibleEdgeIds(){return Qn()},get visibleNodeIds(){return qn()},get visibleNodesMap(){return Ht()},get transform(){return jn()},get translateExtent(){return Fn()},get width(){return Yn()},get selectionKeyPressed(){return Zn()},get multiselectionKeyPressed(){return $n()},get deleteKeyPressed(){return Un()},get panActivationKeyPressed(){return Jn()},get zoomActivationKeyPressed(){return Gn()}}),Ht=Ue(()=>t),qn=Ue(()=>Array.from(Ht().values()).map(M=>M.id)),Qn=Ue(()=>Array.from(x.values()).map(M=>M.id)),er=M=>x.get(M),Bt=async M=>A.panZoom?Fi({nodes:t,width:A.width,height:A.height,panZoom:A.panZoom,minZoom:A.minZoom,maxZoom:A.maxZoom},M??v().fitViewOptions):!1,Vt=()=>{de(!1),He(void 0),Be(void 0),zt(!1),Rt(!1),At(!1),_t(!1),Lt(!1),_({...Yo}),Y(void 0),Ee.set(v().initialViewport??{x:0,y:0,zoom:1}),k(""),Xn(void 0)},or=M=>{Ve.set(L=>Vi(M,L))},Eo=!1,tr=M=>{Eo=!M},Kt=(M,L=!1)=>{be.set(X=>M.has(X.id),ve(X=>{X.dragging=L,X.position=M.get(X.id).position}))},Ie,nr=M=>{if(Ie){Ie.push(...M);return}Ie=M,requestIdleCallback(()=>{Ce(()=>{let L=new Map(Ie);Ie=void 0;let{changes:X,updatedInternals:B}=ns(L,t,N,A.domNode,A.nodeOrigin);if(!B)return;ts(t,N,{nodeOrigin:A.nodeOrigin,nodeExtent:A.nodeExtent});let V=X.reduce((W,ne)=>{let oe=t.get(ne.id)?.internals.userNode;return oe&&W.set(oe.id,ne),W},new Map);be.set(W=>V.has(W.id),ve(W=>{let ne=V.get(W.id);switch(ne.type){case"dimensions":{ne.setAttributes&&(W.width=ne.dimensions?.width??W.width,W.height=ne.dimensions?.height??W.height),W.measured={...W.measured,...ne.dimensions};break}case"position":W.position=ne.position??W.position;break}})),Eo||(Eo=!0,Bt())})})},Xt=async(M,L)=>A.panZoom?A.panZoom.scaleBy(M,L):!1,rr=M=>Xt(1.2,M),ir=M=>Xt(1/1.2,M),sr=async(M,L,X)=>{let B=typeof X?.zoom<"u"?X.zoom:A.maxZoom,V=A.panZoom;return V?(await V.setViewport({x:A.width/2-M*B,y:A.height/2-L*B,zoom:B},{duration:X?.duration,ease:X?.ease,interpolate:X?.interpolate}),Promise.resolve(!0)):Promise.resolve(!1)},dr=M=>{A.panZoom?.setClickDistance(M)},xe=({nodes:M,edges:L}={})=>{let X=new Set((M||A.nodes).map(({id:V})=>V));X.size&&be.set(V=>X.has(V.id),ve(V=>{V.selected=!1}));let B=new Set((L||A.edges).map(({id:V})=>V));B.size&&Ve.set(V=>B.has(V.id),ve(V=>{V.selected=!1}))},Ft=M=>{let L=A.multiselectionKeyPressed,X=new Map;be.set(B=>{let V=M.includes(B.id),W=L&&B.selected||V;return X.set(B.id,W),B.selected!==W},ve(B=>{let V=t.get(B.id);V&&(V.selected=X.get(B.id)),B.selected=X.get(B.id)})),L||xe({nodes:[]})},Yt=M=>{let L=A.multiselectionKeyPressed,X=new Map;Ve.set(B=>{let V=M.includes(B.id),W=L&&B.selected||V;return X.set(B.id,W),B.selected!==W},ve(B=>{B.selected=X.get(B.id)})),L||xe({edges:[]})},ar=(M,L,X)=>{let B=A.nodes.find(V=>V.id===M);B&&(Ce(()=>{He(void 0),Be(void 0)}),B.selected?(L||B.selected&&A.multiselectionKeyPressed)&&(xe({nodes:[B],edges:[]}),requestAnimationFrame(()=>X?.blur())):Ft([M]))},lr=M=>{let L=S.get(M);!L||!(L.selectable||A.elementsSelectable&&typeof L.selectable>"u")||(Ce(()=>{He(void 0),Be(void 0)}),L.selected?L.selected&&A.multiselectionKeyPressed&&xe({nodes:[],edges:[L]}):Yt([M]))},cr=(M,L)=>{let X=new Map,B=A.snapGrid?.[0]??5,V=A.snapGrid?.[1]??5,W=M.x*B*L,ne=M.y*V*L;for(let oe of t.values()){if(!(oe.selected&&(oe.draggable||A.nodesDraggable&&typeof oe.draggable>"u")))continue;let ae={x:oe.internals.positionAbsolute.x+W,y:oe.internals.positionAbsolute.y+ne};A.snapGrid&&(ae=os(ae,A.snapGrid));let{position:Ke,positionAbsolute:Wt}=Ki({nodeId:oe.id,nextPosition:ae,nodeLookup:t,nodeExtent:A.nodeExtent,nodeOrigin:A.nodeOrigin,onError:A.onError});oe.position=Ke,oe.internals.positionAbsolute=Wt,X.set(oe.id,oe)}Kt(X)},pr=M=>es({delta:M,panZoom:A.panZoom,transform:A.transform,translateExtent:A.translateExtent,width:A.width,height:A.height}),gr=()=>{_({...Yo})},mr=()=>{Vt(),xe()};return Te(()=>{A.panZoom?.syncViewport(A.viewport)}),Te(()=>{let M=bo();M&&(Te(()=>{M.setScaleExtent([A.minZoom,A.maxZoom])}),Te(()=>{M.setTranslateExtent(A.translateExtent)}))}),Re(cn(()=>A.nodes,M=>{Re(()=>{let L=rs(()=>t.get(M.id)),X=A.elevateNodesOnSelect?1e3:0,B=Xi(Ui(M,A.nodeOrigin),ji(M.extent)?M.extent:A.nodeExtent,$i(M)),V={width:M.measured?.width??L?.measured?.width,height:M.measured?.height??L?.measured?.height},W={...M,measured:V,internals:{positionAbsolute:B,handleBounds:!M.measured&&!L?.measured?void 0:L?.internals.handleBounds,z:$e(M,X),userNode:M}};t.set(M.id,W),M.parentId&&Ko(W,t,N,{nodeOrigin:A.nodeOrigin,nodeExtent:A.nodeExtent,elevateNodesOnSelect:A.elevateNodesOnSelect,checkEquality:!0})}),gn(()=>{})})),Te(()=>{let M=new Set(A.nodes.map(L=>L.id));for(let L of Array.from(t.keys()))M.has(L)||t.delete(L)}),Re(cn(()=>A.edges,M=>{let{source:L,target:X,sourceHandle:B=null,targetHandle:V=null}=M,W={edgeId:M.id,source:L,target:X,sourceHandle:B,targetHandle:V},ne=`${L}-${B}--${X}-${V}`,oe=`${X}-${V}--${L}-${B}`;Re(()=>{Ce(()=>{Xo("source",W,oe,P,L,B),Xo("target",W,ne,P,X,V),S.set(M.id,M)})}),Re(()=>{let ce=t.get(M.source),ae=t.get(M.target);if(!ce||!ae)return;if(A.onlyRenderVisibleElements){if(!qi({sourceNode:ce,targetNode:ae,width:A.width??0,height:A.height??0,transform:A.transform}))return;A.visibleNodesMap.set(ce.id,ce),A.visibleNodesMap.set(ae.id,ae)}let Ke=Yi({id:M.id,sourceNode:ce,targetNode:ae,sourceHandle:M.sourceHandle||null,targetHandle:M.targetHandle||null,connectionMode:A.connectionMode,onError:A.onError});Ke&&x.set(M.id,{...A.defaultEdgeOptions,...M,...Ke,zIndex:Wi({selected:M.selected,zIndex:M.zIndex??A.defaultEdgeOptions.zIndex,sourceNode:ce,targetNode:ae,elevateOnSelect:A.elevateEdgesOnSelect}),sourceNode:ce,targetNode:ae,edge:M})}),gn(()=>{Ce(()=>{S.delete(M.id),x.delete(M.id),Fo("source",oe,P,L,B),Fo("target",ne,P,X,V)})})})),Te(()=>{let M=new Set(A.edges.map(L=>L.id));for(let L of Array.from(S.keys()))M.has(L)||(S.delete(L),P.delete(L),x.delete(L))}),{store:A,nodeLookup:t,edgeLookup:S,parentLookup:N,connectionLookup:P,actions:{getEdge:er,applyInitialFitView:tr,resetStoreValues:Vt,requestUpdateNodeInternals:nr,setAriaLabelConfig:I,setAriaLiveMessage:k,setClickConnectStartHandle:Y,setConfig:E,setConnection:_,setDeleteKeyPressed:At,setDomNode:ee,setDragging:de,get setEdges(){return Ve.set},setElementsSelectable:G,setHeight:F,setMultiselectionKeyPressed:Rt,get setNodes(){return be.set},setNodesConnectable:An,setNodesDraggable:Ln,setPanActivationKeyPressed:_t,setPanZoom:Hn,setSelectionKeyPressed:zt,setSelectionRect:He,setSelectionRectMode:Be,get setViewport(){return Ee.set},setWidth:Wn,setZoomActivationKeyPressed:Lt,addEdge:or,updateNodePositions:Kt,zoomIn:rr,zoomOut:ir,fitView:Bt,setCenter:sr,setPaneClickDistance:dr,unselectNodesAndEdges:xe,addSelectedNodes:Ft,addSelectedEdges:Yt,handleNodeSelection:ar,handleEdgeSelection:lr,moveSelectedNodes:cr,panBy:pr,cancelConnection:gr,reset:mr}}};var Ae=as();function z(){let e=ls(Ae);if(!e)throw new Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useInternalSolidFlow within your components");return e}import{mergeProps as cs,Show as Ss}from"solid-js";var Wo=e=>{let o=cs({markerUnits:"strokeWidth",orient:"auto-start-reverse",width:12.5,height:12.5,color:"none"},e),t=()=>o.color??"var(--xy-edge-stroke)";return<marker class="solid-flow__arrowhead"id={o.id}markerWidth={o.width}markerHeight={o.height}viewBox="-10 -10 20 20"markerUnits={o.markerUnits}orient={o.orient}refX="0"refY="0">
-      <Ss when={o.type==="arrow"}fallback={<polyline class="arrowclosed"stroke={t()}fill={t()}stroke-linecap="round"stroke-linejoin="round"stroke-width={o.strokeWidth}points="-5,-4 0,0 -5,4 -5,-4"/>}>
-        <polyline class="arrow"stroke={t()}fill="none"stroke-linecap="round"stroke-linejoin="round"stroke-width={o.strokeWidth}points="-5,-4 0,0 -5,4"/>
-      </Ss>
-    </marker>};import{createMarkerIds as Ns}from"@xyflow/system";import{createMemo as Ps,For as Es,Show as Cs}from"solid-js";var Zo=()=>{let{store:e}=z(),o=Ps(()=>Ns(e.edges,{id:e.id,defaultColor:e.defaultMarkerColor,defaultMarkerStart:e.defaultEdgeOptions.markerStart,defaultMarkerEnd:e.defaultEdgeOptions.markerEnd}));return<Cs when={o().length>0}>
+    </Show6>;
+};
+
+// src/components/graph/node/OutputNode.tsx
+import { mergeProps as mergeProps7 } from "solid-js";
+var OutputNode = (props) => {
+  const _props = mergeProps7(
+    {
+      targetPosition: "top"
+    },
+    props
+  );
+  return <>
+      <Handle type="target" position={_props.targetPosition} isConnectable={_props.isConnectable} />
+      {props.data?.label}
+    </>;
+};
+
+// src/data/defaults.ts
+import {
+  devWarn,
+  infiniteExtent
+} from "@xyflow/system";
+var getDefaultFlowStateProps = () => ({
+  id: "1",
+  nodes: [],
+  edges: [],
+  nodeOrigin: [0, 0],
+  nodeExtent: infiniteExtent,
+  defaultEdgeOptions: {},
+  colorMode: "system",
+  colorModeSSR: "light",
+  connectionMode: "strict",
+  connectionLineType: "default",
+  connectionRadius: 20,
+  nodeDragThreshold: 1,
+  minZoom: 0.5,
+  maxZoom: 2,
+  selectionMode: "partial",
+  fitView: false,
+  noPanClass: "nopan",
+  noDragClass: "nodrag",
+  noWheelClass: "nowheel",
+  autoPanOnNodeDrag: true,
+  autoPanOnConnect: true,
+  autoPanOnNodeFocus: true,
+  autoPanSpeed: 15,
+  elevateEdgesOnSelect: true,
+  nodesDraggable: true,
+  nodesConnectable: true,
+  nodesFocusable: true,
+  edgesFocusable: true,
+  elementsSelectable: true,
+  selectNodesOnDrag: true,
+  elevateNodesOnSelect: true,
+  onlyRenderVisibleElements: false,
+  disableKeyboardA11y: false,
+  defaultMarkerColor: "#b1b1b7",
+  ariaLiveMessage: "",
+  style: {},
+  isValidConnection: () => true,
+  onFlowError: devWarn
+});
+
+// src/data/xyflow.ts
+import {
+  clampPosition,
+  clampPositionToParent,
+  getBoundsOfRects,
+  getDimensions,
+  getHandleBounds,
+  getNodeDimensions,
+  getNodePositionWithOrigin,
+  infiniteExtent as infiniteExtent2,
+  isCoordinateExtent,
+  isNumeric,
+  nodeToRect
+} from "@xyflow/system";
+var defaultOptions = {
+  nodeOrigin: [0, 0],
+  nodeExtent: infiniteExtent2,
+  elevateNodesOnSelect: true,
+  defaults: {}
+};
+var adoptUserNodesDefaultOptions = {
+  ...defaultOptions,
+  checkEquality: true
+};
+function mergeObjects(base, incoming) {
+  const result = { ...base };
+  for (const key in incoming) {
+    if (incoming[key] !== void 0) {
+      result[key] = incoming[key];
+    }
+  }
+  return result;
+}
+function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
+  const _options = mergeObjects(adoptUserNodesDefaultOptions, options);
+  let nodesInitialized = nodes.length > 0;
+  const tmpLookup = new Map(nodeLookup);
+  const selectedNodeZ = _options?.elevateNodesOnSelect ? 1e3 : 0;
+  nodeLookup.clear();
+  parentLookup.clear();
+  for (const userNode of nodes) {
+    let internalNode = tmpLookup.get(userNode.id);
+    if (_options.checkEquality && userNode === internalNode?.internals.userNode) {
+      nodeLookup.set(userNode.id, internalNode);
+    } else {
+      const positionWithOrigin = getNodePositionWithOrigin(userNode, _options.nodeOrigin);
+      const extent = isCoordinateExtent(userNode.extent) ? userNode.extent : _options.nodeExtent;
+      const clampedPosition = clampPosition(
+        positionWithOrigin,
+        extent,
+        getNodeDimensions(userNode)
+      );
+      internalNode = {
+        ..._options.defaults,
+        ...userNode,
+        measured: {
+          width: userNode.measured?.width,
+          height: userNode.measured?.height
+        },
+        internals: {
+          positionAbsolute: clampedPosition,
+          // if user re-initializes the node or removes `measured` for whatever reason, we reset the handleBounds so that the node gets re-measured
+          handleBounds: !userNode.measured ? void 0 : internalNode?.internals.handleBounds,
+          z: calculateZ(userNode, selectedNodeZ),
+          userNode
+        }
+      };
+      nodeLookup.set(userNode.id, internalNode);
+    }
+    if ((internalNode.measured === void 0 || internalNode.measured.width === void 0 || internalNode.measured.height === void 0) && !internalNode.hidden) {
+      nodesInitialized = false;
+    }
+    if (userNode.parentId) {
+      updateChildNode(internalNode, nodeLookup, parentLookup, options);
+    }
+  }
+  return nodesInitialized;
+}
+function updateParentLookup(node, parentLookup) {
+  if (!node.parentId) {
+    return;
+  }
+  const childNodes = parentLookup.get(node.parentId);
+  if (childNodes) {
+    childNodes.set(node.id, node);
+  } else {
+    parentLookup.set(node.parentId, /* @__PURE__ */ new Map([[node.id, node]]));
+  }
+}
+function updateChildNode(node, nodeLookup, parentLookup, options) {
+  const { elevateNodesOnSelect, nodeOrigin, nodeExtent } = mergeObjects(defaultOptions, options);
+  const parentId = node.parentId;
+  const parentNode = nodeLookup.get(parentId);
+  if (!parentNode) {
+    return;
+  }
+  updateParentLookup(node, parentLookup);
+  const selectedNodeZ = elevateNodesOnSelect ? 1e3 : 0;
+  const { x, y, z } = calculateChildXYZ(node, parentNode, nodeOrigin, nodeExtent, selectedNodeZ);
+  const { positionAbsolute } = node.internals;
+  const positionChanged = x !== positionAbsolute.x || y !== positionAbsolute.y;
+  if (positionChanged || z !== node.internals.z) {
+    nodeLookup.set(node.id, {
+      ...node,
+      internals: {
+        ...node.internals,
+        positionAbsolute: positionChanged ? { x, y } : positionAbsolute,
+        z
+      }
+    });
+  }
+}
+function calculateZ(node, selectedNodeZ) {
+  return (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0);
+}
+function calculateChildXYZ(childNode, parentNode, nodeOrigin, nodeExtent, selectedNodeZ) {
+  const { x: parentX, y: parentY } = parentNode.internals.positionAbsolute;
+  const childDimensions = getNodeDimensions(childNode);
+  const positionWithOrigin = getNodePositionWithOrigin(childNode, nodeOrigin);
+  const clampedPosition = isCoordinateExtent(childNode.extent) ? clampPosition(positionWithOrigin, childNode.extent, childDimensions) : positionWithOrigin;
+  let absolutePosition = clampPosition(
+    { x: parentX + clampedPosition.x, y: parentY + clampedPosition.y },
+    nodeExtent,
+    childDimensions
+  );
+  if (childNode.extent === "parent") {
+    absolutePosition = clampPositionToParent(absolutePosition, childDimensions, parentNode);
+  }
+  const childZ = calculateZ(childNode, selectedNodeZ);
+  const parentZ = parentNode.internals.z ?? 0;
+  return {
+    x: absolutePosition.x,
+    y: absolutePosition.y,
+    z: parentZ >= childZ ? parentZ + 1 : childZ
+  };
+}
+function addConnectionToLookup(type, connection, connectionKey, connectionLookup, nodeId, handleId) {
+  let key = nodeId;
+  const nodeMap = connectionLookup.get(key) || /* @__PURE__ */ new Map();
+  connectionLookup.set(key, nodeMap.set(connectionKey, connection));
+  key = `${nodeId}-${type}`;
+  const typeMap = connectionLookup.get(key) || /* @__PURE__ */ new Map();
+  connectionLookup.set(key, typeMap.set(connectionKey, connection));
+  if (handleId) {
+    key = `${nodeId}-${type}-${handleId}`;
+    const handleMap = connectionLookup.get(key) || /* @__PURE__ */ new Map();
+    connectionLookup.set(key, handleMap.set(connectionKey, connection));
+  }
+}
+function removeConnectionFromLookup(type, connectionKey, connectionLookup, nodeId, handleId) {
+  let key = nodeId;
+  const nodeMap = connectionLookup.get(key);
+  if (nodeMap) {
+    nodeMap.delete(connectionKey);
+    if (nodeMap.size === 0) connectionLookup.delete(key);
+  }
+  key = `${nodeId}-${type}`;
+  const typeMap = connectionLookup.get(key);
+  if (typeMap) {
+    typeMap.delete(connectionKey);
+    if (typeMap.size === 0) connectionLookup.delete(key);
+  }
+  if (handleId) {
+    key = `${nodeId}-${type}-${handleId}`;
+    const handleMap = connectionLookup.get(key);
+    if (handleMap) {
+      handleMap.delete(connectionKey);
+      if (handleMap.size === 0) connectionLookup.delete(key);
+    }
+  }
+}
+
+// src/data/createSolidFlow.tsx
+var InitialNodeTypesMap = {
+  input: InputNode,
+  output: OutputNode,
+  default: DefaultNode,
+  group: GroupNode
+};
+var InitialEdgeTypesMap = {
+  straight: StraightEdgeInternal,
+  smoothstep: SmoothStepEdgeInternal,
+  default: BezierEdgeInternal,
+  step: StepEdgeInternal
+};
+var getInitialViewport = (_nodesInitialized, fitView, initialViewport, width, height, nodeLookup) => {
+  if (fitView && !initialViewport && width && height) {
+    const bounds = getInternalNodesBounds(nodeLookup, {
+      filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight))
+    });
+    return getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
+  } else {
+    return initialViewport ?? { x: 0, y: 0, zoom: 1 };
+  }
+};
+var createSolidFlow = (props) => {
+  const _props = mergeProps8(getDefaultFlowStateProps(), props);
+  const nodeLookup = new ReactiveMap();
+  const parentLookup = new ReactiveMap();
+  const edgeLookup = new ReactiveMap();
+  const connectionLookup = new ReactiveMap();
+  const layoutedEdgesMap = new ReactiveMap();
+  const startNodesInitialized = batch2(() => {
+    return adoptUserNodes(_props.nodes, nodeLookup, parentLookup, {
+      // eslint-disable-next-line solid/reactivity
+      nodeExtent: _props.nodeExtent,
+      // eslint-disable-next-line solid/reactivity
+      nodeOrigin: _props.nodeOrigin,
+      // eslint-disable-next-line solid/reactivity
+      elevateNodesOnSelect: _props.elevateNodesOnSelect,
+      checkEquality: true
+    });
+  });
+  const initialViewport = getInitialViewport(
+    startNodesInitialized,
+    // eslint-disable-next-line solid/reactivity
+    _props.fitView,
+    _props.initialViewport,
+    // eslint-disable-next-line solid/reactivity
+    _props.width ?? 0,
+    // eslint-disable-next-line solid/reactivity
+    _props.height ?? 0,
+    nodeLookup
+  );
+  const mediaPrefersDark = createMediaQuery(
+    "(prefers-color-scheme: dark)",
+    // NOTE:  should mediaPrefersDark be reactive to config-changes?
+    _props.colorModeSSR === "dark"
+  );
+  const [config, setConfig] = createSignal5(_props);
+  const [ariaLabelConfig, setAriaLabelConfig] = createWritable(
+    () => mergeAriaLabelConfig(config().ariaLabelConfig)
+  );
+  const [ariaLiveMessage, setAriaLiveMessage] = createWritable(() => config().ariaLiveMessage);
+  const [clickConnectStartHandle, setClickConnectStartHandle] = createSignal5(void 0);
+  const [connection, setConnection] = createSignal5(initialConnection);
+  const [domNode, setDomNode] = createSignal5(null);
+  const [dragging, setDragging] = createSignal5(false);
+  const [elementsSelectable, setElementsSelectable] = createWritable(
+    () => config().elementsSelectable
+  );
+  const [height, setHeight] = createWritable(() => config().height);
+  const [minZoom, _setMinZoom] = createWritable(() => config().minZoom);
+  const [maxZoom, _setMaxZoom] = createWritable(() => config().maxZoom);
+  const [nodesConnectable, setNodesConnectable] = createWritable(() => config().nodesDraggable);
+  const [nodesDraggable, setNodesDraggable] = createWritable(() => config().nodesDraggable);
+  const [panZoom, setPanZoom] = createSignal5(null);
+  const [selectionRect, setSelectionRect] = createSignal5();
+  const [selectionRectMode, setSelectionRectMode] = createSignal5();
+  const [snapGrid, setSnapGrid] = createWritable(() => config().snapGrid);
+  const [translateExtent, _setTranslateExtent] = createWritable(
+    () => config().translateExtent ?? infiniteExtent3
+  );
+  const [width, setWidth] = createWritable(() => config().width);
+  const [selectionKeyPressed, setSelectionKeyPressed] = createSignal5(false);
+  const [multiselectionKeyPressed, setMultiselectionKeyPressed] = createSignal5(false);
+  const [deleteKeyPressed, setDeleteKeyPressed] = createSignal5(false);
+  const [panActivationKeyPressed, setPanActivationKeyPressed] = createSignal5(false);
+  const [zoomActivationKeyPressed, setZoomActivationKeyPressed] = createSignal5(false);
+  const nodesMemo = createWritableStore(() => config().nodes);
+  const edgesMemo = createWritableStore(() => config().edges);
+  const viewportMemo = createWritableStore(() => config().viewport ?? initialViewport);
+  const transform = createMemo5(
+    () => [viewportMemo.get().x, viewportMemo.get().y, viewportMemo.get().zoom]
+  );
+  const store = mergeProps8({ width: 0, height: 0 }, config, {
+    get _colorMode() {
+      return config().colorMode;
+    },
+    get _colorModeSSR() {
+      return config().colorModeSSR;
+    },
+    get _connection() {
+      return connection();
+    },
+    get _nodeTypes() {
+      return config().nodeTypes;
+    },
+    get _edgeTypes() {
+      return config().edgeTypes;
+    },
+    get ariaLabelConfig() {
+      return ariaLabelConfig();
+    },
+    get ariaLiveMessage() {
+      return ariaLiveMessage();
+    },
+    get clickConnectStartHandle() {
+      return clickConnectStartHandle();
+    },
+    get colorMode() {
+      return this._colorMode === "system" ? mediaPrefersDark() ? "dark" : "light" : this._colorMode;
+    },
+    get connection() {
+      const state = connection();
+      return {
+        ...state,
+        from: state.inProgress ? pointToRendererPoint(state.from, this.transform) : state.from,
+        to: state.inProgress ? pointToRendererPoint(state.to, this.transform) : state.to
+      };
+    },
+    get domNode() {
+      return domNode();
+    },
+    get dragging() {
+      return dragging();
+    },
+    get edgeTypes() {
+      return { ...InitialEdgeTypesMap, ...this._edgeTypes };
+    },
+    get elementsSelectable() {
+      return elementsSelectable();
+    },
+    get height() {
+      return height();
+    },
+    get lib() {
+      return "solid";
+    },
+    get onError() {
+      return config().onFlowError;
+    },
+    get maxZoom() {
+      return maxZoom();
+    },
+    get minZoom() {
+      return minZoom();
+    },
+    get nodes() {
+      return nodesMemo.get();
+    },
+    get nodesConnectable() {
+      return nodesConnectable();
+    },
+    get nodesDraggable() {
+      return nodesDraggable();
+    },
+    get nodeTypes() {
+      return { ...InitialNodeTypesMap, ...this._nodeTypes };
+    },
+    get panZoom() {
+      return panZoom();
+    },
+    get selectedNodes() {
+      return config().nodes.filter((node) => node.selected);
+    },
+    get selectedEdges() {
+      return config().edges.filter((edge) => edge.selected);
+    },
+    get selectionRect() {
+      return selectionRect();
+    },
+    get selectionRectMode() {
+      return selectionRectMode();
+    },
+    get snapGrid() {
+      return snapGrid();
+    },
+    get viewport() {
+      return viewportMemo.get();
+    },
+    get viewportInitialized() {
+      return panZoom() !== null;
+    },
+    get visibleEdgeIds() {
+      return visibleEdgeIds();
+    },
+    get visibleNodeIds() {
+      return visibleNodeIds();
+    },
+    get visibleNodesMap() {
+      return visibleNodesMap();
+    },
+    get transform() {
+      return transform();
+    },
+    get translateExtent() {
+      return translateExtent();
+    },
+    get width() {
+      return width();
+    },
+    // key press flags
+    get selectionKeyPressed() {
+      return selectionKeyPressed();
+    },
+    get multiselectionKeyPressed() {
+      return multiselectionKeyPressed();
+    },
+    get deleteKeyPressed() {
+      return deleteKeyPressed();
+    },
+    get panActivationKeyPressed() {
+      return panActivationKeyPressed();
+    },
+    get zoomActivationKeyPressed() {
+      return zoomActivationKeyPressed();
+    }
+  });
+  const visibleNodesMap = createMemo5(() => {
+    return nodeLookup;
+  });
+  const visibleNodeIds = createMemo5(() => {
+    return Array.from(visibleNodesMap().values()).map((edge) => edge.id);
+  });
+  const visibleEdgeIds = createMemo5(() => {
+    return Array.from(layoutedEdgesMap.values()).map((edge) => edge.id);
+  });
+  const getEdge = (id) => layoutedEdgesMap.get(id);
+  const fitView = async (options) => {
+    if (!store.panZoom) return false;
+    return fitViewport(
+      {
+        nodes: nodeLookup,
+        width: store.width,
+        height: store.height,
+        panZoom: store.panZoom,
+        minZoom: store.minZoom,
+        maxZoom: store.maxZoom
+      },
+      options ?? config().fitViewOptions
+    );
+  };
+  const resetStoreValues = () => {
+    setDragging(false);
+    setSelectionRect(void 0);
+    setSelectionRectMode(void 0);
+    setSelectionKeyPressed(false);
+    setMultiselectionKeyPressed(false);
+    setDeleteKeyPressed(false);
+    setPanActivationKeyPressed(false);
+    setZoomActivationKeyPressed(false);
+    setConnection({ ...initialConnection });
+    setClickConnectStartHandle(void 0);
+    viewportMemo.set(config().initialViewport ?? { x: 0, y: 0, zoom: 1 });
+    setAriaLiveMessage("");
+    setSnapGrid(void 0);
+  };
+  const addEdge2 = (edgeParams) => {
+    edgesMemo.set((edges) => systemAddEdge(edgeParams, edges));
+  };
+  let initialFitViewApplied = false;
+  const applyInitialFitView = (initialFitView) => {
+    initialFitViewApplied = !initialFitView;
+  };
+  const updateNodePositions = (nodeDragItems, dragging2 = false) => {
+    nodesMemo.set(
+      (node) => nodeDragItems.has(node.id),
+      produce((node) => {
+        node.dragging = dragging2;
+        node.position = nodeDragItems.get(node.id).position;
+      })
+    );
+  };
+  let pendingEntries = void 0;
+  const requestUpdateNodeInternals = (updateEntries) => {
+    if (pendingEntries) {
+      pendingEntries.push(...updateEntries);
+      return;
+    }
+    pendingEntries = updateEntries;
+    requestIdleCallback(() => {
+      batch2(() => {
+        const updates = new Map(pendingEntries);
+        pendingEntries = void 0;
+        const { changes, updatedInternals } = systemUpdateNodeInternals(
+          updates,
+          nodeLookup,
+          parentLookup,
+          store.domNode,
+          store.nodeOrigin
+        );
+        if (!updatedInternals) return;
+        updateAbsolutePositions(nodeLookup, parentLookup, {
+          nodeOrigin: store.nodeOrigin,
+          nodeExtent: store.nodeExtent
+        });
+        const nodeToChange = changes.reduce(
+          (acc, change) => {
+            const node = nodeLookup.get(change.id)?.internals.userNode;
+            if (!node) return acc;
+            acc.set(node.id, change);
+            return acc;
+          },
+          /* @__PURE__ */ new Map()
+        );
+        nodesMemo.set(
+          (node) => nodeToChange.has(node.id),
+          produce((node) => {
+            const change = nodeToChange.get(node.id);
+            switch (change.type) {
+              case "dimensions": {
+                if (change.setAttributes) {
+                  node.width = change.dimensions?.width ?? node.width;
+                  node.height = change.dimensions?.height ?? node.height;
+                }
+                node.measured = { ...node.measured, ...change.dimensions };
+                break;
+              }
+              case "position":
+                node.position = change.position ?? node.position;
+                break;
+            }
+          })
+        );
+        if (!initialFitViewApplied) {
+          initialFitViewApplied = true;
+          void fitView();
+        }
+      });
+    });
+  };
+  const zoomBy = async (factor, options) => {
+    return store.panZoom ? store.panZoom.scaleBy(factor, options) : false;
+  };
+  const zoomIn = (options) => zoomBy(1.2, options);
+  const zoomOut = (options) => zoomBy(1 / 1.2, options);
+  const setCenter = async (x, y, options) => {
+    const nextZoom = typeof options?.zoom !== "undefined" ? options.zoom : store.maxZoom;
+    const currentPanZoom = store.panZoom;
+    if (!currentPanZoom) {
+      return Promise.resolve(false);
+    }
+    await currentPanZoom.setViewport(
+      {
+        x: store.width / 2 - x * nextZoom,
+        y: store.height / 2 - y * nextZoom,
+        zoom: nextZoom
+      },
+      { duration: options?.duration, ease: options?.ease, interpolate: options?.interpolate }
+    );
+    return Promise.resolve(true);
+  };
+  const setPaneClickDistance = (distance) => {
+    store.panZoom?.setClickDistance(distance);
+  };
+  const unselectNodesAndEdges = ({
+    nodes: _nodes,
+    edges
+  } = {}) => {
+    const nodesToUnselect = new Set((_nodes ? _nodes : store.nodes).map(({ id }) => id));
+    if (nodesToUnselect.size) {
+      nodesMemo.set(
+        (node) => nodesToUnselect.has(node.id),
+        produce((node) => {
+          node.selected = false;
+        })
+      );
+    }
+    const edgesToUnselect = new Set((edges ? edges : store.edges).map(({ id }) => id));
+    if (edgesToUnselect.size) {
+      edgesMemo.set(
+        (edge) => edgesToUnselect.has(edge.id),
+        produce((edge) => {
+          edge.selected = false;
+        })
+      );
+    }
+  };
+  const addSelectedNodes = (ids) => {
+    const isMultiSelection = store.multiselectionKeyPressed;
+    const selectState = /* @__PURE__ */ new Map();
+    nodesMemo.set(
+      (node) => {
+        const nodeWillBeSelected = ids.includes(node.id);
+        const selected = isMultiSelection ? node.selected || nodeWillBeSelected : nodeWillBeSelected;
+        selectState.set(node.id, selected);
+        return node.selected !== selected;
+      },
+      produce((node) => {
+        const internalNode = nodeLookup.get(node.id);
+        if (internalNode) internalNode.selected = selectState.get(node.id);
+        node.selected = selectState.get(node.id);
+      })
+    );
+    if (!isMultiSelection) {
+      unselectNodesAndEdges({ nodes: [] });
+    }
+  };
+  const addSelectedEdges = (ids) => {
+    const isMultiSelection = store.multiselectionKeyPressed;
+    const edgeSelectState = /* @__PURE__ */ new Map();
+    edgesMemo.set(
+      (edge) => {
+        const edgeWillBeSelected = ids.includes(edge.id);
+        const selected = isMultiSelection ? edge.selected || edgeWillBeSelected : edgeWillBeSelected;
+        edgeSelectState.set(edge.id, selected);
+        return edge.selected !== selected;
+      },
+      produce((edge) => {
+        edge.selected = edgeSelectState.get(edge.id);
+      })
+    );
+    if (!isMultiSelection) {
+      unselectNodesAndEdges({ edges: [] });
+    }
+  };
+  const handleNodeSelection = (id, unselect, nodeRef) => {
+    const node = store.nodes.find((n) => n.id === id);
+    if (!node) {
+      return;
+    }
+    batch2(() => {
+      setSelectionRect(void 0);
+      setSelectionRectMode(void 0);
+    });
+    if (!node.selected) {
+      addSelectedNodes([id]);
+    } else if (unselect || node.selected && store.multiselectionKeyPressed) {
+      unselectNodesAndEdges({ nodes: [node], edges: [] });
+      requestAnimationFrame(() => nodeRef?.blur());
+    }
+  };
+  const handleEdgeSelection = (id) => {
+    const edge = edgeLookup.get(id);
+    if (!edge) {
+      return;
+    }
+    const selectable = edge.selectable || store.elementsSelectable && typeof edge.selectable === "undefined";
+    if (!selectable) return;
+    batch2(() => {
+      setSelectionRect(void 0);
+      setSelectionRectMode(void 0);
+    });
+    if (!edge.selected) {
+      addSelectedEdges([id]);
+    } else if (edge.selected && store.multiselectionKeyPressed) {
+      unselectNodesAndEdges({ nodes: [], edges: [edge] });
+    }
+  };
+  const moveSelectedNodes = (direction, factor) => {
+    const nodeUpdates = /* @__PURE__ */ new Map();
+    const xVelo = store.snapGrid?.[0] ?? 5;
+    const yVelo = store.snapGrid?.[1] ?? 5;
+    const xDiff = direction.x * xVelo * factor;
+    const yDiff = direction.y * yVelo * factor;
+    for (const node of nodeLookup.values()) {
+      const isSelected = node.selected && (node.draggable || store.nodesDraggable && typeof node.draggable === "undefined");
+      if (!isSelected) {
+        continue;
+      }
+      let nextPosition = {
+        x: node.internals.positionAbsolute.x + xDiff,
+        y: node.internals.positionAbsolute.y + yDiff
+      };
+      if (store.snapGrid) {
+        nextPosition = snapPosition(nextPosition, store.snapGrid);
+      }
+      const { position, positionAbsolute } = calculateNodePosition({
+        nodeId: node.id,
+        nextPosition,
+        nodeLookup,
+        nodeExtent: store.nodeExtent,
+        nodeOrigin: store.nodeOrigin,
+        onError: store.onError
+      });
+      node.position = position;
+      node.internals.positionAbsolute = positionAbsolute;
+      nodeUpdates.set(node.id, node);
+    }
+    updateNodePositions(nodeUpdates);
+  };
+  const panBy = (delta) => {
+    return panBySystem({
+      delta,
+      panZoom: store.panZoom,
+      transform: store.transform,
+      translateExtent: store.translateExtent,
+      width: store.width,
+      height: store.height
+    });
+  };
+  const cancelConnection = () => {
+    setConnection({ ...initialConnection });
+  };
+  const reset = () => {
+    resetStoreValues();
+    unselectNodesAndEdges();
+  };
+  createEffect4(() => {
+    store.panZoom?.syncViewport(store.viewport);
+  });
+  createEffect4(() => {
+    const _panZoom = panZoom();
+    if (!_panZoom) return;
+    createEffect4(() => {
+      _panZoom.setScaleExtent([store.minZoom, store.maxZoom]);
+    });
+    createEffect4(() => {
+      _panZoom.setTranslateExtent(store.translateExtent);
+    });
+  });
+  createComputed(
+    mapArray(
+      () => store.nodes,
+      (userNode) => {
+        createComputed(() => {
+          const internalNode = untrack(() => nodeLookup.get(userNode.id));
+          const selectedNodeZ = store.elevateNodesOnSelect ? 1e3 : 0;
+          const clampedPosition = clampPosition2(
+            getNodePositionWithOrigin2(userNode, store.nodeOrigin),
+            isCoordinateExtent2(userNode.extent) ? userNode.extent : store.nodeExtent,
+            getNodeDimensions2(userNode)
+          );
+          const preservedMeasured = {
+            width: userNode.measured?.width ?? internalNode?.measured?.width,
+            height: userNode.measured?.height ?? internalNode?.measured?.height
+          };
+          const updatedNodeInternals = {
+            ...userNode,
+            measured: preservedMeasured,
+            internals: {
+              positionAbsolute: clampedPosition,
+              // If there is neither a user-provided nor a previously measured size,
+              // reset handleBounds so that the node gets re-measured.
+              handleBounds: !userNode.measured && !internalNode?.measured ? void 0 : internalNode?.internals.handleBounds,
+              z: calculateZ(userNode, selectedNodeZ),
+              userNode
+            }
+          };
+          nodeLookup.set(userNode.id, updatedNodeInternals);
+          if (userNode.parentId) {
+            updateChildNode(updatedNodeInternals, nodeLookup, parentLookup, {
+              nodeOrigin: store.nodeOrigin,
+              nodeExtent: store.nodeExtent,
+              elevateNodesOnSelect: store.elevateNodesOnSelect,
+              checkEquality: true
+            });
+          }
+        });
+        onCleanup2(() => {
+        });
+      }
+    )
+  );
+  createEffect4(() => {
+    const currentIds = new Set(store.nodes.map((n) => n.id));
+    for (const id of Array.from(nodeLookup.keys())) {
+      if (!currentIds.has(id)) {
+        nodeLookup.delete(id);
+      }
+    }
+  });
+  createComputed(
+    mapArray(
+      () => store.edges,
+      (edge) => {
+        const {
+          source: sourceNodeId,
+          target: targetNodeId,
+          sourceHandle = null,
+          targetHandle = null
+        } = edge;
+        const connection2 = {
+          edgeId: edge.id,
+          source: sourceNodeId,
+          target: targetNodeId,
+          sourceHandle,
+          targetHandle
+        };
+        const sourceKey = `${sourceNodeId}-${sourceHandle}--${targetNodeId}-${targetHandle}`;
+        const targetKey = `${targetNodeId}-${targetHandle}--${sourceNodeId}-${sourceHandle}`;
+        createComputed(() => {
+          batch2(() => {
+            addConnectionToLookup(
+              "source",
+              connection2,
+              targetKey,
+              connectionLookup,
+              sourceNodeId,
+              sourceHandle
+            );
+            addConnectionToLookup(
+              "target",
+              connection2,
+              sourceKey,
+              connectionLookup,
+              targetNodeId,
+              targetHandle
+            );
+            edgeLookup.set(edge.id, edge);
+          });
+        });
+        createComputed(() => {
+          const sourceNode = nodeLookup.get(edge.source);
+          const targetNode = nodeLookup.get(edge.target);
+          if (!sourceNode || !targetNode) return;
+          if (store.onlyRenderVisibleElements) {
+            const edgeVisible = isEdgeVisible({
+              sourceNode,
+              targetNode,
+              width: store.width ?? 0,
+              height: store.height ?? 0,
+              transform: store.transform
+            });
+            if (!edgeVisible) return;
+            store.visibleNodesMap.set(sourceNode.id, sourceNode);
+            store.visibleNodesMap.set(targetNode.id, targetNode);
+          }
+          const edgePosition = getEdgePosition({
+            id: edge.id,
+            sourceNode,
+            targetNode,
+            sourceHandle: edge.sourceHandle || null,
+            targetHandle: edge.targetHandle || null,
+            connectionMode: store.connectionMode,
+            onError: store.onError
+          });
+          if (!edgePosition) return;
+          layoutedEdgesMap.set(edge.id, {
+            ...store.defaultEdgeOptions,
+            ...edge,
+            ...edgePosition,
+            zIndex: getElevatedEdgeZIndex({
+              selected: edge.selected,
+              zIndex: edge.zIndex ?? store.defaultEdgeOptions.zIndex,
+              sourceNode,
+              targetNode,
+              elevateOnSelect: store.elevateEdgesOnSelect
+            }),
+            sourceNode,
+            targetNode,
+            edge
+          });
+        });
+        onCleanup2(() => {
+          batch2(() => {
+            edgeLookup.delete(edge.id);
+            layoutedEdgesMap.delete(edge.id);
+            removeConnectionFromLookup(
+              "source",
+              targetKey,
+              connectionLookup,
+              sourceNodeId,
+              sourceHandle
+            );
+            removeConnectionFromLookup(
+              "target",
+              sourceKey,
+              connectionLookup,
+              targetNodeId,
+              targetHandle
+            );
+          });
+        });
+      }
+    )
+  );
+  createEffect4(() => {
+    const currentIds = new Set(store.edges.map((e) => e.id));
+    for (const id of Array.from(edgeLookup.keys())) {
+      if (!currentIds.has(id)) {
+        edgeLookup.delete(id);
+        connectionLookup.delete(id);
+        layoutedEdgesMap.delete(id);
+      }
+    }
+  });
+  return {
+    store,
+    nodeLookup,
+    edgeLookup,
+    parentLookup,
+    connectionLookup,
+    actions: {
+      getEdge,
+      applyInitialFitView,
+      resetStoreValues,
+      requestUpdateNodeInternals,
+      setAriaLabelConfig,
+      setAriaLiveMessage,
+      setClickConnectStartHandle,
+      setConfig,
+      setConnection,
+      setDeleteKeyPressed,
+      setDomNode,
+      setDragging,
+      get setEdges() {
+        return edgesMemo.set;
+      },
+      setElementsSelectable,
+      setHeight,
+      setMultiselectionKeyPressed,
+      get setNodes() {
+        return nodesMemo.set;
+      },
+      setNodesConnectable,
+      setNodesDraggable,
+      setPanActivationKeyPressed,
+      setPanZoom,
+      setSelectionKeyPressed,
+      setSelectionRect,
+      setSelectionRectMode,
+      get setViewport() {
+        return viewportMemo.set;
+      },
+      setWidth,
+      setZoomActivationKeyPressed,
+      // Port Svelte Flow Actions to Solid Flow
+      addEdge: addEdge2,
+      updateNodePositions,
+      zoomIn,
+      zoomOut,
+      fitView,
+      setCenter,
+      setPaneClickDistance,
+      unselectNodesAndEdges,
+      addSelectedNodes,
+      addSelectedEdges,
+      handleNodeSelection,
+      handleEdgeSelection,
+      moveSelectedNodes,
+      panBy,
+      cancelConnection,
+      reset
+    }
+  };
+};
+
+// src/components/contexts/flow.tsx
+var SolidFlowContext = createContext4();
+function useInternalSolidFlow() {
+  const ctx = useContext4(SolidFlowContext);
+  if (!ctx) {
+    throw new Error(
+      "solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useInternalSolidFlow within your components"
+    );
+  }
+  return ctx;
+}
+
+// src/components/graph/marker/Marker.tsx
+import { mergeProps as mergeProps9, Show as Show7 } from "solid-js";
+var Marker = (props) => {
+  const _props = mergeProps9(
+    {
+      markerUnits: "strokeWidth",
+      orient: "auto-start-reverse",
+      width: 12.5,
+      height: 12.5,
+      color: "none"
+    },
+    props
+  );
+  const color = () => _props.color ?? "var(--xy-edge-stroke)";
+  return <marker
+    class="solid-flow__arrowhead"
+    id={_props.id}
+    markerWidth={_props.width}
+    markerHeight={_props.height}
+    viewBox="-10 -10 20 20"
+    markerUnits={_props.markerUnits}
+    orient={_props.orient}
+    refX="0"
+    refY="0"
+  >
+      <Show7
+    when={_props.type === "arrow"}
+    fallback={<polyline
+      class="arrowclosed"
+      stroke={color()}
+      fill={color()}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width={_props.strokeWidth}
+      points="-5,-4 0,0 -5,4 -5,-4"
+    />}
+  >
+        <polyline
+    class="arrow"
+    stroke={color()}
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width={_props.strokeWidth}
+    points="-5,-4 0,0 -5,4"
+  />
+      </Show7>
+    </marker>;
+};
+
+// src/components/graph/marker/MarkerDefinition.tsx
+import { createMarkerIds } from "@xyflow/system";
+import { createMemo as createMemo6, For, Show as Show8 } from "solid-js";
+var MarkerDefinition = () => {
+  const { store } = useInternalSolidFlow();
+  const markers = createMemo6(() => {
+    return createMarkerIds(store.edges, {
+      id: store.id,
+      defaultColor: store.defaultMarkerColor,
+      defaultMarkerStart: store.defaultEdgeOptions.markerStart,
+      defaultMarkerEnd: store.defaultEdgeOptions.markerEnd
+    });
+  });
+  return <Show8 when={markers().length > 0}>
       <svg class="solid-flow__marker">
         <defs>
-          <Es each={o()}>{t=><Wo{...t}/>}</Es>
+          <For each={markers()}>{(marker) => <Marker {...marker} />}</For>
         </defs>
       </svg>
-    </Cs>};var $o=e=>{let{store:o}=z();return<div class="solid-flow__edges">
-      <Zo/>
-
-      <Ts each={o.visibleEdgeIds}>
-        {t=><Io edgeId={t}onEdgeClick={e.onEdgeClick}onEdgeContextMenu={e.onEdgeContextMenu}onEdgePointerEnter={e.onEdgePointerEnter}onEdgePointerLeave={e.onEdgePointerLeave}/>}
-      </Ts>
-    </div>};import{For as Ms,onCleanup as Is}from"solid-js";var Uo=e=>{let{actions:o,store:t}=z(),N=new ResizeObserver(S=>{o.requestUpdateNodeInternals(S.map(P=>{let x=P.target.getAttribute("data-id");return[x,{id:x,nodeElement:P.target,force:!0}]}))});return Is(()=>{N.disconnect()}),<div class="solid-flow__container solid-flow__nodes">
-      <Ms each={t.visibleNodeIds}>
-        {S=><Ho nodeId={S}resizeObserver={N}nodeClickDistance={e.nodeClickDistance}onNodeClick={e.onNodeClick}onNodePointerEnter={e.onNodePointerEnter}onNodePointerMove={e.onNodePointerMove}onNodePointerLeave={e.onNodePointerLeave}onNodeDrag={e.onNodeDrag}onNodeDragStart={e.onNodeDragStart}onNodeDragStop={e.onNodeDragStop}onNodeContextMenu={e.onNodeContextMenu}/>}
-      </Ms>
-    </div>};import{getEventPosition as mn,getNodesInside as ks,SelectionMode as Ds}from"@xyflow/system";import Os from"clsx";import{batch as Ge}from"solid-js";import{produce as un}from"solid-js/store";var yn=(e,o)=>{if(e.size!==o.size)return!1;for(let t of e)if(!o.has(t))return!1;return!0},Jo=e=>{let{store:o,nodeLookup:t,edgeLookup:N,connectionLookup:S,actions:P}=z(),x,b=null,C=!1,T=new Set,v=new Set,E=()=>o.panActivationKeyPressed||e.panOnDrag,w=()=>o.selectionKeyPressed||o.selectionRect||e.selectionOnDrag&&E()!==!0,I=()=>o.elementsSelectable&&(w()||o.selectionRectMode==="user"),D=_=>{if(_.target===x){if(C){C=!1;return}e.onPaneClick?.({event:_}),Ge(()=>{P.unselectNodesAndEdges(),P.setSelectionRectMode(void 0)})}},k=_=>{if(b=x?.getBoundingClientRect()??null,!o.elementsSelectable||!w()||_.button!==0||_.target!==x||!b)return;_.target?.setPointerCapture?.(_.pointerId);let{x:$,y:ee}=mn(_,b);Ge(()=>{P.unselectNodesAndEdges(),P.setSelectionRect({width:0,height:0,startX:$,startY:ee,x:$,y:ee})})},R=_=>{if(!w()||!b||!o.selectionRect)return;C=!0;let $=mn(_,b),{startX:ee=0,startY:ie=0}=o.selectionRect,de={...o.selectionRect,x:$.x<ee?$.x:ee,y:$.y<ie?$.y:ie,width:Math.abs($.x-ee),height:Math.abs($.y-ie)},U=T,G=v;T=new Set(ks(t,de,o.transform,o.selectionMode===Ds.Partial,!0).map(F=>F.id));let O=o.defaultEdgeOptions.selectable??!0;v=new Set;for(let F of T){let K=S.get(F);if(K)for(let{edgeId:Z}of K.values()){let te=N.get(Z);te&&(te.selectable??O)&&v.add(Z)}}Ge(()=>{if(!yn(U,T)){let F=new Map;P.setNodes(K=>{let Z=T.has(K.id);return F.set(K.id,Z),!!K.selected!==Z},un(K=>{K.selected=F.get(K.id)}))}if(!yn(G,v)){let F=new Map;P.setEdges(K=>{let Z=v.has(K.id);return F.set(K.id,Z),!!K.selected!==Z},un(K=>{K.selected=F.get(K.id)}))}P.setSelectionRectMode("user"),P.setSelectionRect(de)})},Y=_=>{_.button===0&&(_.target?.releasePointerCapture?.(_.pointerId),!w()&&o.selectionRectMode==="user"&&_.target===x&&D(_),Ge(()=>{P.setSelectionRect(void 0),T.size>0&&P.setSelectionRectMode("nodes")}),o.selectionKeyPressed&&(C=!1),e.onSelectionEnd?.(_))},H=_=>{if(_.target!==x)return;let $=E();if(Array.isArray($)&&$.includes(2)){_.preventDefault();return}e.onPaneContextMenu?.({event:_})};return<div ref={x}class={Os("solid-flow__container solid-flow__pane",{selection:w(),dragging:o.dragging,draggable:e.panOnDrag===!0||Array.isArray(e.panOnDrag)&&e.panOnDrag.includes(0)})}onClick={_=>I()?void 0:D(_)}onPointerDown={_=>I()?k(_):void 0}onPointerMove={_=>I()?R(_):void 0}onPointerUp={_=>I()?Y(_):void 0}onContextMenu={H}>
-      {e.children}
-    </div>};import zs from"clsx";import{mergeProps as Rs,splitProps as As}from"solid-js";var Pe=e=>{let{store:o}=z(),t=Rs({position:"top-right",style:{}},e),[N,S]=As(t,["class","position","style","children"]);return<div class={zs(["solid-flow__panel",...N.position.split("-"),N.class])}style={{"pointer-events":o.selectionRectMode?"none":void 0,...N.style}}{...S}>
-      {N.children}
-    </div>};var Go=e=>{let{store:o}=z();return<div class="solid-flow__container solid-flow__viewport xyflow__viewport"style={{transform:`translate(${o.viewport.x}px, ${o.viewport.y}px) scale(${o.viewport.zoom})`}}>
-      {e.children}
-    </div>};import{Show as _s}from"solid-js";import{Portal as Ls}from"solid-js/web";var Hs=e=>{let{store:o}=z();return<_s when={o.domNode}>
-      {t=><Ls mount={t().querySelector(".solid-flow__viewport-portal")??void 0}>
-          {e.children}
-        </Ls>}
-    </_s>};import{XYPanZoom as Bs}from"@xyflow/system";import{batch as Vs,createEffect as Ks,onMount as Xs}from"solid-js";var Qo=e=>{let o,{store:t,actions:N}=z(),S=()=>e.initialViewport||{x:0,y:0,zoom:1},P=()=>t.panActivationKeyPressed||e.panOnDrag,x=()=>t.panActivationKeyPressed||e.panOnScroll,b=C=>{let[T,v,E]=C;N.setViewport({x:T,y:v,zoom:E})};return Xs(()=>{let C=Bs({domNode:o,minZoom:t.minZoom,maxZoom:t.maxZoom,translateExtent:t.translateExtent,viewport:S(),paneClickDistance:e.paneClickDistance,onDraggingChange:N.setDragging,onPanZoomStart:e.onMoveStart,onPanZoom:e.onMove,onPanZoomEnd:e.onMoveEnd}),T=C.getViewport();(S().x!==T.x||S().y!==T.y||S().zoom!==T.zoom)&&b([T.x,T.y,T.zoom]),Vs(()=>{N.setViewport(T),N.setPanZoom(C)}),e.onViewportInitialized?.(),Ks(()=>{C.update({lib:t.lib,zoomActivationKeyPressed:t.zoomActivationKeyPressed,noPanClassName:t.noPanClass,noWheelClassName:t.noWheelClass,userSelectionActive:!!t.selectionRect,panOnScrollSpeed:.5,panOnDrag:P(),panOnScroll:x(),zoomOnScroll:e.zoomOnScroll,zoomOnDoubleClick:e.zoomOnDoubleClick,zoomOnPinch:e.zoomOnPinch,panOnScrollMode:e.panOnScrollMode,preventScrolling:typeof e.preventScrolling=="boolean"?e.preventScrolling:!0,onTransformChange:b})})}),<div ref={o}class="solid-flow__container solid-flow__zoom">
-      {e.children}
-    </div>};import{getBezierPath as Fs,getConnectionStatus as Ys,getSmoothStepPath as Ws,getStraightPath as Zs}from"@xyflow/system";import $s from"clsx";import{Show as Sn}from"solid-js";var Us=e=>{let{store:o}=z(),t=()=>Ys(o.connection.isValid);return<Sn when={o.connection.inProgress}>
-      <svg class="solid-flow__container solid-flow__connectionline"width={o.width}height={o.height}style={e.containerStyle}>
-        <g class={$s(["solid-flow__connection",t()])}>
-          <Sn when={e.component}fallback={<Js style={e.style}/>}>
-            {N=>{let S=N();return<S connectionLineType={o.connectionLineType}connectionLineStyle={e.style}fromNode={o.connection.fromNode}fromHandle={o.connection.fromHandle}fromX={o.connection.from.x}fromY={o.connection.from.y}toX={o.connection.to.x}toY={o.connection.to.y}fromPosition={o.connection.fromPosition}toPosition={o.connection.toPosition}connectionStatus={t()}toNode={o.connection.toNode}toHandle={o.connection.toHandle}/>}}
-          </Sn>
+    </Show8>;
+};
+
+// src/components/container/EdgeRenderer.tsx
+var EdgeRenderer = (props) => {
+  const { store } = useInternalSolidFlow();
+  return <div class="solid-flow__edges">
+      <MarkerDefinition />
+
+      <For2 each={store.visibleEdgeIds}>
+        {(edgeId) => {
+    return <EdgeWrapper
+      edgeId={edgeId}
+      onEdgeClick={props.onEdgeClick}
+      onEdgeContextMenu={props.onEdgeContextMenu}
+      onEdgePointerEnter={props.onEdgePointerEnter}
+      onEdgePointerLeave={props.onEdgePointerLeave}
+    />;
+  }}
+      </For2>
+    </div>;
+};
+
+// src/components/container/NodeRenderer.tsx
+import { For as For3, onCleanup as onCleanup3 } from "solid-js";
+var NodeRenderer = (props) => {
+  const { actions, store } = useInternalSolidFlow();
+  const resizeObserver = new ResizeObserver((entries) => {
+    actions.requestUpdateNodeInternals(
+      entries.map((entry) => {
+        const id = entry.target.getAttribute("data-id");
+        return [
+          id,
+          {
+            id,
+            nodeElement: entry.target,
+            force: true
+          }
+        ];
+      })
+    );
+  });
+  onCleanup3(() => {
+    resizeObserver.disconnect();
+  });
+  return <div class="solid-flow__container solid-flow__nodes">
+      <For3 each={store.visibleNodeIds}>
+        {(nodeId) => {
+    return <NodeWrapper
+      nodeId={nodeId}
+      resizeObserver={resizeObserver}
+      nodeClickDistance={props.nodeClickDistance}
+      onNodeClick={props.onNodeClick}
+      onNodePointerEnter={props.onNodePointerEnter}
+      onNodePointerMove={props.onNodePointerMove}
+      onNodePointerLeave={props.onNodePointerLeave}
+      onNodeDrag={props.onNodeDrag}
+      onNodeDragStart={props.onNodeDragStart}
+      onNodeDragStop={props.onNodeDragStop}
+      onNodeContextMenu={props.onNodeContextMenu}
+    />;
+  }}
+      </For3>
+    </div>;
+};
+
+// src/components/container/Pane.tsx
+import { getEventPosition, getNodesInside as getNodesInside3, SelectionMode } from "@xyflow/system";
+import clsx7 from "clsx";
+import { batch as batch3 } from "solid-js";
+import { produce as produce2 } from "solid-js/store";
+var isSetEqual = (a, b) => {
+  if (a.size !== b.size) return false;
+  for (const item of a) {
+    if (!b.has(item)) {
+      return false;
+    }
+  }
+  return true;
+};
+var Pane = (props) => {
+  const { store, nodeLookup, edgeLookup, connectionLookup, actions } = useInternalSolidFlow();
+  let container;
+  let containerBounds = null;
+  let selectionInProgress = false;
+  let selectedNodeIds = /* @__PURE__ */ new Set();
+  let selectedEdgeIds = /* @__PURE__ */ new Set();
+  const _panOnDrag = () => store.panActivationKeyPressed || props.panOnDrag;
+  const isSelecting = () => store.selectionKeyPressed || store.selectionRect || props.selectionOnDrag && _panOnDrag() !== true;
+  const hasActiveSelection = () => store.elementsSelectable && (isSelecting() || store.selectionRectMode === "user");
+  const onClick = (event) => {
+    if (event.target !== container) return;
+    if (selectionInProgress) {
+      selectionInProgress = false;
+      return;
+    }
+    props.onPaneClick?.({ event });
+    batch3(() => {
+      actions.unselectNodesAndEdges();
+      actions.setSelectionRectMode(void 0);
+    });
+  };
+  const onPointerDown = (event) => {
+    containerBounds = container?.getBoundingClientRect() ?? null;
+    if (!store.elementsSelectable || !isSelecting() || event.button !== 0 || event.target !== container || !containerBounds) {
+      return;
+    }
+    event.target?.setPointerCapture?.(event.pointerId);
+    const { x, y } = getEventPosition(event, containerBounds);
+    batch3(() => {
+      actions.unselectNodesAndEdges();
+      actions.setSelectionRect({
+        width: 0,
+        height: 0,
+        startX: x,
+        startY: y,
+        x,
+        y
+      });
+    });
+  };
+  const onPointerMove = (event) => {
+    if (!isSelecting() || !containerBounds || !store.selectionRect) {
+      return;
+    }
+    selectionInProgress = true;
+    const mousePos = getEventPosition(event, containerBounds);
+    const { startX = 0, startY = 0 } = store.selectionRect;
+    const nextUserSelectRect = {
+      ...store.selectionRect,
+      x: mousePos.x < startX ? mousePos.x : startX,
+      y: mousePos.y < startY ? mousePos.y : startY,
+      width: Math.abs(mousePos.x - startX),
+      height: Math.abs(mousePos.y - startY)
+    };
+    const prevSelectedNodeIds = selectedNodeIds;
+    const prevSelectedEdgeIds = selectedEdgeIds;
+    selectedNodeIds = new Set(
+      getNodesInside3(
+        nodeLookup,
+        nextUserSelectRect,
+        store.transform,
+        store.selectionMode === SelectionMode.Partial,
+        true
+      ).map((n) => n.id)
+    );
+    const edgesSelectable = store.defaultEdgeOptions.selectable ?? true;
+    selectedEdgeIds = /* @__PURE__ */ new Set();
+    for (const nodeId of selectedNodeIds) {
+      const connections = connectionLookup.get(nodeId);
+      if (!connections) continue;
+      for (const { edgeId } of connections.values()) {
+        const edge = edgeLookup.get(edgeId);
+        if (edge && (edge.selectable ?? edgesSelectable)) {
+          selectedEdgeIds.add(edgeId);
+        }
+      }
+    }
+    batch3(() => {
+      if (!isSetEqual(prevSelectedNodeIds, selectedNodeIds)) {
+        const selectionMap = /* @__PURE__ */ new Map();
+        actions.setNodes(
+          (node) => {
+            const isSelected = selectedNodeIds.has(node.id);
+            selectionMap.set(node.id, isSelected);
+            return !!node.selected !== isSelected;
+          },
+          produce2((node) => {
+            node.selected = selectionMap.get(node.id);
+          })
+        );
+      }
+      if (!isSetEqual(prevSelectedEdgeIds, selectedEdgeIds)) {
+        const selectionMap = /* @__PURE__ */ new Map();
+        actions.setEdges(
+          (edge) => {
+            const isSelected = selectedEdgeIds.has(edge.id);
+            selectionMap.set(edge.id, isSelected);
+            return !!edge.selected !== isSelected;
+          },
+          produce2((edge) => {
+            edge.selected = selectionMap.get(edge.id);
+          })
+        );
+      }
+      actions.setSelectionRectMode("user");
+      actions.setSelectionRect(nextUserSelectRect);
+    });
+  };
+  const onPointerUp = (event) => {
+    if (event.button !== 0) return;
+    event.target?.releasePointerCapture?.(event.pointerId);
+    if (!isSelecting() && store.selectionRectMode === "user" && event.target === container) {
+      onClick(event);
+    }
+    batch3(() => {
+      actions.setSelectionRect(void 0);
+      if (selectedNodeIds.size > 0) {
+        actions.setSelectionRectMode("nodes");
+      }
+    });
+    if (store.selectionKeyPressed) {
+      selectionInProgress = false;
+    }
+    props.onSelectionEnd?.(event);
+  };
+  const onContextMenu = (event) => {
+    if (event.target !== container) return;
+    const result = _panOnDrag();
+    if (Array.isArray(result) && result.includes(2)) {
+      event.preventDefault();
+      return;
+    }
+    props.onPaneContextMenu?.({ event });
+  };
+  return <div
+    ref={container}
+    class={clsx7("solid-flow__container solid-flow__pane", {
+      selection: isSelecting(),
+      dragging: store.dragging,
+      draggable: props.panOnDrag === true || Array.isArray(props.panOnDrag) && props.panOnDrag.includes(0)
+    })}
+    onClick={(e) => hasActiveSelection() ? void 0 : onClick(e)}
+    onPointerDown={(e) => hasActiveSelection() ? onPointerDown(e) : void 0}
+    onPointerMove={(e) => hasActiveSelection() ? onPointerMove(e) : void 0}
+    onPointerUp={(e) => hasActiveSelection() ? onPointerUp(e) : void 0}
+    onContextMenu={onContextMenu}
+  >
+      {props.children}
+    </div>;
+};
+
+// src/components/container/Panel.tsx
+import clsx8 from "clsx";
+import { mergeProps as mergeProps10, splitProps as splitProps5 } from "solid-js";
+var Panel = (props) => {
+  const { store } = useInternalSolidFlow();
+  const _props = mergeProps10(
+    {
+      position: "top-right",
+      style: {}
+    },
+    props
+  );
+  const [local, rest] = splitProps5(_props, ["class", "position", "style", "children"]);
+  return <div
+    class={clsx8(["solid-flow__panel", ...local.position.split("-"), local.class])}
+    style={{
+      "pointer-events": store.selectionRectMode ? "none" : void 0,
+      ...local.style
+    }}
+    {...rest}
+  >
+      {local.children}
+    </div>;
+};
+
+// src/components/container/Viewport.tsx
+var Viewport = (props) => {
+  const { store } = useInternalSolidFlow();
+  return <div
+    class="solid-flow__container solid-flow__viewport xyflow__viewport"
+    style={{
+      transform: `translate(${store.viewport.x}px, ${store.viewport.y}px) scale(${store.viewport.zoom})`
+    }}
+  >
+      {props.children}
+    </div>;
+};
+
+// src/components/container/ViewportPortal.tsx
+import { Show as Show9 } from "solid-js";
+import { Portal as Portal2 } from "solid-js/web";
+var ViewportPortal = (props) => {
+  const { store } = useInternalSolidFlow();
+  return <Show9 when={store.domNode}>
+      {(domNode) => <Portal2 mount={domNode().querySelector(".solid-flow__viewport-portal") ?? void 0}>
+          {props.children}
+        </Portal2>}
+    </Show9>;
+};
+
+// src/components/container/Zoom.tsx
+import {
+  XYPanZoom
+} from "@xyflow/system";
+import { batch as batch4, createEffect as createEffect5, onMount as onMount2 } from "solid-js";
+var Zoom = (props) => {
+  let ref;
+  const { store, actions } = useInternalSolidFlow();
+  const viewPort = () => props.initialViewport || { x: 0, y: 0, zoom: 1 };
+  const panOnDrag = () => store.panActivationKeyPressed || props.panOnDrag;
+  const panOnScroll = () => store.panActivationKeyPressed || props.panOnScroll;
+  const onTransformChange = (transform) => {
+    const [x, y, zoom] = transform;
+    actions.setViewport({ x, y, zoom });
+  };
+  onMount2(() => {
+    const panZoomInstance = XYPanZoom({
+      domNode: ref,
+      minZoom: store.minZoom,
+      maxZoom: store.maxZoom,
+      translateExtent: store.translateExtent,
+      viewport: viewPort(),
+      paneClickDistance: props.paneClickDistance,
+      onDraggingChange: actions.setDragging,
+      onPanZoomStart: props.onMoveStart,
+      onPanZoom: props.onMove,
+      onPanZoomEnd: props.onMoveEnd
+    });
+    const vp = panZoomInstance.getViewport();
+    if (viewPort().x !== vp.x || viewPort().y !== vp.y || viewPort().zoom !== vp.zoom) {
+      onTransformChange([vp.x, vp.y, vp.zoom]);
+    }
+    batch4(() => {
+      actions.setViewport(vp);
+      actions.setPanZoom(panZoomInstance);
+    });
+    props.onViewportInitialized?.();
+    createEffect5(() => {
+      panZoomInstance.update({
+        lib: store.lib,
+        zoomActivationKeyPressed: store.zoomActivationKeyPressed,
+        noPanClassName: store.noPanClass,
+        noWheelClassName: store.noWheelClass,
+        userSelectionActive: !!store.selectionRect,
+        panOnScrollSpeed: 0.5,
+        panOnDrag: panOnDrag(),
+        panOnScroll: panOnScroll(),
+        zoomOnScroll: props.zoomOnScroll,
+        zoomOnDoubleClick: props.zoomOnDoubleClick,
+        zoomOnPinch: props.zoomOnPinch,
+        panOnScrollMode: props.panOnScrollMode,
+        preventScrolling: typeof props.preventScrolling === "boolean" ? props.preventScrolling : true,
+        onTransformChange
+      });
+    });
+  });
+  return <div ref={ref} class="solid-flow__container solid-flow__zoom">
+      {props.children}
+    </div>;
+};
+
+// src/components/graph/connection/ConnectionLine.tsx
+import {
+  getBezierPath as getBezierPath3,
+  getConnectionStatus,
+  getSmoothStepPath as getSmoothStepPath5,
+  getStraightPath as getStraightPath3
+} from "@xyflow/system";
+import clsx9 from "clsx";
+import { Show as Show10 } from "solid-js";
+var ConnectionLine = (props) => {
+  const { store } = useInternalSolidFlow();
+  const connectionStatus = () => getConnectionStatus(store.connection.isValid);
+  return <Show10 when={store.connection.inProgress}>
+      <svg
+    class="solid-flow__container solid-flow__connectionline"
+    width={store.width}
+    height={store.height}
+    style={props.containerStyle}
+  >
+        <g class={clsx9(["solid-flow__connection", connectionStatus()])}>
+          <Show10 when={props.component} fallback={<InternalConnectionLine style={props.style} />}>
+            {(CustomComponent) => {
+    const UserConnectionLine = CustomComponent();
+    return <UserConnectionLine
+      connectionLineType={store.connectionLineType}
+      connectionLineStyle={props.style}
+      fromNode={store.connection.fromNode}
+      fromHandle={store.connection.fromHandle}
+      fromX={store.connection.from.x}
+      fromY={store.connection.from.y}
+      toX={store.connection.to.x}
+      toY={store.connection.to.y}
+      fromPosition={store.connection.fromPosition}
+      toPosition={store.connection.toPosition}
+      connectionStatus={connectionStatus()}
+      toNode={store.connection.toNode}
+      toHandle={store.connection.toHandle}
+    />;
+  }}
+          </Show10>
         </g>
       </svg>
-    </Sn>},Js=e=>{let{store:o}=z(),t=()=>{if(!o.connection.inProgress)return;let N={sourceX:o.connection.from.x,sourceY:o.connection.from.y,sourcePosition:o.connection.fromPosition,targetX:o.connection.to.x,targetY:o.connection.to.y,targetPosition:o.connection.toPosition};switch(o.connectionLineType){case"default":{let[S]=Fs(N);return S}case"straight":{let[S]=Zs(N);return S}case"step":case"smoothstep":{let[S]=Ws({...N,borderRadius:o.connectionLineType==="step"?0:void 0});return S}}};return<path class="solid-flow__connection-path"fill="none"style={e.style}d={t()}/>},St=Us;import ed from"clsx";import{mergeProps as od,Show as Sd}from"solid-js";import Gs from"clsx";import{mergeProps as js}from"solid-js";var Nn=e=>{let o=js({radius:5},e);return<circle class={Gs("solid-flow__background-pattern","dots",o.class)}cx={o.radius}cy={o.radius}r={o.radius}/>};import{clsx as qs}from"clsx";import{mergeProps as Qs}from"solid-js";var Pn=e=>{let o=Qs({lineWidth:1},e);return<path stroke-width={o.lineWidth}d={`M${o.dimensions[0]/2} 0 V${o.dimensions[1]} M0 ${o.dimensions[1]/2} H${o.dimensions[0]}`}class={qs("solid-flow__background-pattern",o.variant,o.class)}/>};var Nd={dots:1,lines:1,cross:6},Pd=e=>{let o=od({variant:"dots",gap:20,size:1,lineWidth:1,style:{}},e),{store:t}=z(),N=()=>o.variant==="dots",S=()=>o.variant==="cross",P=()=>`background-pattern-${t.id}-${o.id??""}`,x=()=>(o.size??Nd[o.variant])*t.viewport.zoom,b=()=>Array.isArray(o.gap)?o.gap:[o.gap,o.gap],C=()=>[b()[0]*t.viewport.zoom||1,b()[1]*t.viewport.zoom||1],T=()=>S()?[x(),x()]:C(),v=()=>N()?[x()/2,x()/2]:[T()[0]/2,T()[1]/2];return<svg data-testid="solid-flow__background"class={ed("solid-flow__container solid-flow__background",o.class)}style={{"--xy-background-color-props":o.bgColor,"--xy-background-pattern-color-props":o.patternColor,...o.style}}>
-      <pattern id={P()}x={t.viewport.x%C()[0]}y={t.viewport.y%C()[1]}width={C()[0]}height={C()[1]}patternUnits="userSpaceOnUse"patternTransform={`translate(-${v()[0]},-${v()[1]})`}>
-        <Sd when={!N()}fallback={<Nn radius={x()/2}class={o.patternClass}/>}>
-          <Pn class={o.patternClass}dimensions={T()}variant={o.variant}lineWidth={o.lineWidth}/>
-        </Sd>
+    </Show10>;
+};
+var InternalConnectionLine = (props) => {
+  const { store } = useInternalSolidFlow();
+  const path = () => {
+    if (!store.connection.inProgress) return void 0;
+    const pathParams = {
+      sourceX: store.connection.from.x,
+      sourceY: store.connection.from.y,
+      sourcePosition: store.connection.fromPosition,
+      targetX: store.connection.to.x,
+      targetY: store.connection.to.y,
+      targetPosition: store.connection.toPosition
+    };
+    switch (store.connectionLineType) {
+      case "default": {
+        const [path2] = getBezierPath3(pathParams);
+        return path2;
+      }
+      case "straight": {
+        const [path2] = getStraightPath3(pathParams);
+        return path2;
+      }
+      case "step":
+      case "smoothstep": {
+        const [path2] = getSmoothStepPath5({
+          ...pathParams,
+          borderRadius: store.connectionLineType === "step" ? 0 : void 0
+        });
+        return path2;
+      }
+    }
+  };
+  return <path class="solid-flow__connection-path" fill="none" style={props.style} d={path()} />;
+};
+var ConnectionLine_default = ConnectionLine;
+
+// src/components/graph/plugins/background/Background.tsx
+import clsx12 from "clsx";
+import { mergeProps as mergeProps13, Show as Show11 } from "solid-js";
+
+// src/components/graph/plugins/background/DotPattern.tsx
+import clsx10 from "clsx";
+import { mergeProps as mergeProps11 } from "solid-js";
+var DotPattern = (props) => {
+  const _props = mergeProps11({ radius: 5 }, props);
+  return <circle
+    class={clsx10("solid-flow__background-pattern", "dots", _props.class)}
+    cx={_props.radius}
+    cy={_props.radius}
+    r={_props.radius}
+  />;
+};
+
+// src/components/graph/plugins/background/LinePattern.tsx
+import { clsx as clsx11 } from "clsx";
+import { mergeProps as mergeProps12 } from "solid-js";
+var LinePattern = (props) => {
+  const _props = mergeProps12({ lineWidth: 1 }, props);
+  return <path
+    stroke-width={_props.lineWidth}
+    d={`M${_props.dimensions[0] / 2} 0 V${_props.dimensions[1]} M0 ${_props.dimensions[1] / 2} H${_props.dimensions[0]}`}
+    class={clsx11("solid-flow__background-pattern", _props.variant, _props.class)}
+  />;
+};
+
+// src/components/graph/plugins/background/Background.tsx
+var DEFAULT_SIZE = {
+  dots: 1,
+  lines: 1,
+  cross: 6
+};
+var Background = (props) => {
+  const _props = mergeProps13(
+    {
+      variant: "dots",
+      gap: 20,
+      size: 1,
+      lineWidth: 1,
+      style: {}
+    },
+    props
+  );
+  const { store } = useInternalSolidFlow();
+  const isDots = () => _props.variant === "dots";
+  const isCross = () => _props.variant === "cross";
+  const patternId = () => `background-pattern-${store.id}-${_props.id ?? ""}`;
+  const scaledSize = () => (_props.size ?? DEFAULT_SIZE[_props.variant]) * store.viewport.zoom;
+  const gapXY = () => Array.isArray(_props.gap) ? _props.gap : [_props.gap, _props.gap];
+  const scaledGap = () => [gapXY()[0] * store.viewport.zoom || 1, gapXY()[1] * store.viewport.zoom || 1];
+  const patternDimensions = () => isCross() ? [scaledSize(), scaledSize()] : scaledGap();
+  const patternOffset = () => isDots() ? [scaledSize() / 2, scaledSize() / 2] : [patternDimensions()[0] / 2, patternDimensions()[1] / 2];
+  return <svg
+    data-testid="solid-flow__background"
+    class={clsx12("solid-flow__container solid-flow__background", _props.class)}
+    style={{
+      "--xy-background-color-props": _props.bgColor,
+      "--xy-background-pattern-color-props": _props.patternColor,
+      ..._props.style
+    }}
+  >
+      <pattern
+    id={patternId()}
+    x={store.viewport.x % scaledGap()[0]}
+    y={store.viewport.y % scaledGap()[1]}
+    width={scaledGap()[0]}
+    height={scaledGap()[1]}
+    patternUnits="userSpaceOnUse"
+    patternTransform={`translate(-${patternOffset()[0]},-${patternOffset()[1]})`}
+  >
+        <Show11
+    when={!isDots()}
+    fallback={<DotPattern radius={scaledSize() / 2} class={_props.patternClass} />}
+  >
+          <LinePattern
+    class={_props.patternClass}
+    dimensions={patternDimensions()}
+    variant={_props.variant}
+    lineWidth={_props.lineWidth}
+  />
+        </Show11>
       </pattern>
-      <rect x="0"y="0"width="100%"height="100%"fill={`url(#${P()})`}/>
-    </svg>};import bd from"clsx";import{splitProps as Ed}from"solid-js";var Me=e=>{let[o,t]=Ed(e,["class","bgColor","bgColorHover","color","colorHover","borderColor","onClick","children"]),N=()=>Object.entries({"--xy-controls-button-background-color-props":o.bgColor,"--xy-controls-button-background-color-hover-props":o.bgColorHover,"--xy-controls-button-color-props":o.color,"--xy-controls-button-color-hover-props":o.colorHover,"--xy-controls-button-border-color-props":o.borderColor}).filter(([S,P])=>P!==void 0).reduce((S,[P,x])=>(S[P]=x,S),{});return<button type="button"class={bd("solid-flow__controls-button",o.class)}onClick={S=>o.onClick?.(S)}style={N()}{...t}>
-      {o.children}
-    </button>};import xd from"clsx";import{batch as wd,mergeProps as Cd,Show as Qe,splitProps as Td}from"solid-js";var Nt=()=><svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 32 30">
-    <path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z"/>
-  </svg>;var Pt=()=><svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 25 32">
-    <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z"/>
-  </svg>;var Et=()=><svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 32 5">
-    <path d="M0 0h32v4.2H0z"/>
-  </svg>;var Ct=()=><svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 32 32">
-    <path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"/>
-  </svg>;var Tt=()=><svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 25 32">
-    <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z"/>
-  </svg>;var vd=e=>{let{store:o,actions:t}=z(),N=Cd({position:"bottom-left",showZoom:!0,showFitView:!0,showLock:!0,orientation:"vertical"},e),[S,P]=Td(N,["class","position","showZoom","showFitView","showLock","orientation","fitViewOptions","beforeControls","afterControls","buttonBgColor","buttonBgColorHover","buttonColor","buttonColorHover","buttonBorderColor","style","children"]),x=()=>o.viewport.zoom<=o.minZoom,b=()=>o.viewport.zoom>=o.maxZoom,C=()=>o.nodesDraggable||o.nodesConnectable||o.elementsSelectable,T=()=>{t.zoomIn()},v=()=>{t.zoomOut()},E=()=>{t.fitView(S.fitViewOptions)},w=()=>{let D=!C();wd(()=>{t.setNodesDraggable(D),t.setNodesConnectable(D),t.setElementsSelectable(D)})},I=()=>({bgColor:S.buttonBgColor,bgColorHover:S.buttonBgColorHover,color:S.buttonColor,colorHover:S.buttonColorHover,borderColor:S.buttonBorderColor});return<Pe class={xd(["solid-flow__controls",S.orientation,S.class])}position={S.position}data-testid="solid-flow__controls"aria-label={o.ariaLabelConfig["controls.ariaLabel"]}style={S.style}{...P}>
-      {S.beforeControls}
-      <Qe when={S.showZoom}>
+      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId()})`} />
+    </svg>;
+};
+
+// src/components/graph/plugins/controls/ControlButton.tsx
+import clsx13 from "clsx";
+import { splitProps as splitProps6 } from "solid-js";
+var ControlButton = (props) => {
+  const [local, rest] = splitProps6(props, [
+    "class",
+    "bgColor",
+    "bgColorHover",
+    "color",
+    "colorHover",
+    "borderColor",
+    "onClick",
+    "children"
+  ]);
+  const style = () => Object.entries({
+    "--xy-controls-button-background-color-props": local.bgColor,
+    "--xy-controls-button-background-color-hover-props": local.bgColorHover,
+    "--xy-controls-button-color-props": local.color,
+    "--xy-controls-button-color-hover-props": local.colorHover,
+    "--xy-controls-button-border-color-props": local.borderColor
+  }).filter(([_, value]) => value !== void 0).reduce((acc, [key, value]) => {
+    acc[key] = value;
+    return acc;
+  }, {});
+  return <button
+    type="button"
+    class={clsx13("solid-flow__controls-button", local.class)}
+    onClick={(e) => local.onClick?.(e)}
+    style={style()}
+    {...rest}
+  >
+      {local.children}
+    </button>;
+};
+
+// src/components/graph/plugins/controls/Controls.tsx
+import clsx14 from "clsx";
+import { batch as batch5, mergeProps as mergeProps14, Show as Show12, splitProps as splitProps7 } from "solid-js";
+
+// src/components/graph/plugins/controls/icons/Fit.tsx
+var Fit = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30">
+    <path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" />
+  </svg>;
+
+// src/components/graph/plugins/controls/icons/Lock.tsx
+var Lock = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
+    <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" />
+  </svg>;
+
+// src/components/graph/plugins/controls/icons/Minus.tsx
+var Minus = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5">
+    <path d="M0 0h32v4.2H0z" />
+  </svg>;
+
+// src/components/graph/plugins/controls/icons/Plus.tsx
+var Plus = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z" />
+  </svg>;
+
+// src/components/graph/plugins/controls/icons/Unlock.tsx
+var Unlock = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
+    <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z" />
+  </svg>;
+
+// src/components/graph/plugins/controls/Controls.tsx
+var Controls = (props) => {
+  const { store, actions } = useInternalSolidFlow();
+  const _props = mergeProps14(
+    {
+      position: "bottom-left",
+      showZoom: true,
+      showFitView: true,
+      showLock: true,
+      orientation: "vertical"
+    },
+    props
+  );
+  const [local, rest] = splitProps7(_props, [
+    "class",
+    "position",
+    "showZoom",
+    "showFitView",
+    "showLock",
+    "orientation",
+    "fitViewOptions",
+    "beforeControls",
+    "afterControls",
+    "buttonBgColor",
+    "buttonBgColorHover",
+    "buttonColor",
+    "buttonColorHover",
+    "buttonBorderColor",
+    "style",
+    "children"
+  ]);
+  const getMinZoomReached = () => store.viewport.zoom <= store.minZoom;
+  const getMaxZoomReached = () => store.viewport.zoom >= store.maxZoom;
+  const getIsInteractive = () => store.nodesDraggable || store.nodesConnectable || store.elementsSelectable;
+  const onZoomInHandler = () => {
+    void actions.zoomIn();
+  };
+  const onZoomOutHandler = () => {
+    void actions.zoomOut();
+  };
+  const onFitViewHandler = () => {
+    void actions.fitView(local.fitViewOptions);
+  };
+  const onToggleInteractivity = () => {
+    const newValue = !getIsInteractive();
+    batch5(() => {
+      actions.setNodesDraggable(newValue);
+      actions.setNodesConnectable(newValue);
+      actions.setElementsSelectable(newValue);
+    });
+  };
+  const buttonProps = () => ({
+    bgColor: local.buttonBgColor,
+    bgColorHover: local.buttonBgColorHover,
+    color: local.buttonColor,
+    colorHover: local.buttonColorHover,
+    borderColor: local.buttonBorderColor
+  });
+  return <Panel
+    class={clsx14(["solid-flow__controls", local.orientation, local.class])}
+    position={local.position}
+    data-testid="solid-flow__controls"
+    aria-label={store.ariaLabelConfig["controls.ariaLabel"]}
+    style={local.style}
+    {...rest}
+  >
+      {local.beforeControls}
+      <Show12 when={local.showZoom}>
         <>
-          <Me onClick={T}class="solid-flow__controls-zoomin"title={o.ariaLabelConfig["controls.zoomIn.ariaLabel"]}aria-label={o.ariaLabelConfig["controls.zoomIn.ariaLabel"]}disabled={b()}{...I()}>
-            <Ct/>
-          </Me>
-          <Me onClick={v}class="solid-flow__controls-zoomout"title={o.ariaLabelConfig["controls.zoomOut.ariaLabel"]}aria-label={o.ariaLabelConfig["controls.zoomOut.ariaLabel"]}disabled={x()}{...I()}>
-            <Et/>
-          </Me>
+          <ControlButton
+    onClick={onZoomInHandler}
+    class="solid-flow__controls-zoomin"
+    title={store.ariaLabelConfig["controls.zoomIn.ariaLabel"]}
+    aria-label={store.ariaLabelConfig["controls.zoomIn.ariaLabel"]}
+    disabled={getMaxZoomReached()}
+    {...buttonProps()}
+  >
+            <Plus />
+          </ControlButton>
+          <ControlButton
+    onClick={onZoomOutHandler}
+    class="solid-flow__controls-zoomout"
+    title={store.ariaLabelConfig["controls.zoomOut.ariaLabel"]}
+    aria-label={store.ariaLabelConfig["controls.zoomOut.ariaLabel"]}
+    disabled={getMinZoomReached()}
+    {...buttonProps()}
+  >
+            <Minus />
+          </ControlButton>
         </>
-      </Qe>
-      <Qe when={S.showFitView}>
-        <Me class="solid-flow__controls-fitview"onClick={E}title={o.ariaLabelConfig["controls.fitView.ariaLabel"]}aria-label={o.ariaLabelConfig["controls.fitView.ariaLabel"]}{...I()}>
-          <Nt/>
-        </Me>
-      </Qe>
-      <Qe when={S.showLock}>
-        <Me class="solid-flow__controls-interactive"onClick={w}title={o.ariaLabelConfig["controls.interactive.ariaLabel"]}aria-label={o.ariaLabelConfig["controls.interactive.ariaLabel"]}{...I()}>
-          <Qe when={C()}fallback={<Pt/>}>
-            <Tt/>
-          </Qe>
-        </Me>
-      </Qe>
-      {S.children}
-      {S.afterControls}
-    </Pe>};import{getBoundsOfRects as kd,getInternalNodesBounds as Dd,getNodeDimensions as Od,nodeHasDimensions as zd,XYMinimap as Rd}from"@xyflow/system";import Ad from"clsx";import{createEffect as _d,createMemo as xn,createSignal as Ld,Index as Hd,mergeProps as Bd,onCleanup as Vd,onMount as Kd,Show as Cn,splitProps as Xd}from"solid-js";import Md from"clsx";import{mergeProps as Id}from"solid-js";var En=e=>{let o=Id({borderRadius:5,width:0,height:0},e),t=()=>Object.entries({fill:o.color,stroke:o.strokeColor,"stroke-width":o.strokeWidth}).filter(([N,S])=>S!==void 0).reduce((N,[S,P])=>(N[S]=P,N),{});return<rect class={Md("solid-flow__minimap-node",{selected:o.selected},o.class)}x={o.x}y={o.y}rx={o.borderRadius}ry={o.borderRadius}width={o.width}height={o.height}shape-rendering={o.shapeRendering}style={t()}/>};var vt=e=>e instanceof Function?e:()=>e,Fd=e=>{let{store:o,nodeLookup:t}=z(),N=Bd({position:"bottom-right",nodeClass:"",nodeStrokeColor:"transparent",pannable:!0,zoomable:!0,width:200,height:150,nodeBorderRadius:5,nodeStrokeWidth:2,style:{}},e),[S,P]=Xd(N,["class","style","position","nodeClass","nodeStrokeColor","nodeColor","pannable","zoomable","inversePan","zoomStep","bgColor","width","height","maskColor","maskStrokeColor","maskStrokeWidth","nodeBorderRadius","nodeStrokeWidth"]),x=()=>S.nodeColor===void 0?void 0:vt(S.nodeColor),b=()=>vt(S.nodeStrokeColor),C=()=>vt(S.nodeClass),T=()=>typeof window>"u"||window.chrome?"crispEdges":"geometricPrecision",v=xn(()=>`solid-flow__minimap-desc-${o.id}`),E=()=>({x:-o.viewport.x/o.viewport.zoom,y:-o.viewport.y/o.viewport.zoom,width:o.width/o.viewport.zoom,height:o.height/o.viewport.zoom}),w=()=>{let O=E();return t.size>0?kd(Dd(t),O):O},I=()=>w().width/S.width,D=()=>w().height/S.height,k=()=>Math.max(I(),D()),R=()=>k()*S.width,Y=()=>k()*S.height,H=()=>5*k(),_=()=>{let O=w();return O.x-(R()-O.width)/2-H()},$=()=>{let O=w();return O.y-(Y()-O.height)/2-H()},ee=()=>R()+H()*2,ie=()=>Y()+H()*2,de=()=>S.maskStrokeWidth?S.maskStrokeWidth*k():void 0,U=[],G=()=>{let O=o.nodes.map(K=>K.id),F=new Set(O);return(U.length!==O.length||!U.every(K=>F.has(K)))&&(U=O),U};return<Pe position={S.position}data-testid="solid-flow__minimap"class={Ad(["solid-flow__minimap",S.class])}style={{"--xy-minimap-background-color-props":S.bgColor,...S.style}}{...P}>
-      <Cn when={o.panZoom}>
-        {O=>{let[F,K]=Ld();return Kd(()=>{let Z=Rd({domNode:F(),panZoom:O(),getTransform:()=>o.transform,getViewScale:k});_d(()=>{Z.update({translateExtent:o.translateExtent,width:o.width,height:o.height,inversePan:S.inversePan,zoomStep:S.zoomStep,pannable:S.pannable,zoomable:S.zoomable})}),Vd(()=>{Z.destroy()})}),<svg ref={K}width={S.width}height={S.height}viewBox={`${_()} ${$()} ${ee()} ${ie()}`}class="solid-flow__minimap-svg"role="img"aria-labelledby={v()}style={{"--xy-minimap-mask-background-color-props":S.maskColor,"--xy-minimap-mask-stroke-color-props":S.maskStrokeColor,"--xy-minimap-mask-stroke-width-props":de()}}>
-              <title id={v()}>{o.ariaLabelConfig["minimap.ariaLabel"]}</title>
-              <Hd each={G()}>
-                {Z=>{let te=xn(()=>t.get(Z())),Ot=()=>!!(te()&&zd(te())&&!te().hidden);return<Cn when={Ot()&&Od(te())}>
-                      {Le=><En x={te().internals.positionAbsolute.x}y={te().internals.positionAbsolute.y}borderRadius={S.nodeBorderRadius}strokeWidth={S.nodeStrokeWidth}shapeRendering={T()}width={Le().width}height={Le().height}selected={te().selected}color={x()?.call(null,te())}strokeColor={b().call(null,te())}class={C().call(null,te())}/>}
-                    </Cn>}}
-              </Hd>
-              <path class="solid-flow__minimap-mask"d={`M${_()-H()},${$()-H()}h${ee()+H()*2}v${ie()+H()*2}h${-ee()-H()*2}z
-            M${E().x},${E().y}h${E().width}v${E().height}h${-E().width}z`}fill-rule="evenodd"pointer-events="none"/>
-            </svg>}}
-      </Cn>
-    </Pe>};import{XY_RESIZER_HANDLE_POSITIONS as qd,XY_RESIZER_LINE_POSITIONS as Qd}from"@xyflow/system";import{For as Tn,mergeProps as ea,Show as Sa,splitProps as Na}from"solid-js";import{XYResizer as Yd}from"@xyflow/system";import Wd from"clsx";import{createEffect as Zd,mergeProps as $d,onCleanup as Ud,onMount as Jd,splitProps as Gd}from"solid-js";import{produce as jd}from"solid-js/store";var So=e=>{let o=$d({variant:"handle",minWidth:10,minHeight:10,maxWidth:Number.MAX_VALUE,maxHeight:Number.MAX_VALUE,keepAspectRatio:!1,autoScale:!0,style:{}},e),[t,N]=Gd(o,["nodeId","variant","position","minWidth","minHeight","maxWidth","maxHeight","keepAspectRatio","autoScale","onResizeStart","onResize","onResizeEnd","shouldResize","class","children","color","style"]),S,{store:P,nodeLookup:x,actions:b}=z(),C=Oe(),T=()=>t.nodeId??C(),v=()=>t.variant==="line",E=()=>t.position??(v()?"right":"bottom-right"),w=()=>E().split("-");return Jd(()=>{let I=Yd({domNode:S,nodeId:T(),getStoreItems:()=>({nodeLookup:x,transform:P.transform,snapGrid:P.snapGrid,snapToGrid:!!P.snapGrid,nodeOrigin:P.nodeOrigin,paneDomNode:P.domNode}),onChange:(D,k)=>{let R=new Map,Y=D.x&&D.y?{x:D.x,y:D.y}:void 0;R.set(T(),{...D,position:Y});for(let H of k)R.set(H.id,{position:H.position});b.setNodes(H=>R.has(H.id),jd(H=>{let _=R.get(H.id);H.width=_.width,H.height=_.height,H.position={x:_.position?.x??H.position.x,y:_.position?.y??H.position.y}}))}});Zd(()=>{I.update({controlPosition:E(),boundaries:{minWidth:t.minWidth,minHeight:t.minHeight,maxWidth:t.maxWidth,maxHeight:t.maxHeight},keepAspectRatio:!!t.keepAspectRatio,onResizeStart:t.onResizeStart,onResize:t.onResize,onResizeEnd:t.onResizeEnd,shouldResize:t.shouldResize})}),Ud(()=>{I.destroy()})}),<div ref={S}class={Wd(["solid-flow__resize-control",t.variant,P.noDragClass,...w(),t.class])}style={{"border-color":v()?t.color:void 0,"background-color":v()?void 0:t.color,scale:v()||!t.autoScale?void 0:Math.max(1/P.viewport.zoom,1),...t.style}}{...N}>
-      {t.children}
-    </div>};var Pa=e=>{let o=ea({autoScale:!0,visible:!0},e),[t,N]=Na(e,["handleClass","handleStyle","lineClass","lineStyle"]);return<Sa when={o.visible}>
-      <Tn each={Qd}>
-        {S=><So variant="line"position={S}class={t.lineClass}style={t.lineStyle}{...N}/>}
-      </Tn>
-      <Tn each={qd}>
-        {S=><So position={S}class={t.handleClass}style={t.handleStyle}{...N}/>}
-      </Tn>
-    </Sa>};import{getNodeToolbarTransform as Ha}from"@xyflow/system";import{mergeProps as Ba,Show as Va,splitProps as Ka,useContext as Xa}from"solid-js";import{Portal as Fa}from"solid-js/web";function Vu(){let{store:e}=z();return()=>e.connection}function ba(){let{store:e}=z();return()=>e.nodes}function Ea(){let{store:e}=z();return()=>e.edges}function xa(){let{store:e}=z();return()=>e.viewport}import"@xyflow/system";import{batch as wa}from"solid-js";function Uu(){let{store:e,edgeLookup:o,actions:t}=z();return N=>{let S=o.get(N);if(!S)return;(S.selectable||e.elementsSelectable&&typeof S.selectable>"u")&&wa(()=>{t.setSelectionRect(void 0),t.setSelectionRectMode(void 0),S.selected?S.selected&&e.multiselectionKeyPressed&&t.unselectNodesAndEdges({nodes:[],edges:[S]}):t.addSelectedEdges([N])})}}function ju(e){let{nodeLookup:o}=z();return()=>o.get(e())}import{areConnectionMapsEqual as Ca}from"@xyflow/system";import{createEffect as Ta,createSignal as va,useContext as Ma}from"solid-js";var ny=e=>{let{connectionLookup:o}=z(),t=()=>{let T=Ma(Ne);return T?T():""},N=()=>e().handleId,S=()=>e().handleType,P=()=>e().id??t(),[x,b]=va([]),C=()=>`${P()}${S()?N()?`-${S()}-${N()}`:`-${S()}`:""}`;return Ta(T=>{let v=o.get(C());return Ca(v,T)||(T=v,b(Array.from(T?.values()??[]))),v}),x};import{shallowNodeData as Ia}from"@xyflow/system";import{createMemo as ka}from"solid-js";function ay(e){let{nodeLookup:o}=z(),t=[];return ka(()=>{let S=[],P=e();if(!P)return;let x=Array.isArray(P)?P:[P];for(let b of x){let C=o.get(b)?.internals.userNode;C&&S.push({id:C.id,type:C.type,data:C.data})}return Ia(S,t)||(t=S),Array.isArray(P)?S:S[0]})}import{evaluateAbsolutePosition as Da,getElementsToRemove as Oa,getNodesBounds as za,getOverlappingArea as vn,getViewportForBounds as Ra,isRectObject as Mn,nodeToRect as In,pointToRendererPoint as Aa,rendererPointToPoint as _a}from"@xyflow/system";import{batch as La}from"solid-js";import{unwrap as No}from"solid-js/store";function Po(){let{store:e,actions:o,nodeLookup:t,edgeLookup:N,connectionLookup:S}=z(),P=E=>{let w=wo(E)?E:t.get(E.id),I=w.parentId?Da(w.position,w.measured,w.parentId,t,e.nodeOrigin):w.position,D={...w,position:I,width:w.measured?.width??w.width,height:w.measured?.height??w.height};return In(D)},x=(E,w,I={replace:!1})=>{o.setNodes(D=>D.id===E,D=>{let k=typeof w=="function"?w(D):w;return I?.replace&&wo(k)?k:{...D,...k}})},b=(E,w,I={replace:!1})=>{o.setEdges(D=>D.id===E,D=>{let k=typeof w=="function"?w(D):w;return I.replace&&$t(k)?k:{...D,...k}})},C=E=>t.get(E),T=E=>{let w=Array.isArray(E)?E:[E];o.setNodes(I=>[...I,...w])},v=E=>{let w=Array.isArray(E)?E:[E];o.setEdges(I=>[...I,...w])};return{zoomIn:o.zoomIn,zoomOut:o.zoomOut,getInternalNode:C,setCenter:o.setCenter,fitView:o.fitView,getNode:E=>C(E)?.internals.userNode,getNodes:E=>E?kn(t,E):e.nodes,getEdge:E=>N.get(E),getEdges:E=>E?kn(N,E):e.edges,addNodes:T,addEdges:v,getViewport:()=>No(e.viewport),setViewport:async(E,w)=>{let I=e.viewport;return e.panZoom?(await e.panZoom.setViewport({x:E.x??I.x,y:E.y??I.y,zoom:E.zoom??I.zoom},w),Promise.resolve(!0)):Promise.resolve(!1)},getZoom:()=>e.viewport.zoom,setZoom:(E,w)=>{let I=e.panZoom;return I?I.scaleTo(E,{duration:w?.duration}):Promise.resolve(!1)},fitBounds:async(E,w)=>{if(!e.panZoom)return Promise.resolve(!1);let I=Ra(E,e.width,e.height,e.minZoom,e.maxZoom,w?.padding??.1);return await e.panZoom.setViewport(I,{duration:w?.duration,ease:w?.ease,interpolate:w?.interpolate}),Promise.resolve(!0)},getIntersectingNodes:(E,w=!0,I)=>{let D=Mn(E),k=D?E:P(E);return k?(I||e.nodes).filter(R=>{let Y=t.get(R.id);if(!Y||!D&&R.id===E.id)return!1;let H=In(Y),_=vn(H,k);return w&&_>0||_>=k.width*k.height}):[]},isNodeIntersecting:(E,w,I=!0)=>{let k=Mn(E)?E:P(E);if(!k)return!1;let R=vn(k,w);return I&&R>0||R>=k.width*k.height},deleteElements:async({nodes:E=[],edges:w=[]})=>{let{nodes:I,edges:D}=await Oa({nodesToRemove:E,edgesToRemove:w,nodes:e.nodes,edges:e.edges,onBeforeDelete:e.onBeforeDelete});return La(()=>{if(D){let k=e.edges.filter(R=>!D.some(({id:Y})=>Y===R.id));e.onEdgesDelete?.(D),o.setEdges(k)}if(I){let k=e.nodes.filter(R=>!I.some(({id:Y})=>Y===R.id));e.onNodesDelete?.(I),o.setNodes(k)}}),{deletedNodes:I,deletedEdges:D}},screenToFlowPosition:(E,w={snapToGrid:!0})=>{if(!e.domNode)return E;let I=w.snapToGrid?e.snapGrid:!1,{x:D,y:k,zoom:R}=e.viewport,{x:Y,y:H}=e.domNode.getBoundingClientRect(),_={x:E.x-Y,y:E.y-H};return Aa(_,[D,k,R],I!==null,I||[1,1])},flowToScreenPosition:E=>{if(!e.domNode)return E;let{x:w,y:I,zoom:D}=e.viewport,{x:k,y:R}=e.domNode.getBoundingClientRect(),Y=_a(E,[w,I,D]);return{x:Y.x+k,y:Y.y+R}},toObject:()=>structuredClone({nodes:[...No(e.nodes)],edges:[...No(e.edges)],viewport:{...No(e.viewport)}}),updateNode:x,updateNodeData:(E,w,I)=>{let D=t.get(E)?.internals.userNode;if(!D)return;let k=typeof w=="function"?w(D):w;x(E,R=>({...R,data:I?.replace?k:{...R.data,...k}}))},updateEdge:b,getNodesBounds:E=>za(E,{nodeLookup:t,nodeOrigin:e.nodeOrigin}),getHandleConnections:({type:E,id:w,nodeId:I})=>Array.from(S.get(`${I}-${E}-${w??null}`)?.values()??[])}}function kn(e,o){let t=[];for(let N of o){let S=e.get(N);if(S){let P="internals"in S?S.internals?.userNode:S;t.push(P)}}return t}function hy(){let{store:e,actions:o}=z();return N=>{let S=Array.isArray(N)?N:[N],P=[];for(let x of S){let b=e.domNode?.querySelector(`.solid-flow__node[data-id="${x}"]`);b&&P.push([x,{id:x,nodeElement:b,force:!0}])}o.requestUpdateNodeInternals(P)}}var _y=e=>{let{store:o}=z(),{getNodes:t,getNodesBounds:N,getInternalNode:S}=Po(),P=Ba({offset:10,position:"top",align:"center",style:{}},e),[x,b]=Ka(P,["nodeId","position","align","offset","isVisible","style","children"]),C=()=>{let k=Xa(Ne);return k?k():""},T=()=>(Array.isArray(x.nodeId)?x.nodeId:[x.nodeId??C()]).reduce((R,Y)=>{let H=S(Y);return H&&R.push(H),R},[]),v=()=>{let k=N(T());return k?Ha(k,o.viewport,x.position,x.offset,x.align):""},E=()=>{let k=T();return k.length===0?1:Math.max(...k.map(R=>(R.internals.z||5)+1))},w=()=>t().filter(k=>k.selected).length,I=()=>{let k=T();return typeof x.isVisible=="boolean"?x.isVisible:k.length===1&&!!k[0].selected&&w()===1},D=()=>!!(o.domNode&&I()&&T().length>0);return<Va when={D()}>
-      <Fa mount={o.domNode}>
-        <div class="solid-flow__node-toolbar"data-id={T().reduce((k,R)=>`${k}${R.id} `,"").trim()}style={{position:"absolute",transform:v(),"z-index":E(),...x.style}}{...b}>
-          {x.children}
+      </Show12>
+      <Show12 when={local.showFitView}>
+        <ControlButton
+    class="solid-flow__controls-fitview"
+    onClick={onFitViewHandler}
+    title={store.ariaLabelConfig["controls.fitView.ariaLabel"]}
+    aria-label={store.ariaLabelConfig["controls.fitView.ariaLabel"]}
+    {...buttonProps()}
+  >
+          <Fit />
+        </ControlButton>
+      </Show12>
+      <Show12 when={local.showLock}>
+        <ControlButton
+    class="solid-flow__controls-interactive"
+    onClick={onToggleInteractivity}
+    title={store.ariaLabelConfig["controls.interactive.ariaLabel"]}
+    aria-label={store.ariaLabelConfig["controls.interactive.ariaLabel"]}
+    {...buttonProps()}
+  >
+          <Show12 when={getIsInteractive()} fallback={<Lock />}>
+            <Unlock />
+          </Show12>
+        </ControlButton>
+      </Show12>
+      {local.children}
+      {local.afterControls}
+    </Panel>;
+};
+
+// src/components/graph/plugins/minimap/MiniMap.tsx
+import {
+  getBoundsOfRects as getBoundsOfRects2,
+  getInternalNodesBounds as getInternalNodesBounds2,
+  getNodeDimensions as getNodeDimensions3,
+  nodeHasDimensions as nodeHasDimensions2,
+  XYMinimap
+} from "@xyflow/system";
+import clsx16 from "clsx";
+import {
+  createEffect as createEffect6,
+  createMemo as createMemo7,
+  createSignal as createSignal6,
+  Index,
+  mergeProps as mergeProps16,
+  onCleanup as onCleanup4,
+  onMount as onMount3,
+  Show as Show13,
+  splitProps as splitProps8
+} from "solid-js";
+
+// src/components/graph/plugins/minimap/MiniMapNode.tsx
+import clsx15 from "clsx";
+import { mergeProps as mergeProps15 } from "solid-js";
+var MiniMapNode = (props) => {
+  const _props = mergeProps15(
+    {
+      borderRadius: 5,
+      width: 0,
+      height: 0
+    },
+    props
+  );
+  const style = () => Object.entries({
+    fill: _props.color,
+    stroke: _props.strokeColor,
+    "stroke-width": _props.strokeWidth
+  }).filter(([_, value]) => value !== void 0).reduce((acc, [key, value]) => {
+    acc[key] = value;
+    return acc;
+  }, {});
+  return <rect
+    class={clsx15("solid-flow__minimap-node", { selected: _props.selected }, _props.class)}
+    x={_props.x}
+    y={_props.y}
+    rx={_props.borderRadius}
+    ry={_props.borderRadius}
+    width={_props.width}
+    height={_props.height}
+    shape-rendering={_props.shapeRendering}
+    style={style()}
+  />;
+};
+
+// src/components/graph/plugins/minimap/MiniMap.tsx
+var getAttrFunction = (func) => func instanceof Function ? func : () => func;
+var MiniMap = (props) => {
+  const { store, nodeLookup } = useInternalSolidFlow();
+  const _props = mergeProps16(
+    {
+      position: "bottom-right",
+      nodeClass: "",
+      nodeStrokeColor: "transparent",
+      pannable: true,
+      zoomable: true,
+      width: 200,
+      height: 150,
+      nodeBorderRadius: 5,
+      nodeStrokeWidth: 2,
+      style: {}
+    },
+    props
+  );
+  const [local, paneProps] = splitProps8(_props, [
+    "class",
+    "style",
+    "position",
+    "nodeClass",
+    "nodeStrokeColor",
+    "nodeColor",
+    "pannable",
+    "zoomable",
+    "inversePan",
+    "zoomStep",
+    "bgColor",
+    "width",
+    "height",
+    "maskColor",
+    "maskStrokeColor",
+    "maskStrokeWidth",
+    "nodeBorderRadius",
+    "nodeStrokeWidth"
+  ]);
+  const nodeColorFunc = () => local.nodeColor === void 0 ? void 0 : getAttrFunction(local.nodeColor);
+  const nodeStrokeColorFunc = () => getAttrFunction(local.nodeStrokeColor);
+  const nodeClassFunc = () => getAttrFunction(local.nodeClass);
+  const shapeRendering = () => (
+    // @ts-expect-error - TS doesn't know about chrome
+    typeof window === "undefined" || !!window.chrome ? "crispEdges" : "geometricPrecision"
+  );
+  const labelledBy = createMemo7(() => `solid-flow__minimap-desc-${store.id}`);
+  const getViewBB = () => ({
+    x: -store.viewport.x / store.viewport.zoom,
+    y: -store.viewport.y / store.viewport.zoom,
+    width: store.width / store.viewport.zoom,
+    height: store.height / store.viewport.zoom
+  });
+  const getBoundingRect = () => {
+    const viewBB = getViewBB();
+    return nodeLookup.size > 0 ? getBoundsOfRects2(getInternalNodesBounds2(nodeLookup), viewBB) : viewBB;
+  };
+  const getScaledWidth = () => getBoundingRect().width / local.width;
+  const getScaledHeight = () => getBoundingRect().height / local.height;
+  const getViewScale = () => Math.max(getScaledWidth(), getScaledHeight());
+  const getViewWidth = () => getViewScale() * local.width;
+  const getViewHeight = () => getViewScale() * local.height;
+  const getOffset = () => 5 * getViewScale();
+  const getX = () => {
+    const boundingRect = getBoundingRect();
+    return boundingRect.x - (getViewWidth() - boundingRect.width) / 2 - getOffset();
+  };
+  const getY = () => {
+    const boundingRect = getBoundingRect();
+    return boundingRect.y - (getViewHeight() - boundingRect.height) / 2 - getOffset();
+  };
+  const getViewboxWidth = () => getViewWidth() + getOffset() * 2;
+  const getViewboxHeight = () => getViewHeight() + getOffset() * 2;
+  const strokeWidth = () => local.maskStrokeWidth ? local.maskStrokeWidth * getViewScale() : void 0;
+  let prevNodeIds = [];
+  const nodeIds = () => {
+    const currentNodeIds = store.nodes.map((node) => node.id);
+    const currentSet = new Set(currentNodeIds);
+    if (prevNodeIds.length !== currentNodeIds.length || !prevNodeIds.every((id) => currentSet.has(id))) {
+      prevNodeIds = currentNodeIds;
+    }
+    return prevNodeIds;
+  };
+  return <Panel
+    position={local.position}
+    data-testid="solid-flow__minimap"
+    class={clsx16(["solid-flow__minimap", local.class])}
+    style={{
+      "--xy-minimap-background-color-props": local.bgColor,
+      ...local.style
+    }}
+    {...paneProps}
+  >
+      <Show13 when={store.panZoom}>
+        {(panZoom) => {
+    const [ref, setRef] = createSignal6();
+    onMount3(() => {
+      const minimap = XYMinimap({
+        domNode: ref(),
+        panZoom: panZoom(),
+        getTransform: () => store.transform,
+        getViewScale
+      });
+      createEffect6(() => {
+        minimap.update({
+          translateExtent: store.translateExtent,
+          width: store.width,
+          height: store.height,
+          inversePan: local.inversePan,
+          zoomStep: local.zoomStep,
+          pannable: local.pannable,
+          zoomable: local.zoomable
+        });
+      });
+      onCleanup4(() => {
+        minimap.destroy();
+      });
+    });
+    return <svg
+      ref={setRef}
+      width={local.width}
+      height={local.height}
+      viewBox={`${getX()} ${getY()} ${getViewboxWidth()} ${getViewboxHeight()}`}
+      class="solid-flow__minimap-svg"
+      role="img"
+      aria-labelledby={labelledBy()}
+      style={{
+        "--xy-minimap-mask-background-color-props": local.maskColor,
+        "--xy-minimap-mask-stroke-color-props": local.maskStrokeColor,
+        "--xy-minimap-mask-stroke-width-props": strokeWidth()
+      }}
+    >
+              <title id={labelledBy()}>{store.ariaLabelConfig["minimap.ariaLabel"]}</title>
+              <Index each={nodeIds()}>
+                {(nodeId) => {
+      const node = createMemo7(() => nodeLookup.get(nodeId()));
+      const nodeVisible = () => Boolean(node() && nodeHasDimensions2(node()) && !node().hidden);
+      return <Show13 when={nodeVisible() && getNodeDimensions3(node())}>
+                      {(nodeDimensions) => <MiniMapNode
+        x={node().internals.positionAbsolute.x}
+        y={node().internals.positionAbsolute.y}
+        borderRadius={local.nodeBorderRadius}
+        strokeWidth={local.nodeStrokeWidth}
+        shapeRendering={shapeRendering()}
+        width={nodeDimensions().width}
+        height={nodeDimensions().height}
+        selected={node().selected}
+        color={nodeColorFunc()?.call(null, node())}
+        strokeColor={nodeStrokeColorFunc().call(null, node())}
+        class={nodeClassFunc().call(null, node())}
+      />}
+                    </Show13>;
+    }}
+              </Index>
+              <path
+      class="solid-flow__minimap-mask"
+      d={`M${getX() - getOffset()},${getY() - getOffset()}h${getViewboxWidth() + getOffset() * 2}v${getViewboxHeight() + getOffset() * 2}h${-getViewboxWidth() - getOffset() * 2}z
+            M${getViewBB().x},${getViewBB().y}h${getViewBB().width}v${getViewBB().height}h${-getViewBB().width}z`}
+      fill-rule="evenodd"
+      pointer-events="none"
+    />
+            </svg>;
+  }}
+      </Show13>
+    </Panel>;
+};
+
+// src/components/graph/plugins/nodeResizer/NodeResizer.tsx
+import {
+  XY_RESIZER_HANDLE_POSITIONS,
+  XY_RESIZER_LINE_POSITIONS
+} from "@xyflow/system";
+import { For as For4, mergeProps as mergeProps18, Show as Show14, splitProps as splitProps10 } from "solid-js";
+
+// src/components/graph/plugins/nodeResizer/ResizeControl.tsx
+import {
+  XYResizer
+} from "@xyflow/system";
+import clsx17 from "clsx";
+import {
+  createEffect as createEffect7,
+  mergeProps as mergeProps17,
+  onCleanup as onCleanup5,
+  onMount as onMount4,
+  splitProps as splitProps9
+} from "solid-js";
+import { produce as produce3 } from "solid-js/store";
+var ResizeControl = (props) => {
+  const _props = mergeProps17(
+    {
+      variant: "handle",
+      minWidth: 10,
+      minHeight: 10,
+      maxWidth: Number.MAX_VALUE,
+      maxHeight: Number.MAX_VALUE,
+      keepAspectRatio: false,
+      autoScale: true,
+      style: {}
+    },
+    props
+  );
+  const [local, rest] = splitProps9(_props, [
+    "nodeId",
+    "variant",
+    "position",
+    "minWidth",
+    "minHeight",
+    "maxWidth",
+    "maxHeight",
+    "keepAspectRatio",
+    "autoScale",
+    "onResizeStart",
+    "onResize",
+    "onResizeEnd",
+    "shouldResize",
+    "class",
+    "children",
+    "color",
+    "style"
+  ]);
+  let resizeControlRef;
+  const { store, nodeLookup, actions } = useInternalSolidFlow();
+  const ctxNodeId = useNodeId();
+  const nodeId = () => local.nodeId ?? ctxNodeId();
+  const isLineVariant = () => local.variant === "line";
+  const controlPosition = () => local.position ?? (isLineVariant() ? "right" : "bottom-right");
+  const positionClassNames = () => controlPosition().split("-");
+  onMount4(() => {
+    const resizer = XYResizer({
+      domNode: resizeControlRef,
+      nodeId: nodeId(),
+      getStoreItems: () => ({
+        nodeLookup,
+        transform: store.transform,
+        snapGrid: store.snapGrid,
+        snapToGrid: !!store.snapGrid,
+        nodeOrigin: store.nodeOrigin,
+        paneDomNode: store.domNode
+      }),
+      onChange: (change, childChanges) => {
+        const changes = /* @__PURE__ */ new Map();
+        const position = change.x && change.y ? { x: change.x, y: change.y } : void 0;
+        changes.set(nodeId(), { ...change, position });
+        for (const childChange of childChanges) {
+          changes.set(childChange.id, {
+            position: childChange.position
+          });
+        }
+        actions.setNodes(
+          (node) => changes.has(node.id),
+          produce3((node) => {
+            const nodeChange = changes.get(node.id);
+            node.width = nodeChange.width;
+            node.height = nodeChange.height;
+            node.position = {
+              x: nodeChange.position?.x ?? node.position.x,
+              y: nodeChange.position?.y ?? node.position.y
+            };
+          })
+        );
+      }
+    });
+    createEffect7(() => {
+      resizer.update({
+        controlPosition: controlPosition(),
+        boundaries: {
+          minWidth: local.minWidth,
+          minHeight: local.minHeight,
+          maxWidth: local.maxWidth,
+          maxHeight: local.maxHeight
+        },
+        keepAspectRatio: !!local.keepAspectRatio,
+        onResizeStart: local.onResizeStart,
+        onResize: local.onResize,
+        onResizeEnd: local.onResizeEnd,
+        shouldResize: local.shouldResize
+      });
+    });
+    onCleanup5(() => {
+      resizer.destroy();
+    });
+  });
+  return <div
+    ref={resizeControlRef}
+    class={clsx17([
+      "solid-flow__resize-control",
+      local.variant,
+      store.noDragClass,
+      ...positionClassNames(),
+      local.class
+    ])}
+    style={{
+      "border-color": isLineVariant() ? local.color : void 0,
+      "background-color": isLineVariant() ? void 0 : local.color,
+      scale: isLineVariant() || !local.autoScale ? void 0 : Math.max(1 / store.viewport.zoom, 1),
+      ...local.style
+    }}
+    {...rest}
+  >
+      {local.children}
+    </div>;
+};
+
+// src/components/graph/plugins/nodeResizer/NodeResizer.tsx
+var NodeResizer = (props) => {
+  const _props = mergeProps18(
+    {
+      autoScale: true,
+      visible: true
+    },
+    props
+  );
+  const [local, rest] = splitProps10(props, ["handleClass", "handleStyle", "lineClass", "lineStyle"]);
+  return <Show14 when={_props.visible}>
+      <For4 each={XY_RESIZER_LINE_POSITIONS}>
+        {(position) => <ResizeControl
+    variant="line"
+    position={position}
+    class={local.lineClass}
+    style={local.lineStyle}
+    {...rest}
+  />}
+      </For4>
+      <For4 each={XY_RESIZER_HANDLE_POSITIONS}>
+        {(position) => <ResizeControl
+    position={position}
+    class={local.handleClass}
+    style={local.handleStyle}
+    {...rest}
+  />}
+      </For4>
+    </Show14>;
+};
+
+// src/components/graph/plugins/NodeToolbar.tsx
+import { getNodeToolbarTransform } from "@xyflow/system";
+import { mergeProps as mergeProps19, Show as Show15, splitProps as splitProps11, useContext as useContext6 } from "solid-js";
+import { Portal as Portal3 } from "solid-js/web";
+
+// src/hooks/useConnection.tsx
+function useConnection() {
+  const { store } = useInternalSolidFlow();
+  const connection = () => store.connection;
+  return connection;
+}
+
+// src/hooks/useGraph.ts
+function useNodes() {
+  const { store } = useInternalSolidFlow();
+  return () => store.nodes;
+}
+function useEdges() {
+  const { store } = useInternalSolidFlow();
+  return () => store.edges;
+}
+function useViewport() {
+  const { store } = useInternalSolidFlow();
+  return () => store.viewport;
+}
+
+// src/hooks/useHandleEdgeSelect.tsx
+import "@xyflow/system";
+import { batch as batch6 } from "solid-js";
+function useHandleEdgeSelect() {
+  const { store, edgeLookup, actions } = useInternalSolidFlow();
+  return (id) => {
+    const edge = edgeLookup.get(id);
+    if (!edge) {
+      return;
+    }
+    const selectable = edge.selectable || store.elementsSelectable && typeof edge.selectable === "undefined";
+    if (selectable) {
+      batch6(() => {
+        actions.setSelectionRect(void 0);
+        actions.setSelectionRectMode(void 0);
+        if (!edge.selected) {
+          actions.addSelectedEdges([id]);
+        } else if (edge.selected && store.multiselectionKeyPressed) {
+          actions.unselectNodesAndEdges({ nodes: [], edges: [edge] });
+        }
+      });
+    }
+  };
+}
+
+// src/hooks/useInternalNode.tsx
+function useInternalNode(id) {
+  const { nodeLookup } = useInternalSolidFlow();
+  return () => nodeLookup.get(id());
+}
+
+// src/hooks/useNodeConnections.ts
+import { areConnectionMapsEqual as areConnectionMapsEqual2 } from "@xyflow/system";
+import { createEffect as createEffect8, createSignal as createSignal7, useContext as useContext5 } from "solid-js";
+var useNodeConnections = (params) => {
+  const { connectionLookup } = useInternalSolidFlow();
+  const ctxNodeId = () => {
+    const id2 = useContext5(NodeIdContext);
+    return id2 ? id2() : "";
+  };
+  const id = () => params().handleId;
+  const type = () => params().handleType;
+  const nodeId = () => params().id ?? ctxNodeId();
+  const [connections, setConnections] = createSignal7([]);
+  const lookupKey = () => `${nodeId()}${type() ? id() ? `-${type()}-${id()}` : `-${type()}` : ""}`;
+  createEffect8((prevConnections) => {
+    const nextConnections = connectionLookup.get(lookupKey());
+    if (!areConnectionMapsEqual2(nextConnections, prevConnections)) {
+      prevConnections = nextConnections;
+      setConnections(Array.from(prevConnections?.values() ?? []));
+    }
+    return nextConnections;
+  });
+  return connections;
+};
+
+// src/hooks/useNodesData.ts
+import { shallowNodeData } from "@xyflow/system";
+import { createMemo as createMemo8 } from "solid-js";
+function useNodesData(nodeIds) {
+  const { nodeLookup } = useInternalSolidFlow();
+  let prevNodesData = [];
+  const result = createMemo8(() => {
+    const nodesData = [];
+    const idValues = nodeIds();
+    if (!idValues) return void 0;
+    const ids = Array.isArray(idValues) ? idValues : [idValues];
+    for (const nodeId of ids) {
+      const node = nodeLookup.get(nodeId)?.internals.userNode;
+      if (!node) continue;
+      nodesData.push({
+        id: node.id,
+        type: node.type,
+        data: node.data
+      });
+    }
+    if (!shallowNodeData(nodesData, prevNodesData)) {
+      prevNodesData = nodesData;
+    }
+    return Array.isArray(idValues) ? nodesData : nodesData[0];
+  });
+  return result;
+}
+
+// src/hooks/useSolidFlow.tsx
+import {
+  evaluateAbsolutePosition,
+  getElementsToRemove,
+  getNodesBounds,
+  getOverlappingArea,
+  getViewportForBounds as getViewportForBounds2,
+  isRectObject,
+  nodeToRect as nodeToRect2,
+  pointToRendererPoint as pointToRendererPoint2,
+  rendererPointToPoint
+} from "@xyflow/system";
+import { batch as batch7 } from "solid-js";
+import { unwrap as unwrap2 } from "solid-js/store";
+function useSolidFlow() {
+  const { store, actions, nodeLookup, edgeLookup, connectionLookup } = useInternalSolidFlow();
+  const getNodeRect = (node) => {
+    const nodeToUse = isNode(node) ? node : nodeLookup.get(node.id);
+    const position = nodeToUse.parentId ? evaluateAbsolutePosition(
+      nodeToUse.position,
+      nodeToUse.measured,
+      nodeToUse.parentId,
+      nodeLookup,
+      store.nodeOrigin
+    ) : nodeToUse.position;
+    const nodeWithPosition = {
+      ...nodeToUse,
+      position,
+      width: nodeToUse.measured?.width ?? nodeToUse.width,
+      height: nodeToUse.measured?.height ?? nodeToUse.height
+    };
+    return nodeToRect2(nodeWithPosition);
+  };
+  const updateNode = (id, nodeUpdate, options = { replace: false }) => {
+    actions.setNodes(
+      (node) => node.id === id,
+      (node) => {
+        const nextNode = typeof nodeUpdate === "function" ? nodeUpdate(node) : nodeUpdate;
+        return options?.replace && isNode(nextNode) ? nextNode : { ...node, ...nextNode };
+      }
+    );
+  };
+  const updateEdge = (id, edgeUpdate, options = { replace: false }) => {
+    actions.setEdges(
+      (edge) => edge.id === id,
+      (edge) => {
+        const nextEdge = typeof edgeUpdate === "function" ? edgeUpdate(edge) : edgeUpdate;
+        return options.replace && isEdge(nextEdge) ? nextEdge : { ...edge, ...nextEdge };
+      }
+    );
+  };
+  const getInternalNode = (id) => nodeLookup.get(id);
+  const addNodes = (payload) => {
+    const newNodes = Array.isArray(payload) ? payload : [payload];
+    actions.setNodes((nodes) => [...nodes, ...newNodes]);
+  };
+  const addEdges = (payload) => {
+    const newEdges = Array.isArray(payload) ? payload : [payload];
+    actions.setEdges((edges) => [...edges, ...newEdges]);
+  };
+  return {
+    zoomIn: actions.zoomIn,
+    zoomOut: actions.zoomOut,
+    getInternalNode,
+    setCenter: actions.setCenter,
+    fitView: actions.fitView,
+    getNode: (id) => getInternalNode(id)?.internals.userNode,
+    getNodes: (ids) => !ids ? store.nodes : getElements(nodeLookup, ids),
+    getEdge: (id) => edgeLookup.get(id),
+    getEdges: (ids) => !ids ? store.edges : getElements(edgeLookup, ids),
+    addNodes,
+    addEdges,
+    getViewport: () => unwrap2(store.viewport),
+    setViewport: async (nextViewport, options) => {
+      const currentViewport = store.viewport;
+      if (!store.panZoom) {
+        return Promise.resolve(false);
+      }
+      await store.panZoom.setViewport(
+        {
+          x: nextViewport.x ?? currentViewport.x,
+          y: nextViewport.y ?? currentViewport.y,
+          zoom: nextViewport.zoom ?? currentViewport.zoom
+        },
+        options
+      );
+      return Promise.resolve(true);
+    },
+    getZoom: () => store.viewport.zoom,
+    setZoom: (zoomLevel, options) => {
+      const panZoom = store.panZoom;
+      return panZoom ? panZoom.scaleTo(zoomLevel, { duration: options?.duration }) : Promise.resolve(false);
+    },
+    fitBounds: async (bounds, options) => {
+      if (!store.panZoom) {
+        return Promise.resolve(false);
+      }
+      const viewport = getViewportForBounds2(
+        bounds,
+        store.width,
+        store.height,
+        store.minZoom,
+        store.maxZoom,
+        options?.padding ?? 0.1
+      );
+      await store.panZoom.setViewport(viewport, {
+        duration: options?.duration,
+        ease: options?.ease,
+        interpolate: options?.interpolate
+      });
+      return Promise.resolve(true);
+    },
+    getIntersectingNodes: (nodeOrRect, partially = true, nodesToIntersect) => {
+      const isRect = isRectObject(nodeOrRect);
+      const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
+      if (!nodeRect) {
+        return [];
+      }
+      return (nodesToIntersect || store.nodes).filter((n) => {
+        const internalNode = nodeLookup.get(n.id);
+        if (!internalNode || !isRect && n.id === nodeOrRect.id) {
+          return false;
+        }
+        const currNodeRect = nodeToRect2(internalNode);
+        const overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
+        const partiallyVisible = partially && overlappingArea > 0;
+        return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
+      });
+    },
+    isNodeIntersecting: (nodeOrRect, area, partially = true) => {
+      const isRect = isRectObject(nodeOrRect);
+      const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
+      if (!nodeRect) {
+        return false;
+      }
+      const overlappingArea = getOverlappingArea(nodeRect, area);
+      const partiallyVisible = partially && overlappingArea > 0;
+      return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
+    },
+    deleteElements: async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [] }) => {
+      const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
+        nodesToRemove,
+        edgesToRemove,
+        nodes: store.nodes,
+        edges: store.edges,
+        onBeforeDelete: store.onBeforeDelete
+      });
+      batch7(() => {
+        if (matchingEdges) {
+          const remmainingEdges = store.edges.filter(
+            (edge) => !matchingEdges.some(({ id }) => id === edge.id)
+          );
+          store.onEdgesDelete?.(matchingEdges);
+          actions.setEdges(remmainingEdges);
+        }
+        if (matchingNodes) {
+          const remmainingNodes = store.nodes.filter(
+            (node) => !matchingNodes.some(({ id }) => id === node.id)
+          );
+          store.onNodesDelete?.(matchingNodes);
+          actions.setNodes(remmainingNodes);
+        }
+      });
+      return {
+        deletedNodes: matchingNodes,
+        deletedEdges: matchingEdges
+      };
+    },
+    screenToFlowPosition: (position, options = { snapToGrid: true }) => {
+      if (!store.domNode) {
+        return position;
+      }
+      const _snapGrid = options.snapToGrid ? store.snapGrid : false;
+      const { x, y, zoom } = store.viewport;
+      const { x: domX, y: domY } = store.domNode.getBoundingClientRect();
+      const correctedPosition = {
+        x: position.x - domX,
+        y: position.y - domY
+      };
+      return pointToRendererPoint2(
+        correctedPosition,
+        [x, y, zoom],
+        _snapGrid !== null,
+        _snapGrid || [1, 1]
+      );
+    },
+    /**
+     *
+     * @param position
+     * @returns
+     */
+    flowToScreenPosition: (position) => {
+      if (!store.domNode) {
+        return position;
+      }
+      const { x, y, zoom } = store.viewport;
+      const { x: domX, y: domY } = store.domNode.getBoundingClientRect();
+      const rendererPosition = rendererPointToPoint(position, [x, y, zoom]);
+      return {
+        x: rendererPosition.x + domX,
+        y: rendererPosition.y + domY
+      };
+    },
+    toObject: () => {
+      return structuredClone({
+        nodes: [...unwrap2(store.nodes)],
+        edges: [...unwrap2(store.edges)],
+        viewport: { ...unwrap2(store.viewport) }
+      });
+    },
+    updateNode,
+    updateNodeData: (id, dataUpdate, options) => {
+      const node = nodeLookup.get(id)?.internals.userNode;
+      if (!node) {
+        return;
+      }
+      const nextData = typeof dataUpdate === "function" ? dataUpdate(node) : dataUpdate;
+      updateNode(id, (node2) => ({
+        ...node2,
+        data: options?.replace ? nextData : { ...node2.data, ...nextData }
+      }));
+    },
+    updateEdge,
+    getNodesBounds: (nodes) => {
+      return getNodesBounds(nodes, { nodeLookup, nodeOrigin: store.nodeOrigin });
+    },
+    getHandleConnections: ({ type, id, nodeId }) => Array.from(connectionLookup.get(`${nodeId}-${type}-${id ?? null}`)?.values() ?? [])
+  };
+}
+function getElements(lookup, ids) {
+  const result = [];
+  for (const id of ids) {
+    const item = lookup.get(id);
+    if (item) {
+      const element = "internals" in item ? item.internals?.userNode : item;
+      result.push(element);
+    }
+  }
+  return result;
+}
+
+// src/hooks/useUpdateNodeInternals.ts
+function useUpdateNodeInternals() {
+  const { store, actions } = useInternalSolidFlow();
+  const updateInternals = (id) => {
+    const updateIds = Array.isArray(id) ? id : [id];
+    const updates = [];
+    for (const updateId of updateIds) {
+      const nodeElement = store.domNode?.querySelector(
+        `.solid-flow__node[data-id="${updateId}"]`
+      );
+      if (!nodeElement) continue;
+      updates.push([updateId, { id: updateId, nodeElement, force: true }]);
+    }
+    actions.requestUpdateNodeInternals(updates);
+  };
+  return updateInternals;
+}
+
+// src/components/graph/plugins/NodeToolbar.tsx
+var NodeToolbar = (props) => {
+  const { store } = useInternalSolidFlow();
+  const { getNodes, getNodesBounds: getNodesBounds3, getInternalNode } = useSolidFlow();
+  const _props = mergeProps19(
+    {
+      offset: 10,
+      position: "top",
+      align: "center",
+      style: {}
+    },
+    props
+  );
+  const [local, divProps] = splitProps11(_props, [
+    "nodeId",
+    "position",
+    "align",
+    "offset",
+    "isVisible",
+    "style",
+    "children"
+  ]);
+  const ctxNodeId = () => {
+    const id = useContext6(NodeIdContext);
+    return id ? id() : "";
+  };
+  const toolbarNodes = () => {
+    const nodeIds = Array.isArray(local.nodeId) ? local.nodeId : [local.nodeId ?? ctxNodeId()];
+    return nodeIds.reduce((res, nodeId) => {
+      const node = getInternalNode(nodeId);
+      if (node) res.push(node);
+      return res;
+    }, []);
+  };
+  const transform = () => {
+    const nodeRect = getNodesBounds3(toolbarNodes());
+    return !nodeRect ? "" : getNodeToolbarTransform(
+      nodeRect,
+      store.viewport,
+      local.position,
+      local.offset,
+      local.align
+    );
+  };
+  const zIndex = () => {
+    const nodes = toolbarNodes();
+    return nodes.length === 0 ? 1 : Math.max(...nodes.map((node) => (node.internals.z || 5) + 1));
+  };
+  const selectedNodesCount = () => getNodes().filter((node) => node.selected).length;
+  const isActive = () => {
+    const nodes = toolbarNodes();
+    return typeof local.isVisible === "boolean" ? local.isVisible : nodes.length === 1 && Boolean(nodes[0].selected) && selectedNodesCount() === 1;
+  };
+  const showPortal = () => Boolean(store.domNode && isActive() && toolbarNodes().length > 0);
+  return <Show15 when={showPortal()}>
+      <Portal3 mount={store.domNode}>
+        <div
+    class="solid-flow__node-toolbar"
+    data-id={toolbarNodes().reduce((acc, node) => `${acc}${node.id} `, "").trim()}
+    style={{
+      // TODO: Add hideOnSSR display style from Svelte implementation
+      position: "absolute",
+      transform: transform(),
+      "z-index": zIndex(),
+      ...local.style
+    }}
+    {...divProps}
+  >
+          {local.children}
         </div>
-      </Fa>
-    </Va>};import{getInternalNodesBounds as Za,isNumeric as Dn}from"@xyflow/system";import $a from"clsx";import{createEffect as Ua,createSignal as Ja,Show as Ga}from"solid-js";import{mergeProps as Ya,Show as Wa}from"solid-js";var _e=e=>{let o=Ya({isVisible:!0},e),t=()=>({...o.width!=null&&{width:typeof o.width=="string"?o.width:J(o.width)},...o.height!=null&&{height:typeof o.height=="string"?o.height:J(o.height)},...o.x!=null&&o.y!=null&&{transform:`translate(${e.x}px, ${e.y}px)`}});return<Wa when={o.isVisible}>
-      <div class="solid-flow__selection"style={t()}/>
-    </Wa>};var Mt=e=>{let{store:o,nodeLookup:t,actions:N}=z(),[S,P]=Ja(),x=()=>o.selectionRectMode==="nodes"?Za(t,{filter:v=>!!v.selected}):null;Ua(()=>{o.disableKeyboardA11y||S()?.focus({preventScroll:!0})});let b=v=>{let E=o.nodes.filter(w=>w.selected);e.onSelectionContextMenu?.({nodes:E,event:v})},C=v=>{let E=o.nodes.filter(w=>w.selected);e.onSelectionClick?.({nodes:E,event:v})};Ze(S,()=>({disabled:!1,onDrag:(v,E,w,I)=>{e.onNodeDrag?.({event:v,targetNode:null,nodes:I})},onDragStart:(v,E,w,I)=>{e.onNodeDragStart?.({event:v,targetNode:null,nodes:I})},onDragStop:(v,E,w,I)=>{e.onNodeDragStop?.({event:v,targetNode:null,nodes:I})}}));let T=v=>{let E=Xe[v.key];E&&(v.preventDefault(),N.moveSelectedNodes(E,v.shiftKey?4:1))};return<Ga when={o.selectionRectMode==="nodes"&&x()&&Dn(x()?.x)&&Dn(x()?.y)}>
-      <div ref={P}class={$a("solid-flow__selection-wrapper",o.noPanClass)}style={{width:J(x()?.width),height:J(x()?.height),transform:`translate(${x()?.x}px, ${x()?.y}px)`}}onClick={C}onContextMenu={b}role={o.disableKeyboardA11y?void 0:"button"}tabIndex={o.disableKeyboardA11y?void 0:-1}onKeyDown={o.disableKeyboardA11y?void 0:T}>
-        <_e width="100%"height="100%"x={0}y={0}/>
+      </Portal3>
+    </Show15>;
+};
+
+// src/components/graph/selection/NodeSelection.tsx
+import { getInternalNodesBounds as getInternalNodesBounds3, isNumeric as isNumeric2 } from "@xyflow/system";
+import clsx18 from "clsx";
+import { createEffect as createEffect9, createSignal as createSignal8, Show as Show17 } from "solid-js";
+
+// src/components/graph/selection/Selection.tsx
+import { mergeProps as mergeProps20, Show as Show16 } from "solid-js";
+var Selection = (props) => {
+  const _props = mergeProps20({ isVisible: true }, props);
+  const styles = () => ({
+    ..._props.width != null && {
+      width: typeof _props.width === "string" ? _props.width : toPxString(_props.width)
+    },
+    ..._props.height != null && {
+      height: typeof _props.height === "string" ? _props.height : toPxString(_props.height)
+    },
+    ..._props.x != null && _props.y != null && {
+      transform: `translate(${props.x}px, ${props.y}px)`
+    }
+  });
+  return <Show16 when={_props.isVisible}>
+      <div class="solid-flow__selection" style={styles()} />
+    </Show16>;
+};
+
+// src/components/graph/selection/NodeSelection.tsx
+var NodeSelection = (props) => {
+  const { store, nodeLookup, actions } = useInternalSolidFlow();
+  const [ref, setRef] = createSignal8();
+  const bounds = () => {
+    if (store.selectionRectMode === "nodes") {
+      return getInternalNodesBounds3(nodeLookup, {
+        filter: (node) => !!node.selected
+      });
+    }
+    return null;
+  };
+  createEffect9(() => {
+    if (!store.disableKeyboardA11y) {
+      ref()?.focus({ preventScroll: true });
+    }
+  });
+  const onContextMenu = (event) => {
+    const selectedNodes = store.nodes.filter((n) => n.selected);
+    props.onSelectionContextMenu?.({ nodes: selectedNodes, event });
+  };
+  const onClick = (event) => {
+    const selectedNodes = store.nodes.filter((n) => n.selected);
+    props.onSelectionClick?.({ nodes: selectedNodes, event });
+  };
+  createDraggable_default(ref, () => ({
+    disabled: false,
+    onDrag: (event, _, __, nodes) => {
+      props.onNodeDrag?.({ event, targetNode: null, nodes });
+    },
+    onDragStart: (event, _, __, nodes) => {
+      props.onNodeDragStart?.({ event, targetNode: null, nodes });
+    },
+    onDragStop: (event, _, __, nodes) => {
+      props.onNodeDragStop?.({ event, targetNode: null, nodes });
+    }
+  }));
+  const onKeyDown = (event) => {
+    const diff = ARROW_KEY_DIFFS[event.key];
+    if (!diff) return;
+    event.preventDefault();
+    actions.moveSelectedNodes(diff, event.shiftKey ? 4 : 1);
+  };
+  return <Show17
+    when={store.selectionRectMode === "nodes" && bounds() && isNumeric2(bounds()?.x) && isNumeric2(bounds()?.y)}
+  >
+      <div
+    ref={setRef}
+    class={clsx18("solid-flow__selection-wrapper", store.noPanClass)}
+    style={{
+      width: toPxString(bounds()?.width),
+      height: toPxString(bounds()?.height),
+      transform: `translate(${bounds()?.x}px, ${bounds()?.y}px)`
+    }}
+    onClick={onClick}
+    onContextMenu={onContextMenu}
+    role={store.disableKeyboardA11y ? void 0 : "button"}
+    tabIndex={store.disableKeyboardA11y ? void 0 : -1}
+    onKeyDown={store.disableKeyboardA11y ? void 0 : onKeyDown}
+  >
+        <Selection width="100%" height="100%" x={0} y={0} />
       </div>
-    </Ga>};import{createResizeObserver as dl}from"@solid-primitives/resize-observer";import{infiniteExtent as al,isMacOs as Rn}from"@xyflow/system";import ll from"clsx";import{batch as cl,createEffect as pl,mergeProps as gl,onCleanup as ml,onMount as ul,splitProps as yl,useContext as fl}from"solid-js";import{Show as Qa}from"solid-js";var It=e=><Qa when={!e.proOptions?.hideAttribution}>
-      <Pe position={e.position??"bottom-right"}class="solid-flow__attribution"data-message="Feel free to remove the attribution or check out how you could support us: https://solidflow.dev/support-us">
-        <a href="https://solidflow.dev"target="_blank"rel="noopener noreferrer"aria-label="Solid Flow attribution">
+    </Show17>;
+};
+
+// src/components/SolidFlow/component.tsx
+import { createResizeObserver } from "@solid-primitives/resize-observer";
+import { infiniteExtent as infiniteExtent4, isMacOs as isMacOs2 } from "@xyflow/system";
+import clsx19 from "clsx";
+import {
+  batch as batch9,
+  createEffect as createEffect10,
+  mergeProps as mergeProps22,
+  onCleanup as onCleanup7,
+  onMount as onMount6,
+  splitProps as splitProps12,
+  useContext as useContext7
+} from "solid-js";
+
+// src/components/utility/Attribution.tsx
+import { Show as Show18 } from "solid-js";
+var Attribution = (props) => {
+  return <Show18 when={!props.proOptions?.hideAttribution}>
+      <Panel
+    position={props.position ?? "bottom-right"}
+    class="solid-flow__attribution"
+    data-message="Feel free to remove the attribution or check out how you could support us: https://solidflow.dev/support-us"
+  >
+        <a
+    href="https://solidflow.dev"
+    target="_blank"
+    rel="noopener noreferrer"
+    aria-label="Solid Flow attribution"
+  >
           Solid Flow
         </a>
-      </Pe>
-    </Qa>;import{isInputDOMNode as el,isMacOs as On}from"@xyflow/system";import{batch as kt,mergeProps as ol,onCleanup as tl,onMount as nl}from"solid-js";function zn(e){return e!==null&&typeof e=="object"}function rl(e){return zn(e)?e.modifier||[]:[]}function il(e){return e==null?"":zn(e)?e.key:e}function sl(e,o){if(!o)return!1;let t=il(o);if(!t)return!1;let N=rl(o);if(Array.isArray(N)){let S=N.flatMap(P=>P).every(P=>{switch(P.toLowerCase()){case"meta":return e.metaKey;case"ctrl":return e.ctrlKey;case"alt":return e.altKey;case"shift":return e.shiftKey;default:return!1}});return e.key===t&&S}return e.key===t}function le(e,o){return o?(Array.isArray(o)?o:[o]).some(N=>sl(e,N)):!1}var Dt=e=>{let{store:o,actions:t}=z(),{deleteElements:N}=Po(),S=ol({selectionKey:"Shift",multiSelectionKey:On()?"Meta":"Control",deleteKey:"Backspace",panActivationKey:" ",zoomActivationKey:On()?"Meta":"Control"},e),P=()=>{kt(()=>{t.setSelectionRect(void 0),t.setSelectionKeyPressed(!1),t.setMultiselectionKeyPressed(!1),t.setDeleteKeyPressed(!1),t.setPanActivationKeyPressed(!1),t.setZoomActivationKeyPressed(!1)})},x=async()=>{let T=o.nodes.filter(I=>I.selected),v=o.edges.filter(I=>I.selected),{deletedNodes:E,deletedEdges:w}=await N({nodes:T,edges:v});(E.length>0||w.length>0)&&o.onDelete?.({nodes:E,edges:w})},b=T=>{kt(()=>{le(T,S.selectionKey)&&t.setSelectionKeyPressed(!0),le(T,S.multiSelectionKey)&&t.setMultiselectionKeyPressed(!0),le(T,S.deleteKey)&&!el(T)&&(T.ctrlKey||T.metaKey||T.shiftKey||(t.setDeleteKeyPressed(!0),x())),le(T,S.panActivationKey)&&t.setPanActivationKeyPressed(!0),le(T,S.zoomActivationKey)&&t.setZoomActivationKeyPressed(!0)})},C=T=>{kt(()=>{le(T,S.selectionKey)&&t.setSelectionKeyPressed(!1),le(T,S.multiSelectionKey)&&t.setMultiselectionKeyPressed(!1),le(T,S.deleteKey)&&t.setDeleteKeyPressed(!1),le(T,S.panActivationKey)&&t.setPanActivationKeyPressed(!1),le(T,S.zoomActivationKey)&&t.setZoomActivationKeyPressed(!1)})};return nl(()=>{window.addEventListener("keydown",b),window.addEventListener("keyup",C),window.addEventListener("blur",P),window.addEventListener("contextmenu",P),tl(()=>{window.removeEventListener("keydown",b),window.removeEventListener("keyup",C),window.removeEventListener("blur",P),window.removeEventListener("contextmenu",P)})}),null};var hl=e=>{let o,t=gl({...we(),colorMode:"light",deleteKeyCode:"Backspace",defaultViewport:{x:0,y:0,zoom:1},multiSelectionKeyCode:Rn()?"Meta":"Control",nodeClickDistance:0,panOnScroll:!1,panActivationKeyCode:"Space",preventScrolling:!0,panOnDrag:!0,panOnScrollSpeed:.5,panOnScrollMode:"free",paneClickDistance:0,reconnectRadius:10,selectionKeyCode:"Shift",selectionOnDrag:!1,translateExtent:al,zoomActivationKeyCode:Rn()?"Meta":"Control",zoomOnPinch:!0,zoomOnDoubleClick:!0,zoomOnScroll:!0},e),[N,S]=yl(t,["nodes","edges","nodeTypes","edgeTypes","width","height","fitView","fitViewOptions","nodeOrigin","nodeDragThreshold","paneClickDistance","nodeClickDistance","minZoom","maxZoom","initialViewport","viewport","translateExtent","nodeExtent","selectionKey","panActivationKey","deleteKey","multiSelectionKey","zoomActivationKey","panOnDrag","panOnScroll","panOnScrollMode","panOnScrollSpeed","selectionOnDrag","selectNodesOnDrag","preventScrolling","zoomOnScroll","zoomOnDoubleClick","zoomOnPinch","onlyRenderVisibleElements","autoPanOnConnect","autoPanOnNodeDrag","autoPanOnNodeFocus","autoPanSpeed","connectionRadius","connectionMode","connectionLineType","connectionLineComponent","connectionLineStyle","connectionLineContainerStyle","connectionDragThreshold","isValidConnection","clickConnect","reconnectRadius","selectionMode","elementsSelectable","nodesDraggable","nodesConnectable","nodesFocusable","edgesFocusable","disableKeyboardA11y","ariaLabelConfig","ariaLiveMessage","colorMode","colorModeSSR","class","style","snapGrid","defaultMarkerColor","defaultEdgeOptions","elevateNodesOnSelect","elevateEdgesOnSelect","noDragClass","noPanClass","noWheelClass","attributionPosition","proOptions","onInit","onMoveStart","onMove","onMoveEnd","onFlowError","onNodeClick","onNodeContextMenu","onNodeDrag","onNodeDragStart","onNodeDragStop","onNodePointerEnter","onNodePointerMove","onNodePointerLeave","onEdgeClick","onEdgeContextMenu","onEdgePointerEnter","onEdgePointerLeave","onPaneClick","onPaneContextMenu","onSelectionChange","onSelectionClick","onSelectionContextMenu","onSelectionDrag","onSelectionDragStart","onSelectionDragStop","onSelectionStart","onSelectionEnd","onConnect","onConnectStart","onConnectEnd","onReconnect","onReconnectStart","onReconnectEnd","onClickConnectStart","onClickConnectEnd","onBeforeConnect","onBeforeReconnect","onDelete","onBeforeDelete","deleteKeyCode","selectionKeyCode","panActivationKeyCode","multiSelectionKeyCode","zoomActivationKeyCode","children"]),P=Ae,x=fl(P)??Je(t),{store:b,actions:C}=x;ul(()=>{C.applyInitialFitView(N.fitView),cl(()=>{C.setConfig(t),C.setDomNode(o)}),dl(o,()=>{C.setWidth(o.clientWidth),C.setHeight(o.clientHeight)}),pl(()=>{C.setPaneClickDistance(N.paneClickDistance)}),ml(()=>{C.reset()})});let T=()=>({width:J(N.width),height:J(N.height),...N.style});return<div role="application"data-testid="solid-flow__wrapper"ref={o}class={ll(["solid-flow","solid-flow__container",N.class,b.colorMode])}style={T()}onScroll={v=>{v.currentTarget.scrollTo({top:0,left:0,behavior:"auto"})}}{...S}>
-      <P.Provider value={x}>
-        <Dt selectionKey={N.selectionKey}deleteKey={N.deleteKey}panActivationKey={N.panActivationKey}multiSelectionKey={N.multiSelectionKey}zoomActivationKey={N.zoomActivationKey}/>
-        <Qo panOnScrollMode={N.panOnScrollMode}preventScrolling={N.preventScrolling}zoomOnScroll={N.zoomOnScroll}zoomOnDoubleClick={N.zoomOnDoubleClick}zoomOnPinch={N.zoomOnPinch}panOnScroll={N.panOnScroll}panOnDrag={N.panOnDrag}paneClickDistance={N.paneClickDistance}onMoveStart={N.onMoveStart}onMove={N.onMove}onMoveEnd={N.onMoveEnd}onViewportInitialized={N.onInit}initialViewport={N.viewport||N.initialViewport}>
-          <Jo onPaneClick={N.onPaneClick}onPaneContextMenu={N.onPaneContextMenu}onSelectionStart={N.onSelectionStart}onSelectionEnd={N.onSelectionEnd}panOnDrag={N.panOnDrag}selectionOnDrag={N.selectionOnDrag}>
-            <Go>
-              <div class="solid-flow__container solid-flow__viewport-back"/>
-              <$o reconnectRadius={N.reconnectRadius}onEdgeClick={N.onEdgeClick}onEdgeContextMenu={N.onEdgeContextMenu}onEdgePointerEnter={N.onEdgePointerEnter}onEdgePointerLeave={N.onEdgePointerLeave}defaultEdgeOptions={N.defaultEdgeOptions}/>
-              <div class="solid-flow__container solid-flow__edge-labels"/>
-              <St type={N.connectionLineType}component={N.connectionLineComponent}containerStyle={N.connectionLineContainerStyle}style={N.connectionLineStyle}/>
-              <Uo nodeClickDistance={N.nodeClickDistance}onNodeClick={N.onNodeClick}onNodeContextMenu={N.onNodeContextMenu}onNodePointerEnter={N.onNodePointerEnter}onNodePointerMove={N.onNodePointerMove}onNodePointerLeave={N.onNodePointerLeave}onNodeDrag={N.onNodeDrag}onNodeDragStart={N.onNodeDragStart}onNodeDragStop={N.onNodeDragStop}/>
-              <Mt onSelectionClick={N.onSelectionClick}onSelectionContextMenu={N.onSelectionContextMenu}onNodeDrag={N.onNodeDrag}onNodeDragStart={N.onNodeDragStart}onNodeDragStop={N.onNodeDragStop}/>
-            </Go>
-            <_e isVisible={!!b.selectionRect&&b.selectionRectMode==="user"}width={b.selectionRect?.width}height={b.selectionRect?.height}x={b.selectionRect?.x}y={b.selectionRect?.y}/>
-          </Jo>
-        </Qo>
-        <It proOptions={N.proOptions}position={N.attributionPosition}/>
-        <Mo/>
-        {N.children}
-      </P.Provider>
-    </div>};import{mergeProps as Sl,onCleanup as Nl}from"solid-js";var Pl=e=>{let o=Sl(we(),e),t=Je(o);Nl(()=>{t.actions.reset()});let N=Ae.Provider;return<N value={t}>{e.children}</N>};import{createStore as bl}from"solid-js/store";var El=e=>{let[o,t]=bl(e);return[o,t]};import{createStore as xl}from"solid-js/store";var wl=e=>{let[o,t]=xl(e);return[o,t]};import{addEdge as ah,getBezierEdgeCenter as lh,getBezierPath as ch,getConnectedEdges as ph,getEdgeCenter as gh,getIncomers as mh,getNodesBounds as uh,getOutgoers as yh,getSmoothStepPath as fh,getStraightPath as hh,getViewportForBounds as Sh}from"@xyflow/system";import{ConnectionLineType as Ph,ConnectionMode as bh,MarkerType as Eh,PanOnScrollMode as xh,Position as wh,ResizeControlVariant as Ch,SelectionMode as Th}from"@xyflow/system";export{Pd as Background,Q as BaseEdge,kr as BezierEdge,To as BezierEdgeInternal,St as ConnectionLine,Ph as ConnectionLineType,bh as ConnectionMode,Me as ControlButton,vd as Controls,Ro as DefaultNode,De as EdgeLabel,Co as EdgeLabelRenderer,Hr as EdgeReconnectAnchor,$o as EdgeRenderer,Io as EdgeWrapper,Ao as GroupNode,Se as Handle,_o as InputNode,Wo as Marker,Zo as MarkerDefinition,Eh as MarkerType,Fd as MiniMap,Uo as NodeRenderer,Pa as NodeResizer,Mt as NodeSelection,_y as NodeToolbar,Ho as NodeWrapper,Bo as OutputNode,xh as PanOnScrollMode,Jo as Pane,Pe as Panel,wh as Position,So as ResizeControl,Ch as ResizeControlVariant,_e as Selection,Th as SelectionMode,Zr as SmoothStepEdge,ko as SmoothStepEdgeInternal,hl as SolidFlow,Pl as SolidFlowProvider,Gr as StepEdge,Do as StepEdgeInternal,ei as StraightEdge,Oo as StraightEdgeInternal,Go as Viewport,Hs as ViewportPortal,Qo as Zoom,ah as addEdge,El as createEdgeStore,wl as createNodeStore,lh as getBezierEdgeCenter,ch as getBezierPath,ph as getConnectedEdges,gh as getEdgeCenter,mh as getIncomers,uh as getNodesBounds,yh as getOutgoers,fh as getSmoothStepPath,hh as getStraightPath,Sh as getViewportForBounds,Vu as useConnection,Ea as useEdges,Uu as useHandleEdgeSelect,ju as useInternalNode,ny as useNodeConnections,ba as useNodes,ay as useNodesData,Po as useSolidFlow,hy as useUpdateNodeInternals,xa as useViewport};
+      </Panel>
+    </Show18>;
+};
+
+// src/components/utility/KeyHandler.tsx
+import { isInputDOMNode as isInputDOMNode2, isMacOs } from "@xyflow/system";
+import { batch as batch8, mergeProps as mergeProps21, onCleanup as onCleanup6, onMount as onMount5 } from "solid-js";
+function isKeyObject(key) {
+  return key !== null && typeof key === "object";
+}
+function getModifier(key) {
+  return isKeyObject(key) ? key.modifier || [] : [];
+}
+function getKeyString(key) {
+  if (key === null || key === void 0) {
+    return "";
+  }
+  return isKeyObject(key) ? key.key : key;
+}
+function matchesKey(event, keyDef) {
+  if (!keyDef) return false;
+  const keyString = getKeyString(keyDef);
+  if (!keyString) return false;
+  const modifiers = getModifier(keyDef);
+  if (Array.isArray(modifiers)) {
+    const modifierMatch = modifiers.flatMap((mod) => mod).every((mod) => {
+      switch (mod.toLowerCase()) {
+        case "meta":
+          return event.metaKey;
+        case "ctrl":
+          return event.ctrlKey;
+        case "alt":
+          return event.altKey;
+        case "shift":
+          return event.shiftKey;
+        default:
+          return false;
+      }
+    });
+    return event.key === keyString && modifierMatch;
+  }
+  return event.key === keyString;
+}
+function matchesKeyArray(event, keyDefs) {
+  if (!keyDefs) return false;
+  const keys = Array.isArray(keyDefs) ? keyDefs : [keyDefs];
+  return keys.some((keyDef) => matchesKey(event, keyDef));
+}
+var KeyHandler = (props) => {
+  const { store, actions } = useInternalSolidFlow();
+  const { deleteElements } = useSolidFlow();
+  const _props = mergeProps21(
+    {
+      selectionKey: "Shift",
+      multiSelectionKey: isMacOs() ? "Meta" : "Control",
+      deleteKey: "Backspace",
+      panActivationKey: " ",
+      zoomActivationKey: isMacOs() ? "Meta" : "Control"
+    },
+    props
+  );
+  const resetKeysAndSelection = () => {
+    batch8(() => {
+      actions.setSelectionRect(void 0);
+      actions.setSelectionKeyPressed(false);
+      actions.setMultiselectionKeyPressed(false);
+      actions.setDeleteKeyPressed(false);
+      actions.setPanActivationKeyPressed(false);
+      actions.setZoomActivationKeyPressed(false);
+    });
+  };
+  const handleDelete = async () => {
+    const selectedNodes = store.nodes.filter((node) => node.selected);
+    const selectedEdges = store.edges.filter((edge) => edge.selected);
+    const { deletedNodes, deletedEdges } = await deleteElements({
+      nodes: selectedNodes,
+      edges: selectedEdges
+    });
+    if (deletedNodes.length > 0 || deletedEdges.length > 0) {
+      store.onDelete?.({
+        nodes: deletedNodes,
+        edges: deletedEdges
+      });
+    }
+  };
+  const handleKeyDown = (event) => {
+    batch8(() => {
+      if (matchesKeyArray(event, _props.selectionKey)) {
+        actions.setSelectionKeyPressed(true);
+      }
+      if (matchesKeyArray(event, _props.multiSelectionKey)) {
+        actions.setMultiselectionKeyPressed(true);
+      }
+      if (matchesKeyArray(event, _props.deleteKey) && !isInputDOMNode2(event)) {
+        const isModifierKey = event.ctrlKey || event.metaKey || event.shiftKey;
+        if (!isModifierKey) {
+          actions.setDeleteKeyPressed(true);
+          void handleDelete();
+        }
+      }
+      if (matchesKeyArray(event, _props.panActivationKey)) {
+        actions.setPanActivationKeyPressed(true);
+      }
+      if (matchesKeyArray(event, _props.zoomActivationKey)) {
+        actions.setZoomActivationKeyPressed(true);
+      }
+    });
+  };
+  const handleKeyUp = (event) => {
+    batch8(() => {
+      if (matchesKeyArray(event, _props.selectionKey)) {
+        actions.setSelectionKeyPressed(false);
+      }
+      if (matchesKeyArray(event, _props.multiSelectionKey)) {
+        actions.setMultiselectionKeyPressed(false);
+      }
+      if (matchesKeyArray(event, _props.deleteKey)) {
+        actions.setDeleteKeyPressed(false);
+      }
+      if (matchesKeyArray(event, _props.panActivationKey)) {
+        actions.setPanActivationKeyPressed(false);
+      }
+      if (matchesKeyArray(event, _props.zoomActivationKey)) {
+        actions.setZoomActivationKeyPressed(false);
+      }
+    });
+  };
+  onMount5(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+    window.addEventListener("blur", resetKeysAndSelection);
+    window.addEventListener("contextmenu", resetKeysAndSelection);
+    onCleanup6(() => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+      window.removeEventListener("blur", resetKeysAndSelection);
+      window.removeEventListener("contextmenu", resetKeysAndSelection);
+    });
+  });
+  return null;
+};
+
+// src/components/SolidFlow/component.tsx
+var SolidFlow = (props) => {
+  let domNode;
+  const _props = mergeProps22(
+    {
+      ...getDefaultFlowStateProps(),
+      colorMode: "light",
+      deleteKeyCode: "Backspace",
+      defaultViewport: { x: 0, y: 0, zoom: 1 },
+      multiSelectionKeyCode: isMacOs2() ? "Meta" : "Control",
+      nodeClickDistance: 0,
+      panOnScroll: false,
+      panActivationKeyCode: "Space",
+      preventScrolling: true,
+      panOnDrag: true,
+      panOnScrollSpeed: 0.5,
+      panOnScrollMode: "free",
+      paneClickDistance: 0,
+      reconnectRadius: 10,
+      selectionKeyCode: "Shift",
+      selectionOnDrag: false,
+      translateExtent: infiniteExtent4,
+      zoomActivationKeyCode: isMacOs2() ? "Meta" : "Control",
+      zoomOnPinch: true,
+      zoomOnDoubleClick: true,
+      zoomOnScroll: true
+    },
+    props
+  );
+  const [flowProps, htmlProps] = splitProps12(_props, [
+    // Core flow props
+    "nodes",
+    "edges",
+    "nodeTypes",
+    "edgeTypes",
+    // Layout and viewport
+    "width",
+    "height",
+    "fitView",
+    "fitViewOptions",
+    "nodeOrigin",
+    "nodeDragThreshold",
+    "paneClickDistance",
+    "nodeClickDistance",
+    "minZoom",
+    "maxZoom",
+    "initialViewport",
+    "viewport",
+    "translateExtent",
+    "nodeExtent",
+    // Interaction and behavior
+    "selectionKey",
+    "panActivationKey",
+    "deleteKey",
+    "multiSelectionKey",
+    "zoomActivationKey",
+    "panOnDrag",
+    "panOnScroll",
+    "panOnScrollMode",
+    "panOnScrollSpeed",
+    "selectionOnDrag",
+    "selectNodesOnDrag",
+    "preventScrolling",
+    "zoomOnScroll",
+    "zoomOnDoubleClick",
+    "zoomOnPinch",
+    "onlyRenderVisibleElements",
+    "autoPanOnConnect",
+    "autoPanOnNodeDrag",
+    "autoPanOnNodeFocus",
+    "autoPanSpeed",
+    // Connection and validation
+    "connectionRadius",
+    "connectionMode",
+    "connectionLineType",
+    "connectionLineComponent",
+    "connectionLineStyle",
+    "connectionLineContainerStyle",
+    "connectionDragThreshold",
+    "isValidConnection",
+    "clickConnect",
+    "reconnectRadius",
+    // Selection and accessibility
+    "selectionMode",
+    "elementsSelectable",
+    "nodesDraggable",
+    "nodesConnectable",
+    "nodesFocusable",
+    "edgesFocusable",
+    "disableKeyboardA11y",
+    "ariaLabelConfig",
+    "ariaLiveMessage",
+    // Styling and theming
+    "colorMode",
+    "colorModeSSR",
+    "class",
+    "style",
+    "snapGrid",
+    "defaultMarkerColor",
+    "defaultEdgeOptions",
+    "elevateNodesOnSelect",
+    "elevateEdgesOnSelect",
+    "noDragClass",
+    "noPanClass",
+    "noWheelClass",
+    // Attribution and pro features
+    "attributionPosition",
+    "proOptions",
+    // Event handlers - Flow lifecycle
+    "onInit",
+    "onMoveStart",
+    "onMove",
+    "onMoveEnd",
+    "onFlowError",
+    // Event handlers - Node events
+    "onNodeClick",
+    "onNodeContextMenu",
+    "onNodeDrag",
+    "onNodeDragStart",
+    "onNodeDragStop",
+    "onNodePointerEnter",
+    "onNodePointerMove",
+    "onNodePointerLeave",
+    // Event handlers - Edge events
+    "onEdgeClick",
+    "onEdgeContextMenu",
+    "onEdgePointerEnter",
+    "onEdgePointerLeave",
+    // Event handlers - Pane events
+    "onPaneClick",
+    "onPaneContextMenu",
+    // Event handlers - Selection events
+    "onSelectionChange",
+    "onSelectionClick",
+    "onSelectionContextMenu",
+    "onSelectionDrag",
+    "onSelectionDragStart",
+    "onSelectionDragStop",
+    "onSelectionStart",
+    "onSelectionEnd",
+    // Event handlers - Connection events
+    "onConnect",
+    "onConnectStart",
+    "onConnectEnd",
+    "onReconnect",
+    "onReconnectStart",
+    "onReconnectEnd",
+    "onClickConnectStart",
+    "onClickConnectEnd",
+    "onBeforeConnect",
+    "onBeforeReconnect",
+    // Event handlers - Delete events
+    "onDelete",
+    "onBeforeDelete",
+    // Legacy/deprecated props
+    "deleteKeyCode",
+    "selectionKeyCode",
+    "panActivationKeyCode",
+    "multiSelectionKeyCode",
+    "zoomActivationKeyCode",
+    // Special props that conflict with HTML
+    "children"
+  ]);
+  const TypedSolidFlowContext = SolidFlowContext;
+  const solidFlow = useContext7(TypedSolidFlowContext) ?? createSolidFlow(_props);
+  const { store, actions } = solidFlow;
+  onMount6(() => {
+    actions.applyInitialFitView(flowProps.fitView);
+    batch9(() => {
+      actions.setConfig(_props);
+      actions.setDomNode(domNode);
+    });
+    createResizeObserver(domNode, () => {
+      actions.setWidth(domNode.clientWidth);
+      actions.setHeight(domNode.clientHeight);
+    });
+    createEffect10(() => {
+      actions.setPaneClickDistance(flowProps.paneClickDistance);
+    });
+    onCleanup7(() => {
+      actions.reset();
+    });
+  });
+  const rootStyle = () => ({
+    width: toPxString(flowProps.width),
+    height: toPxString(flowProps.height),
+    ...flowProps.style
+  });
+  return <div
+    role="application"
+    data-testid="solid-flow__wrapper"
+    ref={domNode}
+    class={clsx19(["solid-flow", "solid-flow__container", flowProps.class, store.colorMode])}
+    style={rootStyle()}
+    onScroll={(e) => {
+      e.currentTarget.scrollTo({ top: 0, left: 0, behavior: "auto" });
+    }}
+    {...htmlProps}
+  >
+      <TypedSolidFlowContext.Provider value={solidFlow}>
+        <KeyHandler
+    selectionKey={flowProps.selectionKey}
+    deleteKey={flowProps.deleteKey}
+    panActivationKey={flowProps.panActivationKey}
+    multiSelectionKey={flowProps.multiSelectionKey}
+    zoomActivationKey={flowProps.zoomActivationKey}
+  />
+        <Zoom
+    panOnScrollMode={flowProps.panOnScrollMode}
+    preventScrolling={flowProps.preventScrolling}
+    zoomOnScroll={flowProps.zoomOnScroll}
+    zoomOnDoubleClick={flowProps.zoomOnDoubleClick}
+    zoomOnPinch={flowProps.zoomOnPinch}
+    panOnScroll={flowProps.panOnScroll}
+    panOnDrag={flowProps.panOnDrag}
+    paneClickDistance={flowProps.paneClickDistance}
+    onMoveStart={flowProps.onMoveStart}
+    onMove={flowProps.onMove}
+    onMoveEnd={flowProps.onMoveEnd}
+    onViewportInitialized={flowProps.onInit}
+    initialViewport={flowProps.viewport || flowProps.initialViewport}
+  >
+          <Pane
+    onPaneClick={flowProps.onPaneClick}
+    onPaneContextMenu={flowProps.onPaneContextMenu}
+    onSelectionStart={flowProps.onSelectionStart}
+    onSelectionEnd={flowProps.onSelectionEnd}
+    panOnDrag={flowProps.panOnDrag}
+    selectionOnDrag={flowProps.selectionOnDrag}
+  >
+            <Viewport>
+              <div class="solid-flow__container solid-flow__viewport-back" />
+              <EdgeRenderer
+    reconnectRadius={flowProps.reconnectRadius}
+    onEdgeClick={flowProps.onEdgeClick}
+    onEdgeContextMenu={flowProps.onEdgeContextMenu}
+    onEdgePointerEnter={flowProps.onEdgePointerEnter}
+    onEdgePointerLeave={flowProps.onEdgePointerLeave}
+    defaultEdgeOptions={flowProps.defaultEdgeOptions}
+  />
+              <div class="solid-flow__container solid-flow__edge-labels" />
+              <ConnectionLine_default
+    type={flowProps.connectionLineType}
+    component={flowProps.connectionLineComponent}
+    containerStyle={flowProps.connectionLineContainerStyle}
+    style={flowProps.connectionLineStyle}
+  />
+              <NodeRenderer
+    nodeClickDistance={flowProps.nodeClickDistance}
+    onNodeClick={flowProps.onNodeClick}
+    onNodeContextMenu={flowProps.onNodeContextMenu}
+    onNodePointerEnter={flowProps.onNodePointerEnter}
+    onNodePointerMove={flowProps.onNodePointerMove}
+    onNodePointerLeave={flowProps.onNodePointerLeave}
+    onNodeDrag={flowProps.onNodeDrag}
+    onNodeDragStart={flowProps.onNodeDragStart}
+    onNodeDragStop={flowProps.onNodeDragStop}
+  />
+              <NodeSelection
+    onSelectionClick={flowProps.onSelectionClick}
+    onSelectionContextMenu={flowProps.onSelectionContextMenu}
+    onNodeDrag={flowProps.onNodeDrag}
+    onNodeDragStart={flowProps.onNodeDragStart}
+    onNodeDragStop={flowProps.onNodeDragStop}
+  />
+            </Viewport>
+            <Selection
+    isVisible={!!store.selectionRect && store.selectionRectMode === "user"}
+    width={store.selectionRect?.width}
+    height={store.selectionRect?.height}
+    x={store.selectionRect?.x}
+    y={store.selectionRect?.y}
+  />
+          </Pane>
+        </Zoom>
+        <Attribution proOptions={flowProps.proOptions} position={flowProps.attributionPosition} />
+        <A11yDescriptions />
+        {flowProps.children}
+      </TypedSolidFlowContext.Provider>
+    </div>;
+};
+
+// src/components/SolidFlow/provider.tsx
+import { mergeProps as mergeProps23, onCleanup as onCleanup8 } from "solid-js";
+var SolidFlowProvider = (props) => {
+  const _props = mergeProps23(getDefaultFlowStateProps(), props);
+  const solidFlow = createSolidFlow(_props);
+  onCleanup8(() => {
+    solidFlow.actions.reset();
+  });
+  const ContextProvider = SolidFlowContext.Provider;
+  return <ContextProvider value={solidFlow}>{props.children}</ContextProvider>;
+};
+
+// src/data/createEdgeStore.tsx
+import { createStore as createStore2 } from "solid-js/store";
+var createEdgeStore = (edges) => {
+  const [store, setStore] = createStore2(edges);
+  return [store, setStore];
+};
+
+// src/data/createNodeStore.tsx
+import { createStore as createStore3 } from "solid-js/store";
+var createNodeStore = (nodes) => {
+  const [store, setStore] = createStore3(nodes);
+  return [store, setStore];
+};
+
+// src/index.tsx
+import {
+  addEdge,
+  getBezierEdgeCenter,
+  getBezierPath as getBezierPath4,
+  getConnectedEdges,
+  getEdgeCenter,
+  getIncomers,
+  getNodesBounds as getNodesBounds2,
+  getOutgoers,
+  getSmoothStepPath as getSmoothStepPath6,
+  getStraightPath as getStraightPath4,
+  getViewportForBounds as getViewportForBounds3
+} from "@xyflow/system";
+import {
+  ConnectionLineType,
+  ConnectionMode as ConnectionMode4,
+  MarkerType,
+  PanOnScrollMode,
+  Position as Position2,
+  ResizeControlVariant,
+  SelectionMode as SelectionMode2
+} from "@xyflow/system";
+export {
+  Background,
+  BaseEdge,
+  BezierEdge,
+  BezierEdgeInternal,
+  ConnectionLine_default as ConnectionLine,
+  ConnectionLineType,
+  ConnectionMode4 as ConnectionMode,
+  ControlButton,
+  Controls,
+  DefaultNode,
+  EdgeLabel,
+  EdgeLabelRenderer,
+  EdgeReconnectAnchor,
+  EdgeRenderer,
+  EdgeWrapper,
+  GroupNode,
+  Handle,
+  InputNode,
+  Marker,
+  MarkerDefinition,
+  MarkerType,
+  MiniMap,
+  NodeRenderer,
+  NodeResizer,
+  NodeSelection,
+  NodeToolbar,
+  NodeWrapper,
+  OutputNode,
+  PanOnScrollMode,
+  Pane,
+  Panel,
+  Position2 as Position,
+  ResizeControl,
+  ResizeControlVariant,
+  Selection,
+  SelectionMode2 as SelectionMode,
+  SmoothStepEdge,
+  SmoothStepEdgeInternal,
+  SolidFlow,
+  SolidFlowProvider,
+  StepEdge,
+  StepEdgeInternal,
+  StraightEdge,
+  StraightEdgeInternal,
+  Viewport,
+  ViewportPortal,
+  Zoom,
+  addEdge,
+  createEdgeStore,
+  createNodeStore,
+  getBezierEdgeCenter,
+  getBezierPath4 as getBezierPath,
+  getConnectedEdges,
+  getEdgeCenter,
+  getIncomers,
+  getNodesBounds2 as getNodesBounds,
+  getOutgoers,
+  getSmoothStepPath6 as getSmoothStepPath,
+  getStraightPath4 as getStraightPath,
+  getViewportForBounds3 as getViewportForBounds,
+  useConnection,
+  useEdges,
+  useHandleEdgeSelect,
+  useInternalNode,
+  useNodeConnections,
+  useNodes,
+  useNodesData,
+  useSolidFlow,
+  useUpdateNodeInternals,
+  useViewport
+};