https://pro-demo.safehs.ai/_next/static/chunks/fd6fb32a-25f013a8d7f36659.js

1"use strict";
2(self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([[540],{
3
4/***/ 22935:
5/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
6
7/* harmony export */ __webpack_require__.d(__webpack_exports__, {
8/* harmony export */   Aq: function() { return /* binding */ Background; },
9/* harmony export */   Bn: function() { return /* binding */ useUpdateNodeInternals; },
10/* harmony export */   Fb: function() { return /* binding */ applyNodeChanges; },
11/* harmony export */   HH: function() { return /* binding */ Handle; },
12/* harmony export */   Ly: function() { return /* reexport safe */ _xyflow_system__WEBPACK_IMPORTED_MODULE_3__.Ly; },
13/* harmony export */   OQ: function() { return /* reexport safe */ _xyflow_system__WEBPACK_IMPORTED_MODULE_3__.OQ; },
14/* harmony export */   XQ: function() { return /* binding */ EdgeLabelRenderer; },
15/* harmony export */   ZX: function() { return /* binding */ Controls; },
16/* harmony export */   Z_: function() { return /* binding */ addEdge; },
17/* harmony export */   _K: function() { return /* binding */ useReactFlow; },
18/* harmony export */   a9: function() { return /* binding */ MiniMap; },
19/* harmony export */   x$: function() { return /* binding */ index; },
20/* harmony export */   yn: function() { return /* binding */ applyEdgeChanges; }
21/* harmony export */ });
22/* unused harmony exports BackgroundVariant, BaseEdge, BezierEdge, ControlButton, EdgeText, EdgeToolbar, MiniMapNode, NodeResizeControl, NodeResizer, NodeToolbar, Panel, ReactFlowProvider, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge, ViewportPortal, experimental_useOnEdgesChangeMiddleware, experimental_useOnNodesChangeMiddleware, getSimpleBezierPath, isEdge, isNode, reconnectEdge, useConnection, useEdges, useEdgesState, useHandleConnections, useInternalNode, useKeyPress, useNodeConnections, useNodeId, useNodes, useNodesData, useNodesInitialized, useNodesState, useOnSelectionChange, useOnViewportChange, useStore, useStoreApi, useViewport */
23/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(44951);
24/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(25529);
25/* harmony import */ var classcat__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(69552);
26/* harmony import */ var _xyflow_system__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(83531);
27/* harmony import */ var zustand_traditional__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(71171);
28/* harmony import */ var zustand_shallow__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(19977);
29/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(98652);
30/* __next_internal_client_entry_do_not_use__ ConnectionLineType,ConnectionMode,MarkerType,PanOnScrollMode,Position,ResizeControlVariant,SelectionMode,getBezierEdgeCenter,getBezierPath,getConnectedEdges,getEdgeCenter,getIncomers,getNodesBounds,getOutgoers,getSmoothStepPath,getStraightPath,getViewportForBounds,Background,Backgroun

30dVariant,BaseEdge,BezierEdge,ControlButton,Controls,EdgeLabelRenderer,EdgeText,EdgeToolbar,Handle,MiniMap,MiniMapNode,NodeResizeControl,NodeResizer,NodeToolbar,Panel,ReactFlow,ReactFlowProvider,SimpleBezierEdge,SmoothStepEdge,StepEdge,StraightEdge,ViewportPortal,addEdge,applyEdgeChanges,applyNodeChanges,experimental_useOnEdgesChangeMiddleware,experimental_useOnNodesChangeMiddleware,getSimpleBezierPath,isEdge,isNode,reconnectEdge,useConnection,useEdges,useEdgesState,useHandleConnections,useInternalNode,useKeyPress,useNodeConnections,useNodeId,useNodes,useNodesData,useNodesInitialized,useNodesState,useOnSelectionChange,useOnViewportChange,useReactFlow,useStore,useStoreApi,useUpdateNodeInternals,useViewport auto */ 
31
32
33
34
35
36
37
38const StoreContext = /*#__PURE__*/ (0,react__WEBPACK_IMPORTED_MODULE_1__.createContext)(null);
39const Provider$1 = StoreContext.Provider;
40const zustandErrorMessage = _xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .errorMessages */ .Qj["error001"]("react");
41/**
42 * This hook can be used to subscribe to internal state changes of the React Flow
43 * component. The `useStore` hook is re-exported from the [Zustand](https://github.com/pmndrs/zustand)
44 * state management library, so you should check out their docs for more details.
45 *
46 * @public
47 * @param selector - A selector function that returns a slice of the flow's internal state.
48 * Extracting or transforming just the state you need is a good practice to avoid unnecessary
49 * re-renders.
50 * @param equalityFn - A function to compare the previous and next value. This is incredibly useful
51 * for preventing unnecessary re-renders. Good sensible defaults are using `Object.is` or importing
52 * `zustand/shallow`, but you can be as granular as you like.
53 * @returns The selected state slice.
54 *
55 * @example
56 * ```ts
57 * const nodes = useStore((state) => state.nodes);
58 * ```
59 *
60 * @remarks This hook should only be used if there is no other way to access the internal
61 * state. For many of the common use cases, there are dedicated hooks available
62 * such as {@link useReactFlow}, {@link useViewport}, etc.
63 */ function useStore(selector, equalityFn) {
64    const store = (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(StoreContext);
65    if (store === null) {
66        throw new Error(zustandErrorMessage);
67    }
68    return (0,zustand_traditional__WEBPACK_IMPORTED_MODULE_4__/* .useStoreWithEqualityFn */ .s)(store, selector, equalityFn);
69}
70/**
71 * In some cases, you might need to access the store directly. This hook returns the store object which can be used on demand to access the state or dispatch actions.
72 *
73 * @returns The store object.
74 * @example
75 * ```ts
76 * const store = useStoreApi();
77 * ```
78 *
79 * @remarks This hook should only be used if there is no other way to access the internal
80 * state. For many of the common use cases, there are dedicated hooks available
81 * such as {@link useReactFlow}, {@link useViewport}, etc.
82 */ function useStoreApi() {
83    const store = (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(StoreContext);
84    if (store === null) {
85        throw new Error(zustandErrorMessage);
86    }
87    return (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(()=>({
88            getState: store.getState,
89            setState: store.setState,
90            subscribe: store.subscribe
91        }), [
92        store
93    ]);
94}
95const style = {
96    display: "none"
97};
98const ariaLiveStyle = {
99    position: "absolute",
100    width: 1,
101    height: 1,
102    margin: -1,
103    border: 0,
104    padding: 0,
105    overflow: "hidden",
106    clip: "rect(0px, 0px, 0px, 0px)",
107    clipPath: "inset(100%)"
108};
109const ARIA_NODE_DESC_KEY = "react-flow__node-desc";
110const ARIA_EDGE_DESC_KEY = "react-flow__edge-desc";
111const ARIA_LIVE_MESSAGE = "react-flow__aria-live";
112const ariaLiveSelector = (s)=>s.ariaLiveMessage;
113const ariaLabelConfigSelector = (s)=>s.ariaLabelConfig;
114function AriaLiveMessage(param) {
115    let { rfId } = param;
116    const ariaLiveMessage = useStore(ariaLiveSelector);
117    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
118        id: "".concat(ARIA_LIVE_MESSAGE, "-").concat(rfId),
119        "aria-live": "assertive",
120        "aria-atomic": "true",
121        style: ariaLiveStyle,
122        children: ariaLiveMessage
123    });
124}
125function A11yDescriptions(param) {
126    let { rfId, disableKeyboardA11y } = param;
127    const ariaLabelConfig = useStore(ariaLabelConfigSelector);
128    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
129        children: [
130            (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
131                id: "".concat(ARIA_NODE_DESC_KEY, "-").concat(rfId),
132                style: style,
133                children: disableKeyboardA11y ? ariaLabelConfig["node.a11yDescription.default"] : ariaLabelConfig["node.a11yDescription.keyboardDisabled"]
134            }),
135            (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
136                id: "".concat(ARIA_EDGE_DESC_KEY, "-").concat(rfId),
137                style: style,
138                children: ariaLabelConfig["edge.a11yDescription.default"]
139            }),
140            !disableKeyboardA11y && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(AriaLiveMessage, {
141                rfId: rfId
142            })
143        ]
144    });
145}
146/**
147 * The `<Panel />` component helps you position content above the viewport.
148 * It is used internally by the [`<MiniMap />`](/api-reference/components/minimap)

149 * and [`<Controls />`](/api-reference/components/controls) components.
150 *
151 * @public
152 *
153 * @example
154 * ```jsx
155 *import { ReactFlow, Background, Panel } from '@xyflow/react';
156 *
157 *export default function Flow() {
158 *  return (
159 *    <ReactFlow nodes={[]} fitView>
160 *      <Panel position="top-left">top-left</Panel>
161 *      <Panel position="top-center">top-center</Panel>
162 *      <Panel position="top-right">top-right</Panel>
163 *      <Panel position="bottom-left">bottom-left</Panel>
164 *      <Panel position="bottom-center">bottom-center</Panel>
165 *      <Panel position="bottom-right">bottom-right</Panel>
166 *    </ReactFlow>
167 *  );
168 *}
169 *```
170 */ const Panel = /*#__PURE__*/ (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((param, ref)=>{
171    let { position = "top-left", children, className, style, ...rest } = param;
172    const positionClasses = "".concat(position).split("-");
173    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
174        className: (0,classcat__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z)([
175            "react-flow__panel",
176            className,
177            ...positionClasses
178        ]),
179        style: style,
180        ref: ref,
181        ...rest,
182        children: children
183    });
184});
185Panel.displayName = "Panel";
186const link = "https://reactflow.dev".concat( true ? "?utm_source=attribution" : 0);
187function Attribution(param) {
188    let { proOptions, position = "bottom-right" } = param;
189    if (proOptions === null || proOptions === void 0 ? void 0 : proOptions.hideAttribution) {
190        return null;
191    }
192    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Panel, {
193        position: position,
194        className: "react-flow__attribution",
195        "data-message": "Please only hide this attribution when you are subscribed to React Flow Pro: ".concat(link),
196        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("a", {
197            href: link,
198            target: "_blank",
199            rel: "noopener noreferrer",
200            "aria-label": "React Flow attribution",
201            children: "React Flow"
202        })
203    });
204}
205const selector$l = (s)=>{
206    const selectedNodes = [];
207    const selectedEdges = [];
208    for (const [, node] of s.nodeLookup){
209        if (node.selected) {
210            selectedNodes.push(node.internals.userNode);
211        }
212    }
213    for (const [, edge] of s.edgeLookup){
214        if (edge.selected) {
215            selectedEdges.push(edge);
216        }
217    }
218    return {
219        selectedNodes,
220        selectedEdges
221    };
222};
223const selectId = (obj)=>obj.id;
224function areEqual$1(a, b) {
225    return (0,zustand_shallow__WEBPACK_IMPORTED_MODULE_5__/* .shallow */ .X)(a.selectedNodes.map(selectId), b.selectedNodes.map(selectId)) && (0,zustand_shallow__WEBPACK_IMPORTED_MODULE_5__/* .shallow */ .X)(a.selectedEdges.map(selectId), b.selectedEdges.map(selectId));
226}
227function SelectionListenerInner(param) {
228    let { onSelectionChange } = param;
229    const store = useStoreApi();
230    const { selectedNodes, selectedEdges } = useStore(selector$l, areEqual$1);
231    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
232        const params = {
233            nodes: selectedNodes,
234            edges: selectedEdges
235        };
236        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(params);
237        store.getState().onSelectionChangeHandlers.forEach((fn)=>fn(params));
238    }, [
239        selectedNodes,
240        selectedEdges,
241        onSelectionChange
242    ]);
243    return null;
244}
245const changeSelector = (s)=>!!s.onSelectionChangeHandlers;
246function SelectionListener(param) {
247    let { onSelectionChange } = param;
248    const storeHasSelectionChangeHandlers = useStore(changeSelector);
249    if (onSelectionChange || storeHasSelectionChangeHandlers) {
250        return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(SelectionListenerInner, {
251            onSelectionChange: onSelectionChange
252        });
253    }
254    return null;
255}
256const defaultNodeOrigin = [
257    0,
258    0
259];
260const defaultViewport = {
261    x: 0,
262    y: 0,
263    zoom: 1
264};
265/*
266 * This component helps us to update the store with the values coming from the user.
267 * We distinguish between values we can update directly with `useDirectStoreUpdater` (like `snapGrid`)
268 * and values that have a dedicated setter function in the store (like `setNodes`).
269 */ // These fields exist in the global store, and we need to keep them up to date
270const reactFlowFieldsToTrack = [
271    "nodes",
272    "edges",
273    "defaultNodes",
274    "defaultEdges",
275    "onConnect",
276    "onConnectStart",
277    "onConnectEnd",
278    "onClickConnectStart",
279    "onClickConnectEnd",
280    "nodesDraggable",
281    "autoPanOnNodeFocus",
282    "nodesConnectable",
283    "nodesFocusable",
284    "edgesFocusable",
285    "edgesReconnectable",
286    "elevateNodesOnSelect",
287    "elevateEdgesOnSelect",
288    "minZoom",
289    "maxZoom",
290    "nodeExtent",
291    "onNodesChange",
292    "onEdgesChange",
293    "elementsSelectable",
294    "connectionMode",
295    "snapGrid",

296    "snapToGrid",
297    "translateExtent",
298    "connectOnClick",
299    "defaultEdgeOptions",
300    "fitView",
301    "fitViewOptions",
302    "onNodesDelete",
303    "onEdgesDelete",
304    "onDelete",
305    "onNodeDrag",
306    "onNodeDragStart",
307    "onNodeDragStop",
308    "onSelectionDrag",
309    "onSelectionDragStart",
310    "onSelectionDragStop",
311    "onMoveStart",
312    "onMove",
313    "onMoveEnd",
314    "noPanClassName",
315    "nodeOrigin",
316    "autoPanOnConnect",
317    "autoPanOnNodeDrag",
318    "onError",
319    "connectionRadius",
320    "isValidConnection",
321    "selectNodesOnDrag",
322    "nodeDragThreshold",
323    "connectionDragThreshold",
324    "onBeforeDelete",
325    "debug",
326    "autoPanSpeed",
327    "ariaLabelConfig",
328    "zIndexMode"
329];
330// rfId doesn't exist in ReactFlowProps, but it's one of the fields we want to update
331const fieldsToTrack = [
332    ...reactFlowFieldsToTrack,
333    "rfId"
334];
335const selector$k = (s)=>({
336        setNodes: s.setNodes,
337        setEdges: s.setEdges,
338        setMinZoom: s.setMinZoom,
339        setMaxZoom: s.setMaxZoom,
340        setTranslateExtent: s.setTranslateExtent,
341        setNodeExtent: s.setNodeExtent,
342        reset: s.reset,
343        setDefaultNodesAndEdges: s.setDefaultNodesAndEdges
344    });
345const initPrevValues = {
346    /*
347     * these are values that are also passed directly to other components
348     * than the StoreUpdater. We can reduce the number of setStore calls
349     * by setting the same values here as prev fields.
350     */ translateExtent: _xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .infiniteExtent */ .k5,
351    nodeOrigin: defaultNodeOrigin,
352    minZoom: 0.5,
353    maxZoom: 2,
354    elementsSelectable: true,
355    noPanClassName: "nopan",
356    rfId: "1"
357};
358function StoreUpdater(props) {
359    const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset, setDefaultNodesAndEdges } = useStore(selector$k, zustand_shallow__WEBPACK_IMPORTED_MODULE_5__/* .shallow */ .X);
360    const store = useStoreApi();
361    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
362        setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges);
363        return ()=>{
364            // when we reset the store we also need to reset the previous fields
365            previousFields.current = initPrevValues;
366            reset();
367        };
368    }, []);
369    const previousFields = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(initPrevValues);
370    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
371        for (const fieldName of fieldsToTrack){
372            const fieldValue = props[fieldName];
373            const previousFieldValue = previousFields.current[fieldName];
374            if (fieldValue === previousFieldValue) continue;
375            if (typeof props[fieldName] === "undefined") continue;
376            // Custom handling with dedicated setters for some fields
377            if (fieldName === "nodes") setNodes(fieldValue);
378            else if (fieldName === "edges") setEdges(fieldValue);
379            else if (fieldName === "minZoom") setMinZoom(fieldValue);
380            else if (fieldName === "maxZoom") setMaxZoom(fieldValue);
381            else if (fieldName === "translateExtent") setTranslateExtent(fieldValue);
382            else if (fieldName === "nodeExtent") setNodeExtent(fieldValue);
383            else if (fieldName === "ariaLabelConfig") store.setState({
384                ariaLabelConfig: (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .mergeAriaLabelConfig */ .AL)(fieldValue)
385            });
386            else if (fieldName === "fitView") store.setState({
387                fitViewQueued: fieldValue
388            });
389            else if (fieldName === "fitViewOptions") store.setState({
390                fitViewOptions: fieldValue
391            });
392            else store.setState({
393                [fieldName]: fieldValue
394            });
395        }
396        previousFields.current = props;
397    }, // Only re-run the effect if one of the fields we track changes
398    fieldsToTrack.map((fieldName)=>props[fieldName]));
399    return null;
400}
401function getMediaQuery() {
402    if (typeof window === "undefined" || !window.matchMedia) {
403        return null;
404    }
405    return window.matchMedia("(prefers-color-scheme: dark)");
406}
407/**
408 * Hook for receiving the current color mode class 'dark' or 'light'.
409 *
410 * @internal
411 * @param colorMode - The color mode to use ('dark', 'light' or 'system')
412 */ function useColorModeClass(colorMode) {
413    var _getMediaQuery;
414    const [colorModeClass, setColorModeClass] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(colorMode === "system" ? null : colorMode);
415    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
416        if (colorMode !== "system") {
417            setColorModeClass(colorMode);
418            return;
419        }
420        const mediaQuery = getMediaQuery();
421        const updateColorModeClass = ()=>setColorModeClass((mediaQuery === null || mediaQuery === void 0 ? void 0 : mediaQuery.matches) ? "dark" : "light");
422        updateColorModeClass();
423        mediaQuery === null || mediaQuery === void 0 ? void 0 : mediaQuery.addEventListener("change", updateColorModeClass);
424        return ()=>{
425            mediaQuery === null || mediaQuery === void 0 ? void 0 : mediaQuery.removeEventListener("change", updateColorModeClass);
426        };
427    }, [
428        colorMode
429    ]);
430    return colorModeClass !== null ? colorModeClass : ((_getMediaQuery = getMediaQuery()) === null || _getMediaQuery === void 0 ? void 0 : _getMediaQuery.matches) ? "dark" : "light";
431}
432const defaultDoc = typeof document !== "undefined" ? document : null;
433/**
434 * This hook lets you listen for specific key codes and tells you whether they are
435 * currently pressed or not.
436 *
437 * @public
438 * @param options - Options
439 *
440 * @example
441 * ```tsx
442 *import { useKeyPress } from '@xyflow/react';
443 *
444 *export default function () {
445 *  const spacePressed = useKeyPress('Space');
446 *  const cmdAndSPressed = useKeyPress(['Meta+s', 'Strg+s']);
447 *
448 *  return (
449 *    <div>
450 *     {spacePressed && <p>Space pressed!</p>}
451 *     {cmdAndSPressed && <p>Cmd + S pressed!</p>}
452 *    </div>
453 *  );
454 *}
455 *```
456 */ function useKeyPress() {
457    let /**

458 * The key code (string or array of strings) specifies which key(s) should trigger
459 * an action.
460 *
461 * A **string** can represent:
462 * - A **single key**, e.g. `'a'`
463 * - A **key combination**, using `'+'` to separate keys, e.g. `'a+d'`
464 *
465 * An  **array of strings** represents **multiple possible key inputs**. For example, `['a', 'd+s']`
466 * means the user can press either the single key `'a'` or the combination of `'d'` and `'s'`.
467 * @default null
468 */ keyCode = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : null, options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
469        target: defaultDoc,
470        actInsideInputWithModifier: true
471    };
472    const [keyPressed, setKeyPressed] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);
473    // we need to remember if a modifier key is pressed in order to track it
474    const modifierPressed = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);
475    // we need to remember the pressed keys in order to support combinations
476    const pressedKeys = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(new Set([]));
477    /*
478     * keyCodes = array with single keys [['a']] or key combinations [['a', 's']]
479     * keysToWatch = array with all keys flattened ['a', 'd', 'ShiftLeft']
480     * used to check if we store event.code or event.key. When the code is in the list of keysToWatch
481     * we use the code otherwise the key. Explainer: When you press the left "command" key, the code is "MetaLeft"
482     * and the key is "Meta". We want users to be able to pass keys and codes so we assume that the key is meant when
483     * we can't find it in the list of keysToWatch.
484     */ const [keyCodes, keysToWatch] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(()=>{
485        if (keyCode !== null) {
486            const keyCodeArr = Array.isArray(keyCode) ? keyCode : [
487                keyCode
488            ];
489            const keys = keyCodeArr.filter((kc)=>typeof kc === "string")/*
490                 * we first replace all '+' with '\n'  which we will use to split the keys on
491                 * then we replace '\n\n' with '\n+', this way we can also support the combination 'key++'
492                 * in the end we simply split on '\n' to get the key array
493                 */ .map((kc)=>kc.replace("+", "\n").replace("\n\n", "\n+").split("\n"));
494            const keysFlat = keys.reduce((res, item)=>res.concat(...item), []);
495            return [
496                keys,
497                keysFlat
498            ];
499        }
500        return [
501            [],
502            []
503        ];
504    }, [
505        keyCode
506    ]);
507    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
508        var _options_target;
509        const target = (_options_target = options === null || options === void 0 ? void 0 : options.target) !== null && _options_target !== void 0 ? _options_target : defaultDoc;
510        var _options_actInsideInputWithModifier;
511        const actInsideInputWithModifier = (_options_actInsideInputWithModifier = options === null || options === void 0 ? void 0 : options.actInsideInputWithModifier) !== null && _options_actInsideInputWithModifier !== void 0 ? _options_actInsideInputWithModifier : true;
512        if (keyCode !== null) {
513            const downHandler = (event)=>{
514                modifierPressed.current = event.ctrlKey || event.metaKey || event.shiftKey || event.altKey;
515                const preventAction = (!modifierPressed.current || modifierPressed.current && !actInsideInputWithModifier) && (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .isInputDOMNode */ .s$)(event);
516                if (preventAction) {
517                    return false;
518                }
519                const keyOrCode = useKeyOrCode(event.code, keysToWatch);
520                pressedKeys.current.add(event[keyOrCode]);
521                if (isMatchingKey(keyCodes, pressedKeys.current, false)) {
522                    var _event_composedPath, _event_composedPath1;
523                    const target = ((_event_composedPath1 = event.composedPath) === null || _event_composedPath1 === void 0 ? void 0 : (_event_composedPath = _event_composedPath1.call(event)) === null || _event_composedPath === void 0 ? void 0 : _event_composedPath[0]) || event.target;
524                    const isInteractiveElement = (target === null || target === void 0 ? void 0 : target.nodeName) === "BUTTON" || (target === null || target === void 0 ? void 0 : target.nodeName) === "A";
525                    if (options.preventDefault !== false && (modifierPressed.current || !isInteractiveElement)) {
526                        event.preventDefault();
527                    }
528                    setKeyPressed(true);
529                }
530            };
531            const upHandler = (event)=>{

532                const keyOrCode = useKeyOrCode(event.code, keysToWatch);
533                if (isMatchingKey(keyCodes, pressedKeys.current, true)) {
534                    setKeyPressed(false);
535                    pressedKeys.current.clear();
536                } else {
537                    pressedKeys.current.delete(event[keyOrCode]);
538                }
539                // fix for Mac: when cmd key is pressed, keyup is not triggered for any other key, see: https://stackoverflow.com/questions/27380018/when-cmd-key-is-kept-pressed-keyup-is-not-triggered-for-any-other-key
540                if (event.key === "Meta") {
541                    pressedKeys.current.clear();
542                }
543                modifierPressed.current = false;
544            };
545            const resetHandler = ()=>{
546                pressedKeys.current.clear();
547                setKeyPressed(false);
548            };
549            target === null || target === void 0 ? void 0 : target.addEventListener("keydown", downHandler);
550            target === null || target === void 0 ? void 0 : target.addEventListener("keyup", upHandler);
551            window.addEventListener("blur", resetHandler);
552            window.addEventListener("contextmenu", resetHandler);
553            return ()=>{
554                target === null || target === void 0 ? void 0 : target.removeEventListener("keydown", downHandler);
555                target === null || target === void 0 ? void 0 : target.removeEventListener("keyup", upHandler);
556                window.removeEventListener("blur", resetHandler);
557                window.removeEventListener("contextmenu", resetHandler);
558            };
559        }
560    }, [
561        keyCode,
562        setKeyPressed
563    ]);
564    return keyPressed;
565}
566// utils
567function isMatchingKey(keyCodes, pressedKeys, isUp) {
568    return keyCodes/*
569         * we only want to compare same sizes of keyCode definitions
570         * and pressed keys. When the user specified 'Meta' as a key somewhere
571         * this would also be truthy without this filter when user presses 'Meta' + 'r'
572         */ .filter((keys)=>isUp || keys.length === pressedKeys.size)/*
573         * since we want to support multiple possibilities only one of the
574         * combinations need to be part of the pressed keys
575         */ .some((keys)=>keys.every((k)=>pressedKeys.has(k)));
576}
577function useKeyOrCode(eventCode, keysToWatch) {
578    return keysToWatch.includes(eventCode) ? "code" : "key";
579}
580/**
581 * Hook for getting viewport helper functions.
582 *
583 * @internal
584 * @returns viewport helper functions
585 */ const useViewportHelper = ()=>{
586    const store = useStoreApi();
587    return (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(()=>{
588        return {
589            zoomIn: async (options)=>{
590                const { panZoom } = store.getState();
591                return panZoom ? panZoom.scaleBy(1.2, options) : false;
592            },
593            zoomOut: async (options)=>{
594                const { panZoom } = store.getState();
595                return panZoom ? panZoom.scaleBy(1 / 1.2, options) : false;
596            },
597            zoomTo: async (zoomLevel, options)=>{
598                const { panZoom } = store.getState();
599                return panZoom ? panZoom.scaleTo(zoomLevel, options) : false;
600            },
601            getZoom: ()=>store.getState().transform[2],
602            setViewport: async (viewport, options)=>{
603                const { transform: [tX, tY, tZoom], panZoom } = store.getState();
604                if (!panZoom) {
605                    return false;
606                }
607                var _viewport_x, _viewport_y, _viewport_zoom;
608                await panZoom.setViewport({
609                    x: (_viewport_x = viewport.x) !== null && _viewport_x !== void 0 ? _viewport_x : tX,
610                    y: (_viewport_y = viewport.y) !== null && _viewport_y !== void 0 ? _viewport_y : tY,
611                    zoom: (_viewport_zoom = viewport.zoom) !== null && _viewport_zoom !== void 0 ? _viewport_zoom : tZoom
612                }, options);
613                return true;
614            },
615            getViewport: ()=>{
616                const [x, y, zoom] = store.getState().transform;
617                return {
618                    x,
619                    y,
620                    zoom
621                };
622            },
623            setCenter: async (x, y, options)=>{
624                return store.getState().setCenter(x, y, options);
625            },
626            fitBounds: async (bounds, options)=>{
627                const { width, height, minZoom, maxZoom, panZoom } = store.getState();
628                var _options_padding;
629                const viewport = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .getViewportForBounds */ .$i)(bounds, width, height, minZoom, maxZoom, (_options_padding = options === null || options === void 0 ? void 0 : options.padding) !== null && _options_padding !== void 0 ? _options_padding : 0.1);
630                if (!panZoom) {
631                    return false;

632                }
633                await panZoom.setViewport(viewport, {
634                    duration: options === null || options === void 0 ? void 0 : options.duration,
635                    ease: options === null || options === void 0 ? void 0 : options.ease,
636                    interpolate: options === null || options === void 0 ? void 0 : options.interpolate
637                });
638                return true;
639            },
640            screenToFlowPosition: function(clientPosition) {
641                let options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
642                const { transform, snapGrid, snapToGrid, domNode } = store.getState();
643                if (!domNode) {
644                    return clientPosition;
645                }
646                const { x: domX, y: domY } = domNode.getBoundingClientRect();
647                const correctedPosition = {
648                    x: clientPosition.x - domX,
649                    y: clientPosition.y - domY
650                };
651                var _options_snapGrid;
652                const _snapGrid = (_options_snapGrid = options.snapGrid) !== null && _options_snapGrid !== void 0 ? _options_snapGrid : snapGrid;
653                var _options_snapToGrid;
654                const _snapToGrid = (_options_snapToGrid = options.snapToGrid) !== null && _options_snapToGrid !== void 0 ? _options_snapToGrid : snapToGrid;
655                return (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .pointToRendererPoint */ .m)(correctedPosition, transform, _snapToGrid, _snapGrid);
656            },
657            flowToScreenPosition: (flowPosition)=>{
658                const { transform, domNode } = store.getState();
659                if (!domNode) {
660                    return flowPosition;
661                }
662                const { x: domX, y: domY } = domNode.getBoundingClientRect();
663                const rendererPosition = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .rendererPointToPoint */ .oj)(flowPosition, transform);
664                return {
665                    x: rendererPosition.x + domX,
666                    y: rendererPosition.y + domY
667                };
668            }
669        };
670    }, []);
671};
672/*
673 * This function applies changes to nodes or edges that are triggered by React Flow internally.
674 * When you drag a node for example, React Flow will send a position change update.
675 * This function then applies the changes and returns the updated elements.
676 */ function applyChanges(changes, elements) {
677    const updatedElements = [];
678    /*
679     * By storing a map of changes for each element, we can a quick lookup as we
680     * iterate over the elements array!
681     */ const changesMap = new Map();
682    const addItemChanges = [];
683    for (const change of changes){
684        if (change.type === "add") {
685            addItemChanges.push(change);
686            continue;
687        } else if (change.type === "remove" || change.type === "replace") {
688            /*
689             * For a 'remove' change we can safely ignore any other changes queued for
690             * the same element, it's going to be removed anyway!
691             */ changesMap.set(change.id, [
692                change
693            ]);
694        } else {
695            const elementChanges = changesMap.get(change.id);
696            if (elementChanges) {
697                /*
698                 * If we have some changes queued already, we can do a mutable update of
699                 * that array and save ourselves some copying.
700                 */ elementChanges.push(change);
701            } else {
702                changesMap.set(change.id, [
703                    change
704                ]);
705            }
706        }
707    }
708    for (const element of elements){
709        const changes = changesMap.get(element.id);
710        /*
711         * When there are no changes for an element we can just push it unmodified,
712         * no need to copy it.
713         */ if (!changes) {
714            updatedElements.push(element);
715            continue;
716        }
717        // If we have a 'remove' change queued, it'll be the only change in the array
718        if (changes[0].type === "remove") {
719            continue;
720        }
721        if (changes[0].type === "replace") {
722            updatedElements.push({
723                ...changes[0].item
724            });
725            continue;
726        }
727        /**
728         * For other types of changes, we want to start with a shallow copy of the
729         * object so React knows this element has changed. Sequential changes will
730         * each _mutate_ this object, so there's only ever one copy.
731         */ const updatedElement = {
732            ...element
733        };
734        for (const change of changes){

735            applyChange(change, updatedElement);
736        }
737        updatedElements.push(updatedElement);
738    }
739    /*
740     * we need to wait for all changes to be applied before adding new items
741     * to be able to add them at the correct index
742     */ if (addItemChanges.length) {
743        addItemChanges.forEach((change)=>{
744            if (change.index !== undefined) {
745                updatedElements.splice(change.index, 0, {
746                    ...change.item
747                });
748            } else {
749                updatedElements.push({
750                    ...change.item
751                });
752            }
753        });
754    }
755    return updatedElements;
756}
757// Applies a single change to an element. This is a *mutable* update.
758function applyChange(change, element) {
759    switch(change.type){
760        case "select":
761            {
762                element.selected = change.selected;
763                break;
764            }
765        case "position":
766            {
767                if (typeof change.position !== "undefined") {
768                    element.position = change.position;
769                }
770                if (typeof change.dragging !== "undefined") {
771                    element.dragging = change.dragging;
772                }
773                break;
774            }
775        case "dimensions":
776            {
777                if (typeof change.dimensions !== "undefined") {
778                    element.measured = {
779                        ...change.dimensions
780                    };
781                    if (change.setAttributes) {
782                        if (change.setAttributes === true || change.setAttributes === "width") {
783                            element.width = change.dimensions.width;
784                        }
785                        if (change.setAttributes === true || change.setAttributes === "height") {
786                            element.height = change.dimensions.height;
787                        }
788                    }
789                }
790                if (typeof change.resizing === "boolean") {
791                    element.resizing = change.resizing;
792                }
793                break;
794            }
795    }
796}
797/**
798 * Drop in function that applies node changes to an array of nodes.
799 * @public
800 * @param changes - Array of changes to apply.
801 * @param nodes - Array of nodes to apply the changes to.
802 * @returns Array of updated nodes.
803 * @example
804 *```tsx
805 *import { useState, useCallback } from 'react';
806 *import { ReactFlow, applyNodeChanges, type Node, type Edge, type OnNodesChange } from '@xyflow/react';
807 *
808 *export default function Flow() {
809 *  const [nodes, setNodes] = useState<Node[]>([]);
810 *  const [edges, setEdges] = useState<Edge[]>([]);
811 *  const onNodesChange: OnNodesChange = useCallback(
812 *    (changes) => {
813 *      setNodes((oldNodes) => applyNodeChanges(changes, oldNodes));
814 *    },
815 *    [setNodes],
816 *  );
817 *
818 *  return (
819 *    <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} />
820 *  );
821 *}
822 *```
823 * @remarks Various events on the <ReactFlow /> component can produce an {@link NodeChange}
824 * that describes how to update the edges of your flow in some way.
825 * If you don't need any custom behaviour, this util can be used to take an array
826 * of these changes and apply them to your edges.
827 */ function applyNodeChanges(changes, nodes) {
828    return applyChanges(changes, nodes);
829}
830/**
831 * Drop in function that applies edge changes to an array of edges.
832 * @public
833 * @param changes - Array of changes to apply.
834 * @param edges - Array of edge to apply the changes to.
835 * @returns Array of updated edges.
836 * @example
837 * ```tsx
838 *import { useState, useCallback } from 'react';
839 *import { ReactFlow, applyEdgeChanges } from '@xyflow/react';
840 *
841 *export default function Flow() {
842 *  const [nodes, setNodes] = useState([]);
843 *  const [edges, setEdges] = useState([]);
844 *  const onEdgesChange = useCallback(
845 *    (changes) => {
846 *      setEdges((oldEdges) => applyEdgeChanges(changes, oldEdges));
847 *    },
848 *    [setEdges],
849 *  );
850 *
851 *  return (
852 *    <ReactFlow nodes={nodes} edges={edges} onEdgesChange={onEdgesChange} />
853 *  );
854 *}
855 *```

856 * @remarks Various events on the <ReactFlow /> component can produce an {@link EdgeChange}
857 * that describes how to update the edges of your flow in some way.
858 * If you don't need any custom behaviour, this util can be used to take an array
859 * of these changes and apply them to your edges.
860 */ function applyEdgeChanges(changes, edges) {
861    return applyChanges(changes, edges);
862}
863function createSelectionChange(id, selected) {
864    return {
865        id,
866        type: "select",
867        selected
868    };
869}
870function getSelectionChanges(items) {
871    let selectedIds = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : new Set(), mutateItem = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
872    const changes = [];
873    for (const [id, item] of items){
874        const willBeSelected = selectedIds.has(id);
875        // we don't want to set all items to selected=false on the first selection
876        if (!(item.selected === undefined && !willBeSelected) && item.selected !== willBeSelected) {
877            if (mutateItem) {
878                /*
879                 * this hack is needed for nodes. When the user dragged a node, it's selected.
880                 * When another node gets dragged, we need to deselect the previous one,
881                 * in order to have only one selected node at a time - the onNodesChange callback comes too late here :/
882                 */ item.selected = willBeSelected;
883            }
884            changes.push(createSelectionChange(item.id, willBeSelected));
885        }
886    }
887    return changes;
888}
889function getElementsDiffChanges(param) {
890    let { items = [], lookup } = param;
891    const changes = [];
892    const itemsLookup = new Map(items.map((item)=>[
893            item.id,
894            item
895        ]));
896    for (const [index, item] of items.entries()){
897        var _lookupItem_internals;
898        const lookupItem = lookup.get(item.id);
899        var _lookupItem_internals_userNode;
900        const storeItem = (_lookupItem_internals_userNode = lookupItem === null || lookupItem === void 0 ? void 0 : (_lookupItem_internals = lookupItem.internals) === null || _lookupItem_internals === void 0 ? void 0 : _lookupItem_internals.userNode) !== null && _lookupItem_internals_userNode !== void 0 ? _lookupItem_internals_userNode : lookupItem;
901        if (storeItem !== undefined && storeItem !== item) {
902            changes.push({
903                id: item.id,
904                item: item,
905                type: "replace"
906            });
907        }
908        if (storeItem === undefined) {
909            changes.push({
910                item: item,
911                type: "add",
912                index
913            });
914        }
915    }
916    for (const [id] of lookup){
917        const nextNode = itemsLookup.get(id);
918        if (nextNode === undefined) {
919            changes.push({
920                id,
921                type: "remove"
922            });
923        }
924    }
925    return changes;
926}
927function elementToRemoveChange(item) {
928    return {
929        id: item.id,
930        type: "remove"
931    };
932}
933const defaultOnError = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .createDevWarn */ .F1)("React Flow", "https://reactflow.dev/");
934function addEdge(edgeParams, edges) {
935    let options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
936    var _options_onError;
937    return (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .addEdge */ .Z_)(edgeParams, edges, {
938        ...options,
939        onError: (_options_onError = options.onError) !== null && _options_onError !== void 0 ? _options_onError : defaultOnError
940    });
941}
942function reconnectEdge(oldEdge, newConnection, edges) {
943    let options = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {
944        shouldReplaceId: true
945    };
946    var _options_onError;
947    return reconnectEdge$1(oldEdge, newConnection, edges, {
948        ...options,
949        onError: (_options_onError = options.onError) !== null && _options_onError !== void 0 ? _options_onError : defaultOnError
950    });
951}
952/**
953 * Test whether an object is usable as an [`Node`](/api-reference/types/node).
954 * In TypeScript this is a type guard that will narrow the type of whatever you pass in to
955 * [`Node`](/api-reference/types/node) if it returns `true`.
956 *
957 * @public
958 * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true
959 * @param element - The element to test.
960 * @returns Tests whether the provided value can be used as a `Node`. If you're using TypeScript,
961 * this function acts as a type guard and will narrow the type of the value to `Node` if it returns
962 * `true`.
963 *
964 * @example
965 * ```js
966 *import { isNode } from '@xyflow/react';
967 *
968 *if (isNode(node)) {
969 * // ...
970 *}
971 *```
972 */ const isNode = (element)=>(0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .isNodeBase */ .Vt)(element);
973/**
974 * Test whether an object is usable as an [`Edge`](/api-reference/types/edge).
975 * In TypeScript this is a type guard that will narrow the type of whatever you pass in to
976 * [`Edge`](/api-reference/types/edge) if it returns `true`.
977 *
978 * @public
979 * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true
980 * @param element - The element to test
981 * @returns Tests whether the provided value can be used as an `Edge`. If you're using TypeScript,
982 * this function acts as a type guard and will narrow the type of the value to `Edge` if it returns
983 * `true`.
984 *
985 * @example
986 * ```js
987 *import { isEdge } from '@xyflow/react';
988 *
989 *if (isEdge(edge)) {
990 * // ...
991 *}
992 *```
993 */ const isEdge = (element)=>(0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .isEdgeBase */ .J3)(element);
994// eslint-disable-next-line @typescript-eslint/no-empty-object-type
995function fixedForwardRef(render) {
996    // eslint-disable-next-line @typescript-eslint/no-explicit-any
997    return /*#__PURE__*/ (0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(render);
998}
999// we need this hook to prevent a warning when using react-flow in SSR
1000const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect : react__WEBPACK_IMPORTED_MODULE_1__.useEffect;
1001/**
1002 * This hook returns a queue that can be used to batch updates.
1003 *
1004 * @param runQueue - a function that gets called when the queue is flushed
1005 * @internal
1006 *
1007 * @returns a Queue object
1008 */ function useQueue(runQueue) {
1009    /*
1010     * Because we're using a ref above, we need some way to let React know when to
1011     * actually process the queue. We increment this number any time we mutate the
1012     * queue, creating a new state to trigger the layout effect below.

1013     * Using a boolean dirty flag here instead would lead to issues related to
1014     * automatic batching. (https://github.com/xyflow/xyflow/issues/4779)
1015     */ const [serial, setSerial] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(BigInt(0));
1016    /*
1017     * A reference of all the batched updates to process before the next render. We
1018     * want a reference here so multiple synchronous calls to `setNodes` etc can be
1019     * batched together.
1020     */ const [queue] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(()=>createQueue(()=>setSerial((n)=>n + BigInt(1))));
1021    /*
1022     * Layout effects are guaranteed to run before the next render which means we
1023     * shouldn't run into any issues with stale state or weird issues that come from
1024     * rendering things one frame later than expected (we used to use `setTimeout`).
1025     */ useIsomorphicLayoutEffect(()=>{
1026        const queueItems = queue.get();
1027        if (queueItems.length) {
1028            runQueue(queueItems);
1029            queue.reset();
1030        }
1031    }, [
1032        serial
1033    ]);
1034    return queue;
1035}
1036function createQueue(cb) {
1037    let queue = [];
1038    return {
1039        get: ()=>queue,
1040        reset: ()=>{
1041            queue = [];
1042        },
1043        push: (item)=>{
1044            queue.push(item);
1045            cb();
1046        }
1047    };
1048}
1049const BatchContext = /*#__PURE__*/ (0,react__WEBPACK_IMPORTED_MODULE_1__.createContext)(null);
1050/**
1051 * This is a context provider that holds and processes the node and edge update queues
1052 * that are needed to handle setNodes, addNodes, setEdges and addEdges.
1053 *
1054 * @internal
1055 */ function BatchProvider(param) {
1056    let { children } = param;
1057    const store = useStoreApi();
1058    const nodeQueueHandler = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)((queueItems)=>{
1059        const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup, fitViewQueued, onNodesChangeMiddlewareMap } = store.getState();
1060        /*
1061         * This is essentially an `Array.reduce` in imperative clothing. Processing
1062         * this queue is a relatively hot path so we'd like to avoid the overhead of
1063         * array methods where we can.
1064         */ let next = nodes;
1065        for (const payload of queueItems){
1066            next = typeof payload === "function" ? payload(next) : payload;
1067        }
1068        let changes = getElementsDiffChanges({
1069            items: next,
1070            lookup: nodeLookup
1071        });
1072        for (const middleware of onNodesChangeMiddlewareMap.values()){
1073            changes = middleware(changes);
1074        }
1075        if (hasDefaultNodes) {
1076            setNodes(next);
1077        }
1078        // We only want to fire onNodesChange if there are changes to the nodes
1079        if (changes.length > 0) {
1080            onNodesChange === null || onNodesChange === void 0 ? void 0 : onNodesChange(changes);
1081        } else if (fitViewQueued) {
1082            // If there are no changes to the nodes, we still need to call setNodes
1083            // to trigger a re-render and fitView.
1084            window.requestAnimationFrame(()=>{
1085                const { fitViewQueued, nodes, setNodes } = store.getState();
1086                if (fitViewQueued) {
1087                    setNodes(nodes);
1088                }
1089            });
1090        }
1091    }, []);
1092    const nodeQueue = useQueue(nodeQueueHandler);
1093    const edgeQueueHandler = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)((queueItems)=>{
1094        const { edges = [], setEdges, hasDefaultEdges, onEdgesChange, edgeLookup } = store.getState();
1095        let next = edges;
1096        for (const payload of queueItems){
1097            next = typeof payload === "function" ? payload(next) : payload;
1098        }
1099        if (hasDefaultEdges) {
1100            setEdges(next);
1101        } else if (onEdgesChange) {
1102            onEdgesChange(getElementsDiffChanges({
1103                items: next,
1104                lookup: edgeLookup
1105            }));
1106        }
1107    }, []);
1108    const edgeQueue = useQueue(edgeQueueHandler);
1109    const value = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(()=>({
1110            nodeQueue,
1111            edgeQueue
1112        }), []);
1113    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(BatchContext.Provider, {
1114        value: value,
1115        children: children
1116    });
1117}
1118function useBatchContext() {
1119    const batchContext = (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(BatchContext);
1120    if (!batchContext) {
1121        throw new Error("useBatchContext must be used within a BatchProvider");
1122    }
1123    return batchContext;
1124}
1125const selector$j = (s)=>

1125!!s.panZoom;
1126/**
1127 * This hook returns a ReactFlowInstance that can be used to update nodes and edges, manipulate the viewport, or query the current state of the flow.
1128 *
1129 * @public
1130 * @example
1131 * ```jsx
1132 *import { useCallback, useState } from 'react';
1133 *import { useReactFlow } from '@xyflow/react';
1134 *
1135 *export function NodeCounter() {
1136 *  const reactFlow = useReactFlow();
1137 *  const [count, setCount] = useState(0);
1138 *  const countNodes = useCallback(() => {
1139 *    setCount(reactFlow.getNodes().length);
1140 *    // you need to pass it as a dependency if you are using it with useEffect or useCallback
1141 *    // because at the first render, it's not initialized yet and some functions might not work.
1142 *  }, [reactFlow]);
1143 *
1144 *  return (
1145 *    <div>
1146 *      <button onClick={countNodes}>Update count</button>
1147 *      <p>There are {count} nodes in the flow.</p>
1148 *    </div>
1149 *  );
1150 *}
1151 *```
1152 */ function useReactFlow() {
1153    const viewportHelper = useViewportHelper();
1154    const store = useStoreApi();
1155    const batchContext = useBatchContext();
1156    const viewportInitialized = useStore(selector$j);
1157    const generalHelper = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(()=>{
1158        const getInternalNode = (id)=>store.getState().nodeLookup.get(id);
1159        const setNodes = (payload)=>{
1160            batchContext.nodeQueue.push(payload);
1161        };
1162        const setEdges = (payload)=>{
1163            batchContext.edgeQueue.push(payload);
1164        };
1165        const getNodeRect = (node)=>{
1166            var _nodeToUse_measured, _nodeToUse_measured1;
1167            const { nodeLookup, nodeOrigin } = store.getState();
1168            const nodeToUse = isNode(node) ? node : nodeLookup.get(node.id);
1169            const position = nodeToUse.parentId ? (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .evaluateAbsolutePosition */ .ZB)(nodeToUse.position, nodeToUse.measured, nodeToUse.parentId, nodeLookup, nodeOrigin) : nodeToUse.position;
1170            var _nodeToUse_measured_width, _nodeToUse_measured_height;
1171            const nodeWithPosition = {
1172                ...nodeToUse,
1173                position,
1174                width: (_nodeToUse_measured_width = (_nodeToUse_measured = nodeToUse.measured) === null || _nodeToUse_measured === void 0 ? void 0 : _nodeToUse_measured.width) !== null && _nodeToUse_measured_width !== void 0 ? _nodeToUse_measured_width : nodeToUse.width,
1175                height: (_nodeToUse_measured_height = (_nodeToUse_measured1 = nodeToUse.measured) === null || _nodeToUse_measured1 === void 0 ? void 0 : _nodeToUse_measured1.height) !== null && _nodeToUse_measured_height !== void 0 ? _nodeToUse_measured_height : nodeToUse.height
1176            };
1177            return (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .nodeToRect */ .PS)(nodeWithPosition);
1178        };
1179        const updateNode = function(id, nodeUpdate) {
1180            let options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {
1181                replace: false
1182            };
1183            setNodes((prevNodes)=>prevNodes.map((node)=>{
1184                    if (node.id === id) {
1185                        const nextNode = typeof nodeUpdate === "function" ? nodeUpdate(node) : nodeUpdate;
1186                        return options.replace && isNode(nextNode) ? nextNode : {
1187                            ...node,
1188                            ...nextNode
1189                        };
1190                    }
1191                    return node;
1192                }));
1193        };
1194        const updateEdge = function(id, edgeUpdate) {
1195            let options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {
1196                replace: false
1197            };
1198            setEdges((prevEdges)=>prevEdges.map((edge)=>{
1199                    if (edge.id === id) {
1200                        const nextEdge = typeof edgeUpdate === "function" ? edgeUpdate(edge) : edgeUpdate;
1201                        return options.replace && isEdge(nextEdge) ? nextEdge : {
1202                            ...edge,
1203                            ...nextEdge
1204                        };
1205                    }
1206                    return edge;
1207                }));
1208        };
1209        return {
1210            getNodes: ()=>store.getState().nodes.map((n)=>({
1211                        ...n
1212                    })),
1213            getNode: (id)=>{
1214                var _getInternalNode;
1215                return (_getInternalNode = getInternalNode(id)) === null || _getInternalNode === void 0 ? void 0 : _getInternalNode.internals.userNode;

1216            },
1217            getInternalNode,
1218            getEdges: ()=>{
1219                const { edges = [] } = store.getState();
1220                return edges.map((e)=>({
1221                        ...e
1222                    }));
1223            },
1224            getEdge: (id)=>store.getState().edgeLookup.get(id),
1225            setNodes,
1226            setEdges,
1227            addNodes: (payload)=>{
1228                const newNodes = Array.isArray(payload) ? payload : [
1229                    payload
1230                ];
1231                batchContext.nodeQueue.push((nodes)=>[
1232                        ...nodes,
1233                        ...newNodes
1234                    ]);
1235            },
1236            addEdges: (payload)=>{
1237                const newEdges = Array.isArray(payload) ? payload : [
1238                    payload
1239                ];
1240                batchContext.edgeQueue.push((edges)=>[
1241                        ...edges,
1242                        ...newEdges
1243                    ]);
1244            },
1245            toObject: ()=>{
1246                const { nodes = [], edges = [], transform } = store.getState();
1247                const [x, y, zoom] = transform;
1248                return {
1249                    nodes: nodes.map((n)=>({
1250                            ...n
1251                        })),
1252                    edges: edges.map((e)=>({
1253                            ...e
1254                        })),
1255                    viewport: {
1256                        x,
1257                        y,
1258                        zoom
1259                    }
1260                };
1261            },
1262            deleteElements: async (param)=>{
1263                let { nodes: nodesToRemove = [], edges: edgesToRemove = [] } = param;
1264                const { nodes, edges, onNodesDelete, onEdgesDelete, triggerNodeChanges, triggerEdgeChanges, onDelete, onBeforeDelete } = store.getState();
1265                const { nodes: matchingNodes, edges: matchingEdges } = await (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .getElementsToRemove */ .WD)({
1266                    nodesToRemove,
1267                    edgesToRemove,
1268                    nodes,
1269                    edges,
1270                    onBeforeDelete
1271                });
1272                const hasMatchingEdges = matchingEdges.length > 0;
1273                const hasMatchingNodes = matchingNodes.length > 0;
1274                if (hasMatchingEdges) {
1275                    const edgeChanges = matchingEdges.map(elementToRemoveChange);
1276                    onEdgesDelete === null || onEdgesDelete === void 0 ? void 0 : onEdgesDelete(matchingEdges);
1277                    triggerEdgeChanges(edgeChanges);
1278                }
1279                if (hasMatchingNodes) {
1280                    const nodeChanges = matchingNodes.map(elementToRemoveChange);
1281                    onNodesDelete === null || onNodesDelete === void 0 ? void 0 : onNodesDelete(matchingNodes);
1282                    triggerNodeChanges(nodeChanges);
1283                }
1284                if (hasMatchingNodes || hasMatchingEdges) {
1285                    onDelete === null || onDelete === void 0 ? void 0 : onDelete({
1286                        nodes: matchingNodes,
1287                        edges: matchingEdges
1288                    });
1289                }
1290                return {
1291                    deletedNodes: matchingNodes,
1292                    deletedEdges: matchingEdges
1293                };
1294            },
1295            /**
1296             * Partial is defined as "the 2 nodes/areas are intersecting partially".
1297             * If a is contained in b or b is contained in a, they are both
1298             * considered fully intersecting.
1299             */ getIntersectingNodes: function(nodeOrRect) {
1300                let partially = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true, nodes = arguments.length > 2 ? arguments[2] : void 0;
1301                const isRect = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .isRectObject */ .J$)(nodeOrRect);
1302                const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
1303                const hasNodesOption = nodes !== undefined;
1304                if (!nodeRect) {
1305                    return [];
1306                }
1307                return (nodes || store.getState().nodes).filter((n)=>{
1308                    const internalNode = store.getState().nodeLookup.get(n.id);
1309                    if (internalNode && !isRect && (n.id === nodeOrRect.id || !internalNode.internals.positionAbsolute)) {
1310                        return false;

1311                    }
1312                    const currNodeRect = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .nodeToRect */ .PS)(hasNodesOption ? n : internalNode);
1313                    const overlappingArea = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .getOverlappingArea */ .lp)(currNodeRect, nodeRect);
1314                    const partiallyVisible = partially && overlappingArea > 0;
1315                    return partiallyVisible || overlappingArea >= currNodeRect.width * currNodeRect.height || overlappingArea >= nodeRect.width * nodeRect.height;
1316                });
1317            },
1318            isNodeIntersecting: function(nodeOrRect, area) {
1319                let partially = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : true;
1320                const isRect = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .isRectObject */ .J$)(nodeOrRect);
1321                const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
1322                if (!nodeRect) {
1323                    return false;
1324                }
1325                const overlappingArea = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .getOverlappingArea */ .lp)(nodeRect, area);
1326                const partiallyVisible = partially && overlappingArea > 0;
1327                return partiallyVisible || overlappingArea >= area.width * area.height || overlappingArea >= nodeRect.width * nodeRect.height;
1328            },
1329            updateNode,
1330            updateNodeData: function(id, dataUpdate) {
1331                let options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {
1332                    replace: false
1333                };
1334                updateNode(id, (node)=>{
1335                    const nextData = typeof dataUpdate === "function" ? dataUpdate(node) : dataUpdate;
1336                    return options.replace ? {
1337                        ...node,
1338                        data: nextData
1339                    } : {
1340                        ...node,
1341                        data: {
1342                            ...node.data,
1343                            ...nextData
1344                        }
1345                    };
1346                }, options);
1347            },
1348            updateEdge,
1349            updateEdgeData: function(id, dataUpdate) {
1350                let options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {
1351                    replace: false
1352                };
1353                updateEdge(id, (edge)=>{
1354                    const nextData = typeof dataUpdate === "function" ? dataUpdate(edge) : dataUpdate;
1355                    return options.replace ? {
1356                        ...edge,
1357                        data: nextData
1358                    } : {
1359                        ...edge,
1360                        data: {
1361                            ...edge.data,
1362                            ...nextData
1363                        }
1364                    };
1365                }, options);
1366            },
1367            getNodesBounds: (nodes)=>{
1368                const { nodeLookup, nodeOrigin } = store.getState();
1369                return (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .getNodesBounds */ .RX)(nodes, {
1370                    nodeLookup,
1371                    nodeOrigin
1372                });
1373            },
1374            getHandleConnections: (param)=>{
1375                let { type, id, nodeId } = param;
1376                var _store_getState_connectionLookup_get;
1377                var _store_getState_connectionLookup_get_values;
1378                return Array.from((_store_getState_connectionLookup_get_values = (_store_getState_connectionLookup_get = store.getState().connectionLookup.get("".concat(nodeId, "-").concat(type).concat(id ? "-".concat(id) : ""))) === null || _store_getState_connectionLookup_get === void 0 ? void 0 : _store_getState_connectionLookup_get.values()) !== null && _store_getState_connectionLookup_get_values !== void 0 ? _store_getState_connectionLookup_get_values : []);
1379            },
1380            getNodeConnections: (param)=>{
1381                let { type, handleId, nodeId } = param;
1382                var _store_getState_connectionLookup_get;
1383                var _store_getState_connectionLookup_get_values;
1384                return Array.from((_store_getState_connectionLookup_get_values = (_store_getState_connectionLookup_get = store.getState().connectionLookup.get("".concat(nodeId).concat(type ? handleId ? "-".concat(type, "-").concat(handleId) : "-".concat(type) : ""))) === null || _store_getState_connectionLookup_get === void 0 ? void 0 : _store_getState_connectionLookup_get.values()) !== null && _store_getState_connectionLookup_get_values !== void 0 ? _store_getState_connectionLookup_get_values : []);
1385            },
1386            fitView: async (options)=>{
1387                var _store_getState_fitViewResolver;
1388                // We either create a new Promise or reuse the existing one
1389                // Even if fitView is called multiple times in a row, we only end up with a single Promise
1390                const fitViewResolver = (_store_getState_fitViewResolver = store.getState().fitViewResolver) !== null && _store_getState_fitViewResolver !== void 0 ? _store_getState_fitViewResolver : (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .withResolvers */ .nu)();
1391                // We schedule a fitView by setting fitViewQueued and triggering a setNodes
1392                store.setState({
1393                    fitViewQueued: true,
1394                    fitViewOptions: options,
1395                    fitViewResolver
1396                });
1397                batchContext.nodeQueue.push((nodes)=>[
1398                        ...nodes
1399                    ]);
1400                return fitViewResolver.promise;
1401            }
1402        };
1403    }, []);
1404    return (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(()=>{
1405        return {
1406            ...generalHelper,
1407            ...viewportHelper,
1408            viewportInitialized
1409        };
1410    }, [
1411        viewportInitialized
1412    ]);
1413}
1414const selected = (item)=>item.selected;
1415const win$1 = typeof window !== "undefined" ? window : undefined;
1416/**
1417 * Hook for handling global key events.
1418 *
1419 * @internal
1420 */ function useGlobalKeyHandler(param) {
1421    let { deleteKeyCode, multiSelectionKeyCode } = param;
1422    const store = useStoreApi();
1423    const { deleteElements } = useReactFlow();
1424    const deleteKeyPressed = useKeyPress(deleteKeyCode, {
1425        actInsideInputWithModifier: false
1426    });
1427    const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode, {
1428        target: win$1
1429    });
1430    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
1431        if (deleteKeyPressed) {
1432            const { edges, nodes } = store.getState();
1433            deleteElements({
1434                nodes: nodes.filter(selected),
1435                edges: edges.filter(selected)
1436            });
1437            store.setState({
1438                nodesSelectionActive: false
1439            });
1440        }
1441    }, [
1442        deleteKeyPressed
1443    ]);
1444    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
1445        store.setState({
1446            multiSelectionActive: multiSelectionKeyPressed
1447        });
1448    }, [
1449        multiSelectionKeyPressed
1450    ]);
1451}
1452/**
1453 * Hook for handling resize events.
1454 *
1455 * @internal
1456 */ function useResizeHandler(domNode) {
1457    const store = useStoreApi();
1458    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
1459        const updateDimensions = ()=>{
1460            var _domNode_current_checkVisibility, _domNode_current;
1461            var _domNode_current_checkVisibility1;
1462            if (!domNode.current || !((_domNode_current_checkVisibility1 = (_domNode_current_checkVisibility = (_domNode_current = domNode.current).checkVisibility) === null || _domNode_current_checkVisibility === void 0 ? void 0 : _domNode_current_checkVisibility.call(_domNode_current)) !== null && _domNode_current_checkVisibility1 !== void 0 ? _domNode_current_checkVisibility1 : true)) {
1463                return false;

1464            }
1465            const size = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .getDimensions */ .t_)(domNode.current);
1466            if (size.height === 0 || size.width === 0) {
1467                var _store_getState_onError, _store_getState;
1468                (_store_getState_onError = (_store_getState = store.getState()).onError) === null || _store_getState_onError === void 0 ? void 0 : _store_getState_onError.call(_store_getState, "004", _xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .errorMessages */ .Qj["error004"]());
1469            }
1470            store.setState({
1471                width: size.width || 500,
1472                height: size.height || 500
1473            });
1474        };
1475        if (domNode.current) {
1476            updateDimensions();
1477            window.addEventListener("resize", updateDimensions);
1478            const resizeObserver = new ResizeObserver(()=>updateDimensions());
1479            resizeObserver.observe(domNode.current);
1480            return ()=>{
1481                window.removeEventListener("resize", updateDimensions);
1482                if (resizeObserver && domNode.current) {
1483                    resizeObserver.unobserve(domNode.current);
1484                }
1485            };
1486        }
1487    }, []);
1488}
1489const containerStyle = {
1490    position: "absolute",
1491    width: "100%",
1492    height: "100%",
1493    top: 0,
1494    left: 0
1495};
1496const selector$i = (s)=>({
1497        userSelectionActive: s.userSelectionActive,
1498        lib: s.lib,
1499        connectionInProgress: s.connection.inProgress
1500    });
1501function ZoomPane(param) {
1502    let { onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = _xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .PanOnScrollMode */ .IY.Free, zoomOnDoubleClick = true, panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = true, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance, selectionOnDrag } = param;
1503    const store = useStoreApi();
1504    const zoomPane = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
1505    const { userSelectionActive, lib, connectionInProgress } = useStore(selector$i, zustand_shallow__WEBPACK_IMPORTED_MODULE_5__/* .shallow */ .X);
1506    const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode);
1507    const panZoom = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)();
1508    useResizeHandler(zoomPane);
1509    const onTransformChange = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)((transform)=>{
1510        onViewportChange === null || onViewportChange === void 0 ? void 0 : onViewportChange({
1511            x: transform[0],
1512            y: transform[1],
1513            zoom: transform[2]
1514        });
1515        if (!isControlledViewport) {
1516            store.setState({
1517                transform
1518            });
1519        }
1520    }, [
1521        onViewportChange,
1522        isControlledViewport
1523    ]);
1524    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
1525        if (zoomPane.current) {
1526            panZoom.current = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .XYPanZoom */ .X6)({
1527                domNode: zoomPane.current,
1528                minZoom,
1529                maxZoom,
1530                translateExtent,
1531                viewport: defaultViewport,
1532                onDraggingChange: (paneDragging)=>store.setState((prevState)=>prevState.paneDragging === paneDragging ? prevState : {
1533                            paneDragging
1534                        }),
1535                onPanZoomStart: (event, vp)=>{
1536                    const { onViewportChangeStart, onMoveStart } = store.getState();
1537                    onMoveStart === null || onMoveStart === void 0 ? void 0 : onMoveStart(event, vp);
1538                    onViewportChangeStart === null || onViewportChangeStart === void 0 ? void 0 : onViewportChangeStart(vp);
1539                },
1540                onPanZoom: (event, vp)=>{
1541                    const { onViewportChange, onMove } = store.getState();
1542                    onMove === null || onMove === void 0 ? void 0 : onMove(event, vp);
1543                    onViewportChange === null || onViewportChange === void 0 ? void 0 : onViewportChange(vp);
1544                },
1545                onPanZoomEnd: (event, vp)=>{
1546                    const { onViewportChangeEnd, onMoveEnd } = store.getState();
1547                    onMoveEnd === null || onMoveEnd === void 0 ? void 0 : onMoveEnd(event, vp);
1548                    onViewportChangeEnd === null || onViewportChangeEnd === void 0 ? void 0 : onViewportChangeEnd(vp);
1549                }
1550            });
1551            const { x, y, zoom } = panZoom.current.getViewport();
1552            store.setState({
1553                panZoom: panZoom.current,
1554                transform: [
1555                    x,
1556                    y,
1557                    zoom
1558                ],
1559                domNode: zoomPane.current.closest(".react-flow")
1560            });
1561            return ()=>{
1562                var _panZoom_current;
1563                (_panZoom_current = panZoom.current) === null || _panZoom_current === void 0 ? void 0 : _panZ

1563oom_current.destroy();
1564            };
1565        }
1566    }, []);
1567    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
1568        var _panZoom_current;
1569        (_panZoom_current = panZoom.current) === null || _panZoom_current === void 0 ? void 0 : _panZoom_current.update({
1570            onPaneContextMenu,
1571            zoomOnScroll,
1572            zoomOnPinch,
1573            panOnScroll,
1574            panOnScrollSpeed,
1575            panOnScrollMode,
1576            zoomOnDoubleClick,
1577            panOnDrag,
1578            zoomActivationKeyPressed,
1579            preventScrolling,
1580            noPanClassName,
1581            userSelectionActive,
1582            noWheelClassName,
1583            lib,
1584            onTransformChange,
1585            connectionInProgress,
1586            selectionOnDrag,
1587            paneClickDistance
1588        });
1589    }, [
1590        onPaneContextMenu,
1591        zoomOnScroll,
1592        zoomOnPinch,
1593        panOnScroll,
1594        panOnScrollSpeed,
1595        panOnScrollMode,
1596        zoomOnDoubleClick,
1597        panOnDrag,
1598        zoomActivationKeyPressed,
1599        preventScrolling,
1600        noPanClassName,
1601        userSelectionActive,
1602        noWheelClassName,
1603        lib,
1604        onTransformChange,
1605        connectionInProgress,
1606        selectionOnDrag,
1607        paneClickDistance
1608    ]);
1609    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
1610        className: "react-flow__renderer",
1611        ref: zoomPane,
1612        style: containerStyle,
1613        children: children
1614    });
1615}
1616const selector$h = (s)=>({
1617        userSelectionActive: s.userSelectionActive,
1618        userSelectionRect: s.userSelectionRect
1619    });
1620function UserSelection() {
1621    const { userSelectionActive, userSelectionRect } = useStore(selector$h, zustand_shallow__WEBPACK_IMPORTED_MODULE_5__/* .shallow */ .X);
1622    const isActive = userSelectionActive && userSelectionRect;
1623    if (!isActive) {
1624        return null;
1625    }
1626    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
1627        className: "react-flow__selection react-flow__container",
1628        style: {
1629            width: userSelectionRect.width,
1630            height: userSelectionRect.height,
1631            transform: "translate(".concat(userSelectionRect.x, "px, ").concat(userSelectionRect.y, "px)")
1632        }
1633    });
1634}
1635const wrapHandler = (handler, containerRef)=>{
1636    return (event)=>{
1637        if (event.target !== containerRef.current) {
1638            return;
1639        }
1640        handler === null || handler === void 0 ? void 0 : handler(event);
1641    };
1642};
1643const selector$g = (s)=>({
1644        userSelectionActive: s.userSelectionActive,
1645        elementsSelectable: s.elementsSelectable,
1646        dragging: s.paneDragging,
1647        panBy: s.panBy,
1648        autoPanSpeed: s.autoPanSpeed
1649    });
1650function Pane(param) {
1651    let { isSelecting, selectionKeyPressed, selectionMode = _xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .SelectionMode */ .oW.Full, panOnDrag, autoPanOnSelection, paneClickDistance, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children } = param;
1652    const autoPanId = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(0);
1653    const store = useStoreApi();
1654    const { userSelectionActive, elementsSelectable, dragging, panBy, autoPanSpeed } = useStore(selector$g, zustand_shallow__WEBPACK_IMPORTED_MODULE_5__/* .shallow */ .X);
1655    const isSelectionEnabled = elementsSelectable && (isSelecting || userSelectionActive);
1656    const container = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
1657    const containerBounds = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)();
1658    const selectedNodeIds = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(new Set());
1659    const selectedEdgeIds = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(new Set());
1660    const connectionEndedOnPane = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);
1661    // Used to prevent click events when the user lets go of the selectionKey during a selection
1662    const selectionInProgress = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);
1663    // Used for auto pan when approaching the edges of the container during selection
1664    const position = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)({
1665        x: 0,
1666        y: 0
1667    });
1668    const autoPanStarted = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);
1669    const onClick = (event)=>{
1670        // We prevent click events when the user let go of the selectionKey during a selection
1671        // We also prevent click events when a connection is in progress
1672        if (selectionInProgress.current || connectionEndedOnPane.current || store.getState().connection.inProgress) {
1673            selectionInProgress.current = false;

1674            connectionEndedOnPane.current = false;
1675            return;
1676        }
1677        onPaneClick === null || onPaneClick === void 0 ? void 0 : onPaneClick(event);
1678        store.getState().resetSelectedElements();
1679        store.setState({
1680            nodesSelectionActive: false
1681        });
1682    };
1683    const onContextMenu = (event)=>{
1684        if (Array.isArray(panOnDrag) && (panOnDrag === null || panOnDrag === void 0 ? void 0 : panOnDrag.includes(2))) {
1685            event.preventDefault();
1686            return;
1687        }
1688        onPaneContextMenu === null || onPaneContextMenu === void 0 ? void 0 : onPaneContextMenu(event);
1689    };
1690    const onWheel = onPaneScroll ? (event)=>onPaneScroll(event) : undefined;
1691    const onClickCapture = (event)=>{
1692        if (selectionInProgress.current) {
1693            event.stopPropagation();
1694            selectionInProgress.current = false;
1695        }
1696    };
1697    // We are using capture here in order to prevent other pointer events
1698    // to be able to create a selection above a node or an edge
1699    const onPointerDownCapture = (event)=>{
1700        var _event_target_setPointerCapture, _event_target;
1701        const { domNode, transform } = store.getState();
1702        containerBounds.current = domNode === null || domNode === void 0 ? void 0 : domNode.getBoundingClientRect();
1703        if (!containerBounds.current) return;
1704        const eventTargetIsContainer = event.target === container.current;
1705        // if a child element has the 'nokey' class, we don't want to swallow the event and don't start a selection
1706        const isNoKeyEvent = !eventTargetIsContainer && !!event.target.closest(".nokey");
1707        const isSelectionActive = selectionOnDrag && eventTargetIsContainer || selectionKeyPressed;
1708        if (isNoKeyEvent || !isSelecting || !isSelectionActive || event.button !== 0 || !event.isPrimary) {
1709            return;
1710        }
1711        (_event_target = event.target) === null || _event_target === void 0 ? void 0 : (_event_target_setPointerCapture = _event_target.setPointerCapture) === null || _event_target_setPointerCapture === void 0 ? void 0 : _event_target_setPointerCapture.call(_event_target, event.pointerId);
1712        selectionInProgress.current = false;
1713        const { x, y } = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .getEventPosition */ .wv)(event.nativeEvent, containerBounds.current);
1714        const userSelectionStartPosition = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .pointToRendererPoint */ .m)({
1715            x,
1716            y
1717        }, transform);
1718        store.setState({
1719            userSelectionRect: {
1720                width: 0,
1721                height: 0,
1722                startX: userSelectionStartPosition.x,
1723                startY: userSelectionStartPosition.y,
1724                x,
1725                y
1726            }
1727        });
1728        if (!eventTargetIsContainer) {
1729            event.stopPropagation();
1730            event.preventDefault();
1731        }
1732    };
1733    // We commit the user selection rectangle to the store on auto-panning or pointer move during selection.
1734    function commitUserSelectionRect(mouseX, mouseY) {
1735        const { userSelectionRect } = store.getState();
1736        if (!userSelectionRect) {
1737            return;
1738        }
1739        const { transform, nodeLookup, edgeLookup, connectionLookup, triggerNodeChanges, triggerEdgeChanges, defaultEdgeOptions } = store.getState();
1740        const userStartPosition = {
1741            x: userSelectionRect.startX,
1742            y: userSelectionRect.startY
1743        };
1744        const { x: screenStartX, y: screenStartY } = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .rendererPointToPoint */ .oj)(userStartPosition, transform);
1745        // This has to be in screen coordinates, not in flow coordinates.
1746        // We store the selection rectangle in userSelectionStartPosition coordinates to be able to
1747        // fix the start position of the selection rectangle when we are auto-panning.
1748        const nextUserSelectRect = {
1749            startX: userStartPosition.x,
1750            startY: userStartPosition.y,
1751            x: mouseX < screenStartX ? mouseX : screenStartX,
1752            y: mouseY < screenStartY ? mouseY : screenStartY,
1753            width: Math.abs(mouseX - screenStartX),
1754            height: Math.abs(mouseY - screenStartY)
1755        };
1756        const prevSelectedNodeIds = selectedNodeIds.current;
1757        const prevSelectedEdgeIds = selectedEdgeIds.current;
1758        selectedNodeIds.current = new Set((0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .getNodesInside */ .f5)(nodeLookup, nextUserSelectRect, transform, selectionMode === _xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .SelectionMode */ .oW.Partial, true).map((node)=>node.id));
1759        selectedEdgeIds.current = new Set();
1760        var _defaultEdgeOptions_selectable;
1761        const edgesSelectable = (_defaultEdgeOptions_selectable = defaultEdgeOptions === null || defaultEdgeOptions === void 0 ? void 0 : defaultEdgeOptions.selectable) !== null && _defaultEdgeOptions_selectable !== void 0 ? _defaultEdgeOptions_selectable : true;
1762        // We look for all edges connected to the selected nodes
1763        for (const nodeId of selectedNodeIds.current){
1764            const connections = connectionLookup.get(nodeId);
1765            if (!connections) continue;
1766            for (const { edgeId } of connections.values()){
1767                const edge = edgeLookup.get(edgeId);
1768                var _edge_selectable;
1769                if (edge && ((_edge_selectable = edge.selectable) !== null && _edge_selectable !== void 0 ? _edge_selectable : edgesSelectable)) {
1770                    selectedEdgeIds.current.add(edgeId);
1771                }
1772            }
1773        }
1774        if (!(0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .areSetsEqual */ .OL)(prevSelectedNodeIds, selectedNodeIds.current)) {
1775            const changes = getSelectionChanges(nodeLookup, selectedNodeIds.current, true);
1776            triggerNodeChanges(changes);
1777        }
1778        if (!(0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .areSetsEqual */ .OL)(prevSelectedEdgeIds, selectedEdgeIds.current)) {
1779            const changes = getSelectionChanges(edgeLookup, selectedEdgeIds.current);
1780            triggerEdgeChanges(changes);
1781        }
1782        store.setState({
1783            userSelectionRect: nextUserSelectRect,
1784            userSelectionActive: true,
1785            nodesSelectionActive: false
1786        });
1787    }
1788    function autoPan() {
1789        if (!autoPanOnSelection || !containerBounds.current) {
1790            return;
1791        }
1792        const [x, y] = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .calcAutoPan */ .U)(position.current, containerBounds.current, autoPanSpeed);
1793        panBy({
1794            x,
1795            y
1796        }).then((panned)=>{
1797            if (!selectionInProgress.current || !panned) {
1798                autoPanId.current = requestAnimationFrame(autoPan);
1799                return;
1800            }
1801            const { x: mx, y: my } = position.current;
1802            commitUserSelectionRect(mx, my);
1803            autoPanId.current = requestAnimationFrame(autoPan);
1804        });
1805    }
1806    const cleanupAutoPan = ()=>{
1807        cancelAnimationFrame(autoPanId.current);
1808        autoPanId.current = 0;
1809        autoPanStarted.current = false;

1810    };
1811    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
1812        return ()=>cleanupAutoPan();
1813    }, []);
1814    const onPointerMove = (event)=>{
1815        const { userSelectionRect, transform, resetSelectedElements } = store.getState();
1816        if (!containerBounds.current || !userSelectionRect) {
1817            return;
1818        }
1819        const { x: mouseX, y: mouseY } = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .getEventPosition */ .wv)(event.nativeEvent, containerBounds.current);
1820        position.current = {
1821            x: mouseX,
1822            y: mouseY
1823        };
1824        const screenStart = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .rendererPointToPoint */ .oj)({
1825            x: userSelectionRect.startX,
1826            y: userSelectionRect.startY
1827        }, transform);
1828        if (!selectionInProgress.current) {
1829            const requiredDistance = selectionKeyPressed ? 0 : paneClickDistance;
1830            const distance = Math.hypot(mouseX - screenStart.x, mouseY - screenStart.y);
1831            if (distance <= requiredDistance) {
1832                return;
1833            }
1834            resetSelectedElements();
1835            onSelectionStart === null || onSelectionStart === void 0 ? void 0 : onSelectionStart(event);
1836        }
1837        selectionInProgress.current = true;
1838        if (!autoPanStarted.current) {
1839            autoPan();
1840            autoPanStarted.current = true;
1841        }
1842        commitUserSelectionRect(mouseX, mouseY);
1843    };
1844    const onPointerUp = (event)=>{
1845        var _event_target_releasePointerCapture, _event_target;
1846        if (!isSelectionEnabled) {
1847            if (event.target === container.current && store.getState().connection.inProgress) {
1848                connectionEndedOnPane.current = true;
1849            }
1850            return;
1851        }
1852        if (event.button !== 0) {
1853            return;
1854        }
1855        (_event_target = event.target) === null || _event_target === void 0 ? void 0 : (_event_target_releasePointerCapture = _event_target.releasePointerCapture) === null || _event_target_releasePointerCapture === void 0 ? void 0 : _event_target_releasePointerCapture.call(_event_target, event.pointerId);
1856        /*
1857         * We only want to trigger click functions when in selection mode if
1858         * the user did not move the mouse.
1859         */ if (!userSelectionActive && event.target === container.current && store.getState().userSelectionRect) {
1860            onClick === null || onClick === void 0 ? void 0 : onClick(event);
1861        }
1862        store.setState({
1863            userSelectionActive: false,
1864            userSelectionRect: null
1865        });
1866        if (selectionInProgress.current) {
1867            onSelectionEnd === null || onSelectionEnd === void 0 ? void 0 : onSelectionEnd(event);
1868            store.setState({
1869                nodesSelectionActive: selectedNodeIds.current.size > 0
1870            });
1871        }
1872        cleanupAutoPan();
1873    };
1874    const onPointerCancel = (event)=>{
1875        var _event_target_releasePointerCapture, _event_target;
1876        (_event_target = event.target) === null || _event_target === void 0 ? void 0 : (_event_target_releasePointerCapture = _event_target.releasePointerCapture) === null || _event_target_releasePointerCapture === void 0 ? void 0 : _event_target_releasePointerCapture.call(_event_target, event.pointerId);
1877        cleanupAutoPan();
1878    };
1879    const draggable = panOnDrag === true || Array.isArray(panOnDrag) && panOnDrag.includes(0);
1880    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
1881        className: (0,classcat__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z)([
1882            "react-flow__pane",
1883            {
1884                draggable,
1885                dragging,
1886                selection: isSelecting
1887            }
1888        ]),
1889        onClick: isSelectionEnabled ? undefined : wrapHandler(onClick, container),
1890        onContextMenu: wrapHandler(onContextMenu, container),
1891        onWheel: wrapHandler(onWheel, container),
1892        onPointerEnter: isSelectionEnabled ? undefined : onPaneMouseEnter,
1893        onPointerMove: isSelectionEnabled ? onPointerMove : onPaneMouseMove,
1894        onPointerUp: onPointerUp,
1895        onPointerCancel: isSelectionEnabled ? onPointerCancel : undefined,
1896        onPointerDownCapture: isSelectionEnabled ? onPointerDownCapture : undefined,
1897        onClickCapture: isSelectionEnabled ? onClickCapture : undefined,
1898        onPointerLeave: onPaneMouseLeave,
1899        ref: container,
1900        style: containerStyle,
1901        children: [
1902            children,
1903            (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(UserSelection, {})
1904        ]
1905    });
1906}
1907/*
1908 * this handler is called by
1909 * 1. the click handler when node is not draggable or selectNodesOnDrag = false
1910 * or
1911 * 2. the on drag start handler when node is draggable and selectNodesOnDrag = true
1912 */ function handleNodeClick(param) {
1913    let { id, store, unselect = false, nodeRef } = param;
1914    const { addSelectedNodes, unselectNodesAndEdges, multiSelectionActive, nodeLookup, onError } = store.getState();
1915    const node = nodeLookup.get(id);
1916    if (!node) {
1917        onError === null || onError === void 0 ? void 0 : onError("012", _xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .errorMessages */ .Qj["error012"](id));
1918        return;
1919    }
1920    store.setState({
1921        nodesSelectionActive: false
1922    });
1923    if (!node.selected) {
1924        addSelectedNodes([
1925            id
1926        ]);
1927    } else if (unselect || node.selected && multiSelectionActive) {
1928        unselectNodesAndEdges({
1929            nodes: [
1930                node
1931            ],
1932            edges: []
1933        });
1934        requestAnimationFrame(()=>{
1935            var _nodeRef_current;
1936            return nodeRef === null || nodeRef === void 0 ? void 0 : (_nodeRef_current = nodeRef.current) === null || _nodeRef_current === void 0 ? void 0 : _nodeRef_current.blur();
1937        });
1938    }
1939}
1940/**
1941 * Hook for calling XYDrag helper from @xyflow/system.
1942 *
1943 * @internal
1944 */ function useDrag(param) {
1945    let { nodeRef, disabled = false, noDragClassName, handleSelector, nodeId, isSelectable, nodeClickDistance } = param;
1946    const store = useStoreApi();
1947    const [dragging, setDragging] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);
1948    const xyDrag = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)();
1949    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
1950        if (disabled) {
1951            return;
1952        }
1953        xyDrag.current = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .XYDrag */ .oC)({
1954            getStoreItems: ()=>store.getState(),
1955            onNodeMouseDown: (id)=>{
1956                handleNodeClick({
1957                    id,
1958                    store,
1959                    nodeRef
1960                });
1961            },
1962            onDragStart: ()=>{
1963                setDragging(true);
1964            },
1965            onDragStop: ()=>{
1966                setDragging(false);
1967            }
1968        });
1969        return ()=>{
1970            var _xyDrag_current;
1971            (_xyDrag_current = xyDrag.current) === null || _xyDrag_current === void 0 ? void 0 : _xyDrag_current.destroy();
1972            xyDrag.current = undefined;
1973        };
1974    }, [
1975        disabled,
1976        store,
1977        nodeRef
1978    ]);
1979    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
1980        if (disabled || !nodeRef.current || !xyDrag.current) {
1981            return;
1982        }
1983        xyDrag.current.update({
1984            noDragClassName,
1985            handleSelector,
1986            domNode: nodeRef.current,
1987            isSelectable,
1988            nodeId,
1989            nodeClickDistance
1990        });
1991    }, [
1992        noDragClassName,
1993        handleSelector,
1994        disabled,
1995        isSelectable,
1996        nodeRef,
1997        nodeId,
1998        nodeClickDistance
1999    ]);
2000    return dragging;
2001}
2002const selectedAndDraggable = (nodesDraggable)=>(n)=>n.selected && (n.draggable || nodesDraggable && typeof n.draggable === "undefined");
2003/**
2004 * Hook for updating node positions by passing a direction and factor
2005 *
2006 * @internal
2007 * @returns function for updating node positions
2008 */ function useMoveSelectedNodes() {
2009    const store = useStoreApi();
2010    const moveSelectedNodes = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)((params)=>{

2011        const { nodeExtent, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions, nodeLookup, nodeOrigin } = store.getState();
2012        const nodeUpdates = new Map();
2013        const isSelected = selectedAndDraggable(nodesDraggable);
2014        /*
2015         * by default a node moves 5px on each key press
2016         * if snap grid is enabled, we use that for the velocity
2017         */ const xVelo = snapToGrid ? snapGrid[0] : 5;
2018        const yVelo = snapToGrid ? snapGrid[1] : 5;
2019        const xDiff = params.direction.x * xVelo * params.factor;
2020        const yDiff = params.direction.y * yVelo * params.factor;
2021        for (const [, node] of nodeLookup){
2022            if (!isSelected(node)) {
2023                continue;
2024            }
2025            let nextPosition = {
2026                x: node.internals.positionAbsolute.x + xDiff,
2027                y: node.internals.positionAbsolute.y + yDiff
2028            };
2029            if (snapToGrid) {
2030                nextPosition = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .snapPosition */ ._2)(nextPosition, snapGrid);
2031            }
2032            const { position, positionAbsolute } = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .calculateNodePosition */ .q7)({
2033                nodeId: node.id,
2034                nextPosition,
2035                nodeLookup,
2036                nodeExtent,
2037                nodeOrigin,
2038                onError
2039            });
2040            node.position = position;
2041            node.internals.positionAbsolute = positionAbsolute;
2042            nodeUpdates.set(node.id, node);
2043        }
2044        updateNodePositions(nodeUpdates);
2045    }, []);
2046    return moveSelectedNodes;
2047}
2048const NodeIdContext = /*#__PURE__*/ (0,react__WEBPACK_IMPORTED_MODULE_1__.createContext)(null);
2049const Provider = NodeIdContext.Provider;
2050NodeIdContext.Consumer;
2051/**
2052 * You can use this hook to get the id of the node it is used inside. It is useful
2053 * if you need the node's id deeper in the render tree but don't want to manually
2054 * drill down the id as a prop.
2055 *
2056 * @public
2057 * @returns The id for a node in the flow.
2058 *
2059 * @example
2060 *```jsx
2061 *import { useNodeId } from '@xyflow/react';
2062 *
2063 *export default function CustomNode() {
2064 *  return (
2065 *    <div>
2066 *      <span>This node has an id of </span>
2067 *      <NodeIdDisplay />
2068 *    </div>
2069 *  );
2070 *}
2071 *
2072 *function NodeIdDisplay() {
2073 *  const nodeId = useNodeId();
2074 *
2075 *  return <span>{nodeId}</span>;
2076 *}
2077 *```
2078 */ const useNodeId = ()=>{
2079    const nodeId = (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(NodeIdContext);
2080    return nodeId;
2081};
2082const selector$f = (s)=>({
2083        connectOnClick: s.connectOnClick,
2084        noPanClassName: s.noPanClassName,
2085        rfId: s.rfId
2086    });
2087const HandleConfigContext = /*#__PURE__*/ (0,react__WEBPACK_IMPORTED_MODULE_1__.createContext)(null);
2088/*
2089 * `connectOnClick`, `noPanClassName` and `rfId` are the same for every handle, so they are
2090 * shared through context from a single store subscription.
2091 */ function HandleConfigProvider(param) {
2092    let { children } = param;
2093    const config = useStore(selector$f, zustand_shallow__WEBPACK_IMPORTED_MODULE_5__/* .shallow */ .X);
2094    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(HandleConfigContext.Provider, {
2095        value: config,
2096        children: children
2097    });
2098}
2099function useHandleConfig() {
2100    const config = (0,react__WEBPACK_IMPORTED_MODULE_1__.useContext)(HandleConfigContext);
2101    if (!config) {
2102        throw new Error("useHandleConfig must be used within a HandleConfigProvider");
2103    }
2104    return config;
2105}
2106/*
2107 * While no connection is in progress every handle has this same state, so we return a
2108 * shared reference rather than allocating + shallow-comparing one per handle on every
2109 * store update. `isPossibleEndHandle` matches what the selector computes when idle.
2110 */ const idleConnectingState = {
2111    connectingFrom: false,
2112    connectingTo: false,
2113    clickConnecting: false,
2114    isPossibleEndHandle: true,
2115    connectionInProcess: false,
2116    clickConnectionInProcess: false,
2117    valid: false
2118};
2119const connectingSelector = (nodeId, handleId, type)=>(state)=>{
2120        const { connectionClickStartHandle: clickHandle, connectionMode, connection } = state;

2121        const { fromHandle, toHandle, isValid } = connection;
2122        if (!fromHandle && !clickHandle) {
2123            return idleConnectingState;
2124        }
2125        const connectingTo = (toHandle === null || toHandle === void 0 ? void 0 : toHandle.nodeId) === nodeId && (toHandle === null || toHandle === void 0 ? void 0 : toHandle.id) === handleId && (toHandle === null || toHandle === void 0 ? void 0 : toHandle.type) === type;
2126        return {
2127            connectingFrom: (fromHandle === null || fromHandle === void 0 ? void 0 : fromHandle.nodeId) === nodeId && (fromHandle === null || fromHandle === void 0 ? void 0 : fromHandle.id) === handleId && (fromHandle === null || fromHandle === void 0 ? void 0 : fromHandle.type) === type,
2128            connectingTo,
2129            clickConnecting: (clickHandle === null || clickHandle === void 0 ? void 0 : clickHandle.nodeId) === nodeId && (clickHandle === null || clickHandle === void 0 ? void 0 : clickHandle.id) === handleId && (clickHandle === null || clickHandle === void 0 ? void 0 : clickHandle.type) === type,
2130            isPossibleEndHandle: connectionMode === _xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .ConnectionMode */ .jD.Strict ? (fromHandle === null || fromHandle === void 0 ? void 0 : fromHandle.type) !== type : nodeId !== (fromHandle === null || fromHandle === void 0 ? void 0 : fromHandle.nodeId) || handleId !== (fromHandle === null || fromHandle === void 0 ? void 0 : fromHandle.id),
2131            connectionInProcess: !!fromHandle,
2132            clickConnectionInProcess: !!clickHandle,
2133            valid: connectingTo && isValid
2134        };
2135    };
2136function HandleComponent(param, ref) {
2137    let { type = "source", position = _xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .Position */ .Ly.Top, isValidConnection, isConnectable = true, isConnectableStart = true, isConnectableEnd = true, id, onConnect, children, className, onMouseDown, onTouchStart, ...rest } = param;
2138    const handleId = id || null;
2139    const isTarget = type === "target";
2140    const store = useStoreApi();
2141    const nodeId = useNodeId();
2142    const { connectOnClick, noPanClassName, rfId } = useHandleConfig();
2143    const { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, clickConnectionInProcess, valid } = useStore(connectingSelector(nodeId, handleId, type), zustand_shallow__WEBPACK_IMPORTED_MODULE_5__/* .shallow */ .X);
2144    if (!nodeId) {
2145        var _store_getState_onError, _store_getState;
2146        (_store_getState_onError = (_store_getState = store.getState()).onError) === null || _store_getState_onError === void 0 ? void 0 : _store_getState_onError.call(_store_getState, "010", _xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .errorMessages */ .Qj["error010"]());
2147    }
2148    const onConnectExtended = (params)=>{
2149        const { defaultEdgeOptions, onConnect: onConnectAction, hasDefaultEdges } = store.getState();
2150        const edgeParams = {
2151            ...defaultEdgeOptions,
2152            ...params
2153        };
2154        if (hasDefaultEdges) {
2155            const { edges, setEdges, onError } = store.getState();
2156            setEdges(addEdge(edgeParams, edges, {
2157                onError
2158            }));
2159        }
2160        onConnectAction === null || onConnectAction === void 0 ? void 0 : onConnectAction(edgeParams);
2161        onConnect === null || onConnect === void 0 ? void 0 : onConnect(edgeParams);
2162    };
2163    const onPointerDown = (event)=>{
2164        if (!nodeId) {
2165            return;
2166        }
2167        const isMouseTriggered = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .isMouseEvent */ .N5)(event.nativeEvent);
2168        if (isConnectableStart && (isMouseTriggered && event.button === 0 || !isMouseTriggered)) {
2169            const currentStore = store.getState();
2170            _xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .XYHandle */ .Ql.onPointerDown(event.nativeEvent, {
2171                handleDomNode: event.currentTarget,
2172                autoPanOnConnect: currentStore.autoPanOnConnect,
2173                connectionMode: currentStore.connectionMode,
2174                connectionRadius: currentStore.connectionRadius,
2175                domNode: currentStore.domNode,
2176                nodeLookup: currentStore.nodeLookup,
2177                lib: currentStore.lib,
2178                isTarget,
2179                handleId,
2180                nodeId,
2181                flowId: currentStore.rfId,
2182                panBy: currentStore.panBy,
2183                cancelConnection: currentStore.cancelConnection,
2184                onConnectStart: currentStore.onConnectStart,
2185                onConnectEnd: function() {
2186                    for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
2187                        args[_key] = arguments[_key];
2188                    }
2189                    var _store_getState_onConnectEnd, _store_getState;
2190                    return (_store_getState_onConnectEnd = (_store_getState = store.getState()).onConnectEnd) === null || _store_getState_onConnectEnd === void 0 ? void 0 : _store_getState_onConnectEnd.call(_store_getState, ...args);
2191                },
2192                updateConnection: currentStore.updateConnection,
2193                onConnect: onConnectExtended,
2194                isValidConnection: isValidConnection || function() {
2195                    for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
2196                        args[_key] = arguments[_key];
2197                    }
2198                    var _store_getState_isValidConnection, _store_getState;
2199                    var _store_getState_isValidConnection1;
2200                    return (_store_getState_isValidConnection1 = (_store_getState_isValidConnection = (_store_getState = store.getState()).isValidConnection) === null || _store_getState_isValidConnection === void 0 ? void 0 : _store_getState_isValidConnection.call(_store_getState, ...args)) !== null && _store_getState_isValidConnection1 !== void 0 ? _store_getState_isValidConnection1 : true;
2201                },
2202                getTransform: ()=>store.getState().transform,
2203                getFromHandle: ()=>store.getState().connection.fromHandle,
2204                autoPanSpeed: currentStore.autoPanSpeed,
2205                dragThreshold: currentStore.connectionDragThreshold
2206            });
2207        }
2208        if (isMouseTriggered) {
2209            onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
2210        } else {
2211            onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(event);
2212        }
2213    };
2214    const onClick = (event)=>{
2215        const { onClickConnectStart, onClickConnectEnd, connectionClickStartHandle, connectionMode, isValidConnection: isValidConnectionStore, lib, rfId: flowId, nodeLookup, connection: connectionState } = store.getState();
2216        if (!nodeId || !connectionClickStartHandle && !isConnectableStart) {
2217            return;
2218        }
2219        if (!connectionClickStartHandle) {
2220            onClickConnectStart === null || onClickConnectStart === void 0 ? void 0 : onClickConnectStart(event.nativeEvent, {
2221                nodeId,
2222                handleId,
2223                handleType: type
2224            });
2225            store.setState({
2226                connectionClickStartHandle: {
2227                    nodeId,
2228                    type,
2229                    id: handleId
2230                }
2231            });
2232            return;
2233        }
2234        const doc = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .getHostForElement */ .S2)(event.target);
2235        const isValidConnectionHandler = isValidConnection || isValidConnectionStore;
2236        const { connection, isValid } = _xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .XYHandle */ .Ql.isValid(event.nativeEvent, {
2237            handle: {
2238                nodeId,
2239                id: handleId,
2240                type
2241            },
2242            connectionMode,
2243            fromNodeId: connectionClickStartHandle.nodeId,
2244            fromHandleId: connectionClickStartHandle.id || null,
2245            fromType: connectionClickStartHandle.type,
2246            isValidConnection: isValidConnectionHandler,
2247            flowId,
2248            doc,
2249            lib,
2250            nodeLookup
2251        });
2252        if (isValid && connection) {
2253            onConnectExtended(connection);
2254        }
2255        const connectionClone = structuredClone(connectionState);
2256        delete connectionClone.inProgress;
2257        connectionClone.toPosition = connectionClone.toHandle ? connectionClone.toHandle.position : null;
2258        onClickConnectEnd === null || onClickConnectEnd === void 0 ? void 0 : onClickConnectEnd(event, connectionClone);
2259        store.setState({
2260            connectionClickStartHandle: null
2261        });
2262    };
2263    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
2264        "data-handleid": handleId,
2265        "data-nodeid": nodeId,
2266        "data-handlepos": position,
2267        "data-id": "".concat(rfId, "-").concat(nodeId, "-").concat(handleId, "-").concat(type),
2268        className: (0,classcat__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z)([
2269            "react-flow__handle",
2270            "react-flow__handle-".concat(position),
2271            "nodrag",
2272            noPanClassName,
2273            className,
2274            {
2275                source: !isTarget,
2276                target: isTarget,
2277                connectable: isConnectable,
2278                connectablestart: isConnectableStart,
2279                connectableend: isConnectableEnd,
2280                clickconnecting: clickConnecting,
2281                connectingfrom: connectingFrom,
2282                connectingto: connectingTo,
2283                valid,
2284                /*
2285                 * shows where you can start a connection from
2286                 * and where you can end it while connecting
2287                 */ connectionindicator: isConnectable && (!connectionInProcess || isPossibleEndHandle) && (connectionInProcess || clickConnectionInProcess ? isConnectableEnd : isConnectableStart)
2288            }
2289        ]),
2290        onMouseDown: onPointerDown,
2291        onTouchStart: onPointerDown,
2292        onClick: connectOnClick ? onClick : undefined,
2293        ref: ref,
2294        ...rest,
2295        children: children
2296    });
2297}
2298/**
2299 * The `<Handle />` component is used in your [custom nodes](/learn/customization/custom-nodes)
2300 * to define connection points.
2301 *
2302 *@public
2303 *
2304 *@example
2305 *
2306 *```jsx
2307 *import { Handle, Position } from '@xyflow/react';
2308 *
2309 *export function CustomNode({ data }) {
2310 *  return (
2311 *    <>
2312 *      <div style={{ padding: '10px 20px' }}>
2313 *        {data.label}
2314 *      </div>
2315 *
2316 *      <Handle type="target" position={Position.Left} />
2317 *      <Handle type="source" position={Position.Right} />
2318 *    </>
2319 *  );
2320 *};
2321 *```
2322 */ const Handle = /*#__PURE__*/ (0,react__WEBPACK_IMPORTED_MODULE_1__.memo)(fixedForwardRef(HandleComponent));
2323function InputNode(param) {
2324    let { data, isConnectable, sourcePosition = _xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .Position */ .Ly.Bottom } = param;
2325    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
2326        children: [
2327            data === null || data === void 0 ? void 0 : data.label,
2328            (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Handle, {
2329                type: "source",
2330                position: sourcePosition,
2331                isConnectable: isConnectable
2332            })
2333        ]
2334    });
2335}
2336function DefaultNode(param) {
2337    let { data, isConnectable, targetPosition = _xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .Position */ .Ly.Top, sourcePosition = _xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .Position */ .Ly.Bottom } = param;
2338    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
2339        children: [
2340            (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Handle, {
2341                type: "target",
2342                position: targetPosition,
2343                isConnectable: isConnectable
2344            }),
2345            data === null || data === void 0 ? void 0 : data.label,
2346            (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Handle, {
2347                type: "source",
2348                position: sourcePosition,
2349                isConnectable: isConnectable
2350            })
2351        ]
2352    });
2353}
2354function GroupNode() {
2355    return null;
2356}
2357function OutputNode(param) {
2358    let { data, isConnectable, targetPosition = _xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .Position */ .Ly.Top } = param;
2359    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
2360        children: [
2361            (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Handle, {
2362                type: "target",
2363                position: targetPosition,
2364                isConnectable: isConnectable
2365            }),
2366            data === null || data === void 0 ? void 0 : data.label
2367        ]
2368    });
2369}
2370const arrowKeyDiffs = {
2371    ArrowUp: {
2372        x: 0,
2373        y: -1
2374    },
2375    ArrowDown: {
2376        x: 0,
2377        y: 1
2378    },
2379    ArrowLeft: {
2380        x: -1,
2381        y: 0
2382    },
2383    ArrowRight: {
2384        x: 1,
2385        y: 0
2386    }
2387};
2388const builtinNodeTypes = {
2389    input: InputNode,
2390    default: DefaultNode,
2391    output: OutputNode,
2392    group: GroupNode
2393};
2394function getNodeInlineStyleDimensions(node) {
2395    var _node_style, _node_style1;
2396    if (node.internals.handleBounds === undefined) {
2397        var _node_style2, _node_style3;
2398        var _node_width, _ref, _node_height, _ref1;
2399        return {
2400            width: (_ref = (_node_width = node.width) !== null && _node_width !== void 0 ? _node_width : node.initialWidth) !== null && _ref !== void 0 ? _ref : (_node_style2 = node.style) === null || _node_style2 === void 0 ? void 0 : _node_style2.width,
2401            height: (_ref1 = (_node_height = node.height) !== null && _node_height !== void 0 ? _node_height : node.initialHeight) !== null && _ref1 !== void 0 ? _ref1 : (_node_style3 = node.style) === null || _node_style3 === void 0 ? void 0 : _node_style3.height
2402        };
2403    }
2404    var _node_width1, _node_height1;
2405    return {
2406        width: (_node_width1 = node.width) !== null && _node_width1 !== void 0 ? _node_width1 : (_node_style = node.style) === null || _node_style === void 0 ? void 0 : _node_style.width,
2407        height: (_node_height1 = node.height) !== null && _node_height1 !== void 0 ? _node_height1 : (_node_style1 = node.style) === null || _node_style1 === void 0 ? void 0 : _node_style1.height
2408    };
2409}
2410const selector$e = (s)=>{
2411    const { width, height, x, y } = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .getInternalNodesB

2411ounds */ .W0)(s.nodeLookup, {
2412        filter: (node)=>!!node.selected
2413    });
2414    return {
2415        width: (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .isNumeric */ .kE)(width) ? width : null,
2416        height: (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .isNumeric */ .kE)(height) ? height : null,
2417        userSelectionActive: s.userSelectionActive,
2418        transformString: "translate(".concat(s.transform[0], "px,").concat(s.transform[1], "px) scale(").concat(s.transform[2], ") translate(").concat(x, "px,").concat(y, "px)")
2419    };
2420};
2421function NodesSelection(param) {
2422    let { onSelectionContextMenu, noPanClassName, disableKeyboardA11y } = param;
2423    const store = useStoreApi();
2424    const { width, height, transformString, userSelectionActive } = useStore(selector$e, zustand_shallow__WEBPACK_IMPORTED_MODULE_5__/* .shallow */ .X);
2425    const moveSelectedNodes = useMoveSelectedNodes();
2426    const nodeRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
2427    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
2428        if (!disableKeyboardA11y) {
2429            var _nodeRef_current;
2430            (_nodeRef_current = nodeRef.current) === null || _nodeRef_current === void 0 ? void 0 : _nodeRef_current.focus({
2431                preventScroll: true
2432            });
2433        }
2434    }, [
2435        disableKeyboardA11y
2436    ]);
2437    const shouldRender = !userSelectionActive && width !== null && height !== null;
2438    useDrag({
2439        nodeRef,
2440        disabled: !shouldRender
2441    });
2442    if (!shouldRender) {
2443        return null;
2444    }
2445    const onContextMenu = onSelectionContextMenu ? (event)=>{
2446        const selectedNodes = store.getState().nodes.filter((n)=>n.selected);
2447        onSelectionContextMenu(event, selectedNodes);
2448    } : undefined;
2449    const onKeyDown = (event)=>{
2450        if (Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
2451            event.preventDefault();
2452            moveSelectedNodes({
2453                direction: arrowKeyDiffs[event.key],
2454                factor: event.shiftKey ? 4 : 1
2455            });
2456        }
2457    };
2458    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
2459        className: (0,classcat__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z)([
2460            "react-flow__nodesselection",
2461            "react-flow__container",
2462            noPanClassName
2463        ]),
2464        style: {
2465            transform: transformString
2466        },
2467        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
2468            ref: nodeRef,
2469            className: "react-flow__nodesselection-rect",
2470            onContextMenu: onContextMenu,
2471            tabIndex: disableKeyboardA11y ? undefined : -1,
2472            onKeyDown: disableKeyboardA11y ? undefined : onKeyDown,
2473            style: {
2474                width,
2475                height
2476            }
2477        })
2478    });
2479}
2480const win = typeof window !== "undefined" ? window : undefined;
2481const selector$d = (s)=>{
2482    return {
2483        nodesSelectionActive: s.nodesSelectionActive,
2484        userSelectionActive: s.userSelectionActive
2485    };
2486};
2487function FlowRendererComponent(param) {
2488    let { children, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneContextMenu, onPaneScroll, paneClickDistance, deleteKeyCode, selectionKeyCode, selectionOnDrag, selectionMode, onSelectionStart, onSelectionEnd, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, elementsSelectable, zoomOnScroll, zoomOnPinch, panOnScroll: _panOnScroll, panOnScrollSpeed, panOnScrollMode, zoomOnDoubleClick, panOnDrag: _panOnDrag, autoPanOnSelection, defaultViewport, translateExtent, minZoom, maxZoom, preventScrolling, onSelectionContextMenu, noWheelClassName, noPanClassName, disableKeyboardA11y, onViewportChange, isControlledViewport } = param;
2489    const { nodesSelectionActive, userSelectionActive } = useStore(selector$d, zustand_shallow__WEBPACK_IMPORTED_MODULE_5__/* .shallow */ .X);
2490    const selectionKeyPressed = useKeyPress(selectionKeyCode, {
2491        target: win
2492    });
2493    const panActivationKeyPressed = useKeyPress(panActivationKeyCode, {
2494        target: win
2495    });
2496    const panOnDrag = panActivationKeyPressed || _panOnDrag;
2497    const panOnScroll = panActivationKeyPressed || _panOnScroll;
2498    const _selectionOnDrag = selectionOnDrag && panOnDrag !== true;
2499    const isSelecting = selectionKeyPressed || userSelectionActive || _selectionOnDrag;
2500    useGlobalKeyHandler({
2501        deleteKeyCode,
2502        multiSelectionKeyCode
2503    });
2504    return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ZoomPane, {
2505        onPaneContextMenu: onPaneContextMenu,
2506        elementsSelectable: elementsSelectable,
2507        zoomOnScroll: zoomOnScroll,
2508        zoomOnPinch: zoomOnPinch,
2509        panOnScroll: panOnScroll,
2510        panOnScrollSpeed: panOnScrollSpeed,
2511        panOnScrollMode: panOnScrollMode,
2512        zoomOnDoubleClick: zoomOnDoubleClick,
2513        panOnDrag: !selectionKeyPressed && panOnDrag,
2514        defaultViewport: defaultViewport,
2515        translateExtent: translateExtent,
2516        minZoom: minZoom,
2517        maxZoom: maxZoom,
2518        zoomActivationKeyCode: zoomActivationKeyCode,
2519        preventScrolling: preventScrolling,
2520        noWheelClassName: noWheelClassName,
2521        noPanClassName: noPanClassName,
2522        onViewportChange: onViewportChange,
2523        isControlledViewport: isControlledViewport,
2524        paneClickDistance: paneClickDistance,
2525        selectionOnDrag: _selectionOnDrag,
2526        children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(Pane, {
2527            onSelectionStart: onSelectionStart,
2528            onSelectionEnd: onSelectionEnd,
2529            onPaneClick: onPaneClick,
2530            onPaneMouseEnter: onPaneMouseEnter,
2531            onPaneMouseMove: onPaneMouseMove,
2532            onPaneMouseLeave: onPaneMouseLeave,
2533            onPaneContextMenu: onPaneContextMenu,
2534            onPaneScroll: onPaneScroll,
2535            panOnDrag: panOnDrag,
2536            autoPanOnSelection: autoPanOnSelection,
2537            isSelecting: !!isSelecting,
2538            selectionMode: selectionMode,
2539            selectionKeyPressed: selectionKeyPressed,
2540            paneClickDistance: paneClickDistance,
2541            selectionOnDrag: _selectionOnDrag,
2542            children: [
2543                children,
2544                nodesSelectionActive && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(NodesSelection, {
2545                    onSelectionContextMenu: onSelectionContextMenu,
2546                    noPanClassName: noPanClassName,
2547                    disableKeyboardA11y: disableKeyboardA11y
2548                })
2549            ]
2550        })
2551    });
2552}
2553FlowRendererComponent.displayName = "FlowRenderer";
2554const FlowRenderer = /*#__PURE__*/ (0,react__WEBPACK_IMPORTED_MODULE_1__.memo)(FlowRendererComponent);
2555const selector$c = (onlyRenderVisible)=>(s)=>{
2556        return onlyRenderVisible ? (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .getNodesInside */ .f5)(s.nodeLookup, {
2557            x: 0,
2558            y: 0,
2559            width: s.width,
2560            height: s.height
2561        }, s.transform, true).map((node)=>node.id) : Array.from(s.nodeLookup.keys());
2562    };
2563/**
2564 * Hook for getting the visible node ids from the store.
2565 *
2566 * @internal
2567 * @param onlyRenderVisible
2568 * @returns array with visible node ids
2569 */ function useVisibleNodeIds(onlyRenderVisible) {
2570    const nodeIds = useStore((0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(selector$c(onlyRenderVisible), [
2571        onlyRenderVisible
2572    ]), zustand_shallow__WEBPACK_IMPORTED_MODULE_5__/* .shallow */ .X);
2573    return nodeIds;
2574}
2575const selector$b = (s)=>s.updateNodeInternals;
2576function useResizeObserver() {
2577    const updateNodeInternals = useStore(selector$b);
2578    const [resizeObserver] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(()=>{
2579        if (typeof ResizeObserver === "undefined") {
2580            return null;
2581        }
2582        return new ResizeObserver((entries)=>{
2583            const updates = new Map();

2584            entries.forEach((entry)=>{
2585                const id = entry.target.getAttribute("data-id");
2586                updates.set(id, {
2587                    id,
2588                    nodeElement: entry.target,
2589                    force: true
2590                });
2591            });
2592            updateNodeInternals(updates);
2593        });
2594    });
2595    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
2596        return ()=>{
2597            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
2598        };
2599    }, [
2600        resizeObserver
2601    ]);
2602    return resizeObserver;
2603}
2604/**
2605 * Hook to handle the resize observation + internal updates for the passed node.
2606 *
2607 * @internal
2608 * @returns nodeRef - reference to the node element
2609 */ function useNodeObserver(param) {
2610    let { node, nodeType, hasDimensions, resizeObserver } = param;
2611    const store = useStoreApi();
2612    const nodeRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
2613    const observedNode = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
2614    const prevSourcePosition = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(node.sourcePosition);
2615    const prevTargetPosition = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(node.targetPosition);
2616    const prevType = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(nodeType);
2617    const isInitialized = hasDimensions && !!node.internals.handleBounds;
2618    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
2619        if (nodeRef.current && !node.hidden && (!isInitialized || observedNode.current !== nodeRef.current)) {
2620            if (observedNode.current) {
2621                resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve(observedNode.current);
2622            }
2623            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(nodeRef.current);
2624            observedNode.current = nodeRef.current;
2625        }
2626    }, [
2627        isInitialized,
2628        node.hidden
2629    ]);
2630    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
2631        return ()=>{
2632            if (observedNode.current) {
2633                resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve(observedNode.current);
2634                observedNode.current = null;
2635            }
2636        };
2637    }, []);
2638    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
2639        if (nodeRef.current) {
2640            /*
2641             * when the user programmatically changes the source or handle position, we need to update the internals
2642             * to make sure the edges are updated correctly
2643             */ const typeChanged = prevType.current !== nodeType;
2644            const sourcePosChanged = prevSourcePosition.current !== node.sourcePosition;
2645            const targetPosChanged = prevTargetPosition.current !== node.targetPosition;
2646            if (typeChanged || sourcePosChanged || targetPosChanged) {
2647                prevType.current = nodeType;
2648                prevSourcePosition.current = node.sourcePosition;
2649                prevTargetPosition.current = node.targetPosition;
2650                store.getState().updateNodeInternals(new Map([
2651                    [
2652                        node.id,
2653                        {
2654                            id: node.id,
2655                            nodeElement: nodeRef.current,
2656                            force: true
2657                        }
2658                    ]
2659                ]));
2660            }
2661        }
2662    }, [
2663        node.id,
2664        nodeType,
2665        node.sourcePosition,
2666        node.targetPosition
2667    ]);
2668    return nodeRef;
2669}
2670function NodeWrapper(param) {
2671    let { id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, nodesDraggable, elementsSelectable, nodesConnectable, nodesFocusable, resizeObserver, noDragClassName, noPanClassName, disableKeyboardA11y, rfId, nodeTypes, nodeClickDistance, onError } = param;
2672    const { node, internals, isParent } = useStore((s)=>{
2673        const node = s.nodeLookup.get(id);
2674        const isParent = s.parentLookup.has(id);
2675        return {
2676            node,
2677            internals: node.internals,
2678            isParent
2679        };
2680    }, zustand_shallow__WEBPACK_IMPORTED_MODULE_5__/* .shallow */ .X);
2681    let nodeType = node.type || "default";
2682    let NodeComponent = (nodeTypes === null || nodeTypes === void 0 ? void 0 : nodeTypes[nodeType]) || builtinNodeTypes[nodeType];
2683    if (NodeComponent === undefined) {
2684        onError === null || onError === void 0 ? void 0 : onError("003", _xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .errorMessages */ .Qj["error003"](nodeType));
2685        nodeType = "default";
2686        NodeComponent = (nodeTypes === null || nodeTypes === void 0 ? void 0 : nodeTypes["default"]) || builtinNodeTypes.default;
2687    }
2688    const isDraggable = !!(node.draggable || nodesDraggable && typeof node.draggable === "undefined");
2689    const isSelectable = !!(node.selectable || elementsSelectable && typeof node.selectable === "undefined");
2690    const isConnectable = !!(node.connectable || nodesConnectable && typeof node.connectable === "undefined");
2691    const isFocusable = !!(node.focusable || nodesFocusable && typeof node.focusable === "undefined");
2692    const store = useStoreApi();
2693    const hasDimensions = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .nodeHasDimensions */ .nb)(node);
2694    const nodeRef = useNodeObserver({
2695        node,
2696        nodeType,
2697        hasDimensions,
2698        resizeObserver
2699    });
2700    const dragging = useDrag({
2701        nodeRef,
2702        disabled: node.hidden || !isDraggable,
2703        noDragClassName,
2704        handleSelector: node.dragHandle,
2705        nodeId: id,
2706        isSelectable,
2707        nodeClickDistance
2708    });
2709    const moveSelectedNodes = useMoveSelectedNodes();
2710    if (node.hidden) {
2711        return null;
2712    }
2713    const nodeDimensions = (0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .getNodeDimensions */ .Rf)(node);
2714    const inlineDimensions = getNodeInlineStyleDimensions(node);
2715    const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
2716    const onMouseEnterHandler = onMouseEnter ? (event)=>onMouseEnter(event, {
2717            ...internals.userNode
2718        }) : undefined;
2719    const onMouseMoveHandler = onMouseMove ? (event)=>onMouseMove(event, {
2720            ...internals.userNode
2721        }) : undefined;
2722    const onMouseLeaveHandler = onMouseLeave ? (event)=>onMouseLeave(event, {
2723            ...internals.userNode
2724        }) : undefined;
2725    const onContextMenuHandler = onContextMenu ? (event)=>onContextMenu(event, {
2726            ...internals.userNode
2727        }) : undefined;
2728    const onDoubleClickHandler = onDoubleClick ? (event)=>onDoubleClick(event, {
2729            ...internals.userNode
2730        }) : undefined;
2731    const onSelectNodeHandler = (event)=>{
2732        const { selectNodesOnDrag, nodeDragThreshold } = store.getState();
2733        if (isSelectable && (!selectNodesOnDrag || !isDraggable || nodeDragThreshold > 0)) {
2734            /*
2735             * this handler gets called by XYDrag on drag start when selectNodesOnDrag=true
2736             * here we only need to call it when selectNodesOnDrag=false
2737             */ handleNodeClick({
2738                id,
2739                store,
2740                nodeRef
2741            });
2742        }
2743        if (onClick) {
2744            onClick(event, {
2745                ...internals.userNode
2746            });
2747        }
2748    };
2749    const onKeyDown = (event)=>{
2750        if ((0,_xyflow_system__WEBPACK_IMPORTED_MODULE_3__/* .isInputDOMNode */ .s$)(event.