// 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>
    </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>
    </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={`${ARIA_EDGE_DESC_KEY}-${store.id}`} class="a11y-hidden">
        {store.ariaLabelConfig["edge.a11yDescription.default"]}
      </div>

      <Show4 when={!store.disableKeyboardA11y}>
        <div
    id={`${ARIA_LIVE_MESSAGE}-${store.id}`}
    aria-live="assertive"
    aria-atomic="true"
    class="a11y-live-msg"
  >
          {store.ariaLiveMessage}
        </div>
      </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>
      </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>
    </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>
          <For each={markers()}>{(marker) => <Marker {...marker} />}</For>
        </defs>
      </svg>
    </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>
    </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(#${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}>
        <>
          <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>
        </>
      </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>
      </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>
    </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>
      </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
};