@odigos/ui-kit 0.0.20 → 0.0.22

package/lib/containers.js

@@ -1,31 +1,23 @@
 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, memo, useContext, createContext, useCallback, useLayoutEffect, Fragment } from 'react';
 import styled, { css } from 'styled-components';
-import { A as ACTION_OPTIONS, M as MONITORS_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-BFRz3l_w.js';
+import { A as ACTION_OPTIONS, M as MONITORS_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-D3sp5Hx7.js';
 import { D as DISPLAY_TITLES, F as FORM_ALERTS } from './index-C_0J5P9M.js';
 import { ActionType, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, AddNodeTypes, EdgeTypes, FieldTypes, SignalType, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType } from './types.js';
-import { f as DataCardFieldTypes, p as FieldLabel, b as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, V as Text, P as Segment, O as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, W as TextArea, k as Drawer, h as DeleteWarning, C as CancelWarning, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a3 as ModalBody, A as AutocompleteInput, i as Divider, R as Status, $ as FlexRow, Y as Tooltip, s as IconWrapped, G as MonitorsIcons, a4 as TableContainer, a5 as TableTitleWrap, r as IconTitleBadge, a6 as TableWrap, y as InteractiveTable, a1 as CenterThis, J as NoDataFound, a0 as FlexColumn, Z as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a7 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, Q as SkeletonLoader, X as Toggle, L as NotificationNote, U as Stepper, I as IconButton, e as DataCardFields, t as IconsNav, q as IconGroup } from './index-BoH4B5XC.js';
-import { g as usePendingStore, f as useNotificationStore, a as useDrawerStore, b as useEntityStore, e as useModalStore, c as useFilterStore, s as styleInject, h as useSelectedStore, d as useInstrumentStore, j as getEntityId, i as useSetupStore, u as useDarkMode } from './index-BazfJyRh.js';
+import { f as DataCardFieldTypes, p as FieldLabel, b as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, V as Text, P as Segment, O as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, W as TextArea, k as Drawer, h as DeleteWarning, C as CancelWarning, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a3 as ModalBody, A as AutocompleteInput, i as Divider, R as Status, $ as FlexRow, Y as Tooltip, s as IconWrapped, G as MonitorsIcons, a4 as TableContainer, a5 as TableTitleWrap, r as IconTitleBadge, a6 as TableWrap, y as InteractiveTable, a1 as CenterThis, J as NoDataFound, a0 as FlexColumn, Z as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a7 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, Q as SkeletonLoader, X as Toggle, L as NotificationNote, U as Stepper, I as IconButton, e as DataCardFields, t as IconsNav, q as IconGroup } from './index-3mlRUlHD.js';
+import { g as usePendingStore, f as useNotificationStore, a as useDrawerStore, b as useEntityStore, e as useModalStore, c as useFilterStore, s as styleInject, h as useSelectedStore, d as useInstrumentStore, k as getEntityId, i as useSetupStore, u as useDarkMode } from './index-DiTtXTRm.js';
 import Theme from './theme.js';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
 import { i as CheckCircledIcon, O as OdigosLogo } from './index-BsH_egEe.js';
 import { C as CrossCircledIcon, E as EditIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, N as NotificationIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-KOMAv-TS.js';
-import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-CD_BQJCD.js';
-import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-_2PggiXn.js';
-import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-bXMKBfST.js';
+import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-C7Y1tYdc.js';
+import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-CrKof314.js';
+import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-D0ykOLrk.js';
 import { T as TrashIcon, S as SearchIcon, P as PlusIcon$1, A as ArrowIcon, a as CopyIcon, f as CheckIcon, g as CrossIcon } from './index-BJxaoI0G.js';
-import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-WSle42rz.js';
-import { f as filterActions, g as getConditionsBooleans, k as getEntityLabel, j as getEntityIcon, s as sleep$1, m as getPlatformIcon, n as getPlatformLabel, d as formatBytes, h as getContainersIcons, o as getValueForRange, i as getDestinationIcon, b as filterSources, a as filterDestinations, c as compareCondition, l as getMetricForEntity, p as getWorkloadId, e as getContainersInstrumentedCount, q as isOverTime } from './index-DSzybApb.js';
-import require$$1 from 'use-sync-external-store/shim';
+import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-BfUUVS8N.js';
+import { f as filterActions, g as getConditionsBooleans, k as getEntityLabel, j as getEntityIcon, s as sleep$1, m as getPlatformIcon, n as getPlatformLabel, d as formatBytes, h as getContainersIcons, o as getValueForRange, i as getDestinationIcon, b as filterSources, a as filterDestinations, c as compareCondition, l as getMetricForEntity, p as getWorkloadId, e as getContainersInstrumentedCount, q as isOverTime } from './index-C48Fe7Pl.js';
 import { createPortal } from 'react-dom';
-import { R as RulesIcon, W as SourcesIcon, y as ActionsIcon, z as DestinationsIcon } from './index-DB8Djrsy.js';
+import { a5 as RulesIcon, a6 as SourcesIcon, a2 as ActionsIcon, a3 as DestinationsIcon } from './index-CksKgOxY.js';
 import './index-DGel4E-Z.js';
-import 'babel-runtime/helpers/extends';
-import 'babel-runtime/core-js/object/get-prototype-of';
-import 'babel-runtime/helpers/classCallCheck';
-import 'babel-runtime/helpers/createClass';
-import 'babel-runtime/helpers/possibleConstructorReturn';
-import 'babel-runtime/helpers/inherits';
-import 'object-assign';
 import './index-7-KCQK-x.js';
 
 const buildCard$3 = (action) => {
@@ -1092,7 +1084,7 @@ const ComputePlatformsActionsMenu = ({ connections }) => {
                 React.createElement(ConnectionStatusDropdown, { connections: connections, value: statuses, onSelect: (val) => setStatuses([...(statuses || []), val]), onDeselect: (val) => setStatuses((statuses || []).filter((opt) => opt.id !== val.id)), showSearch: true, required: true, isMulti: true })))));
 };
 
-var css_248z = "/* this gets exported as style.css and can be used for the default theming */\n/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */\n.react-flow {\n  direction: ltr;\n\n  --xy-edge-stroke-default: #b1b1b7;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #555;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);\n\n  --xy-minimap-background-color-default: #fff;\n  --xy-minimap-mask-background-color-default: rgb(240, 240, 240, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #e2e2e2;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: transparent;\n  --xy-background-pattern-dots-color-default: #91919a;\n  --xy-background-pattern-lines-color-default: #eee;\n  --xy-background-pattern-cross-color-default: #e2e2e2;\n  background-color: var(--xy-background-color, var(--xy-background-color-default));\n  --xy-node-color-default: inherit;\n  --xy-node-border-default: 1px solid #1a192b;\n  --xy-node-background-color-default: #fff;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;\n  --xy-node-border-radius-default: 3px;\n\n  --xy-handle-background-color-default: #1a192b;\n  --xy-handle-border-color-default: #fff;\n\n  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #fefefe;\n  --xy-controls-button-background-color-hover-default: #f4f4f4;\n  --xy-controls-button-color-default: inherit;\n  --xy-controls-button-color-hover-default: inherit;\n  --xy-controls-button-border-color-default: #eee;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #ffffff;\n  --xy-edge-label-color-default: inherit;\n  --xy-resize-background-color-default: #3367d9;\n}\n.react-flow.dark {\n  --xy-edge-stroke-default: #3e3e3e;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #727272;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);\n\n  --xy-minimap-background-color-default: #141414;\n  --xy-minimap-mask-background-color-default: rgb(60, 60, 60, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #2b2b2b;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: #141414;\n  --xy-background-pattern-dots-color-default: #777;\n  --xy-background-pattern-lines-color-default: #777;\n  --xy-background-pattern-cross-color-default: #777;\n  --xy-node-color-default: #f8f8f8;\n  --xy-node-border-default: 1px solid #3c3c3c;\n  --xy-node-background-color-default: #1e1e1e;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;\n\n  --xy-handle-background-color-default: #bebebe;\n  --xy-handle-border-color-default: #1e1e1e;\n\n  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #2b2b2b;\n  --xy-controls-button-background-color-hover-default: #3e3e3e;\n  --xy-controls-button-color-default: #f8f8f8;\n  --xy-controls-button-color-hover-default: #fff;\n  --xy-controls-button-border-color-default: #5b5b5b;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #141414;\n  --xy-edge-label-color-default: #f8f8f8;\n}\n.react-flow__background {\n  background-color: var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));\n  pointer-events: none;\n  z-index: -1;\n}\n.react-flow__container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.react-flow__pane {\n  z-index: 1;\n}\n.react-flow__pane.draggable {\n    cursor: grab;\n  }\n.react-flow__pane.dragging {\n    cursor: grabbing;\n  }\n.react-flow__pane.selection {\n    cursor: pointer;\n  }\n.react-flow__viewport {\n  transform-origin: 0 0;\n  z-index: 2;\n  pointer-events: none;\n}\n.react-flow__renderer {\n  z-index: 4;\n}\n.react-flow__selection {\n  z-index: 6;\n}\n.react-flow__nodesselection-rect:focus,\n.react-flow__nodesselection-rect:focus-visible {\n  outline: none;\n}\n.react-flow__edge-path {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));\n  fill: none;\n}\n.react-flow__connection-path {\n  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));\n  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));\n  fill: none;\n}\n.react-flow .react-flow__edges {\n  position: absolute;\n}\n.react-flow .react-flow__edges svg {\n    overflow: visible;\n    position: absolute;\n    pointer-events: none;\n  }\n.react-flow__edge {\n  pointer-events: visibleStroke;\n}\n.react-flow__edge.selectable {\n    cursor: pointer;\n  }\n.react-flow__edge.animated path {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n.react-flow__edge.animated path.react-flow__edge-interaction {\n    stroke-dasharray: none;\n    animation: none;\n  }\n.react-flow__edge.inactive {\n    pointer-events: none;\n  }\n.react-flow__edge.selected,\n  .react-flow__edge:focus,\n  .react-flow__edge:focus-visible {\n    outline: none;\n  }\n.react-flow__edge.selected .react-flow__edge-path,\n  .react-flow__edge.selectable:focus .react-flow__edge-path,\n  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {\n    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));\n  }\n.react-flow__edge-textwrapper {\n    pointer-events: all;\n  }\n.react-flow__edge .react-flow__edge-text {\n    pointer-events: none;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__connection {\n  pointer-events: none;\n}\n.react-flow__connection .animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\nsvg.react-flow__connectionline {\n  z-index: 1001;\n  overflow: visible;\n  position: absolute;\n}\n.react-flow__nodes {\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n.react-flow__node {\n  position: absolute;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n  box-sizing: border-box;\n  cursor: default;\n}\n.react-flow__node.selectable {\n    cursor: pointer;\n  }\n.react-flow__node.draggable {\n    cursor: grab;\n    pointer-events: all;\n  }\n.react-flow__node.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__nodesselection {\n  z-index: 3;\n  transform-origin: left top;\n  pointer-events: none;\n}\n.react-flow__nodesselection-rect {\n    position: absolute;\n    pointer-events: all;\n    cursor: grab;\n  }\n.react-flow__handle {\n  position: absolute;\n  pointer-events: none;\n  min-width: 5px;\n  min-height: 5px;\n  width: 6px;\n  height: 6px;\n  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));\n  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));\n  border-radius: 100%;\n}\n.react-flow__handle.connectingfrom {\n    pointer-events: all;\n  }\n.react-flow__handle.connectionindicator {\n    pointer-events: all;\n    cursor: crosshair;\n  }\n.react-flow__handle-bottom {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n.react-flow__handle-top {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-left {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-right {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n.react-flow__edgeupdater {\n  cursor: move;\n  pointer-events: all;\n}\n.react-flow__panel {\n  position: absolute;\n  z-index: 5;\n  margin: 15px;\n}\n.react-flow__panel.top {\n    top: 0;\n  }\n.react-flow__panel.bottom {\n    bottom: 0;\n  }\n.react-flow__panel.left {\n    left: 0;\n  }\n.react-flow__panel.right {\n    right: 0;\n  }\n.react-flow__panel.center {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n.react-flow__attribution {\n  font-size: 10px;\n  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));\n  padding: 2px 3px;\n  margin: 0;\n}\n.react-flow__attribution a {\n    text-decoration: none;\n    color: #999;\n  }\n@keyframes dashdraw {\n  from {\n    stroke-dashoffset: 10;\n  }\n}\n.react-flow__edgelabel-renderer {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  left: 0;\n  top: 0;\n}\n.react-flow__viewport-portal {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.react-flow__minimap {\n  background: var(\n    --xy-minimap-background-color-props,\n    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))\n  );\n}\n.react-flow__minimap-svg {\n    display: block;\n  }\n.react-flow__minimap-mask {\n    fill: var(\n      --xy-minimap-mask-background-color-props,\n      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-mask-stroke-color-props,\n      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-mask-stroke-width-props,\n      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))\n    );\n  }\n.react-flow__minimap-node {\n    fill: var(\n      --xy-minimap-node-background-color-props,\n      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-node-stroke-color-props,\n      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-node-stroke-width-props,\n      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))\n    );\n  }\n.react-flow__background-pattern.dots {\n    fill: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))\n    );\n  }\n.react-flow__background-pattern.lines {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))\n    );\n  }\n.react-flow__background-pattern.cross {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))\n    );\n  }\n.react-flow__controls {\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));\n}\n.react-flow__controls.horizontal {\n    flex-direction: row;\n  }\n.react-flow__controls-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 26px;\n    width: 26px;\n    padding: 4px;\n    border: none;\n    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));\n    border-bottom: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n    color: var(\n      --xy-controls-button-color-props,\n      var(--xy-controls-button-color, var(--xy-controls-button-color-default))\n    );\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__controls-button svg {\n      width: 100%;\n      max-width: 12px;\n      max-height: 12px;\n      fill: currentColor;\n    }\n.react-flow__edge.updating .react-flow__edge-path {\n      stroke: #777;\n    }\n.react-flow__edge-text {\n    font-size: 10px;\n  }\n.react-flow__node.selectable:focus,\n  .react-flow__node.selectable:focus-visible {\n    outline: none;\n  }\n.react-flow__node-input,\n.react-flow__node-default,\n.react-flow__node-output,\n.react-flow__node-group {\n  padding: 10px;\n  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));\n  width: 150px;\n  font-size: 12px;\n  color: var(--xy-node-color, var(--xy-node-color-default));\n  text-align: center;\n  border: var(--xy-node-border, var(--xy-node-border-default));\n  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));\n}\n.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {\n      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));\n    }\n.react-flow__node-input.selectable.selected,\n    .react-flow__node-input.selectable:focus,\n    .react-flow__node-input.selectable:focus-visible,\n    .react-flow__node-default.selectable.selected,\n    .react-flow__node-default.selectable:focus,\n    .react-flow__node-default.selectable:focus-visible,\n    .react-flow__node-output.selectable.selected,\n    .react-flow__node-output.selectable:focus,\n    .react-flow__node-output.selectable:focus-visible,\n    .react-flow__node-group.selectable.selected,\n    .react-flow__node-group.selectable:focus,\n    .react-flow__node-group.selectable:focus-visible {\n      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));\n    }\n.react-flow__node-group {\n  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));\n}\n.react-flow__nodesselection-rect,\n.react-flow__selection {\n  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));\n  border: var(--xy-selection-border, var(--xy-selection-border-default));\n}\n.react-flow__nodesselection-rect:focus,\n  .react-flow__nodesselection-rect:focus-visible,\n  .react-flow__selection:focus,\n  .react-flow__selection:focus-visible {\n    outline: none;\n  }\n.react-flow__controls-button:hover {\n      background: var(\n        --xy-controls-button-background-color-hover-props,\n        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))\n      );\n      color: var(\n        --xy-controls-button-color-hover-props,\n        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))\n      );\n    }\n.react-flow__controls-button:disabled {\n      pointer-events: none;\n    }\n.react-flow__controls-button:disabled svg {\n        fill-opacity: 0.4;\n      }\n.react-flow__controls-button:last-child {\n    border-bottom: none;\n  }\n.react-flow__resize-control {\n  position: absolute;\n}\n.react-flow__resize-control.left,\n.react-flow__resize-control.right {\n  cursor: ew-resize;\n}\n.react-flow__resize-control.top,\n.react-flow__resize-control.bottom {\n  cursor: ns-resize;\n}\n.react-flow__resize-control.top.left,\n.react-flow__resize-control.bottom.right {\n  cursor: nwse-resize;\n}\n.react-flow__resize-control.bottom.left,\n.react-flow__resize-control.top.right {\n  cursor: nesw-resize;\n}\n/* handle styles */\n.react-flow__resize-control.handle {\n  width: 4px;\n  height: 4px;\n  border: 1px solid #fff;\n  border-radius: 1px;\n  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  transform: translate(-50%, -50%);\n}\n.react-flow__resize-control.handle.left {\n  left: 0;\n  top: 50%;\n}\n.react-flow__resize-control.handle.right {\n  left: 100%;\n  top: 50%;\n}\n.react-flow__resize-control.handle.top {\n  left: 50%;\n  top: 0;\n}\n.react-flow__resize-control.handle.bottom {\n  left: 50%;\n  top: 100%;\n}\n.react-flow__resize-control.handle.top.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.bottom.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.top.right {\n  left: 100%;\n}\n.react-flow__resize-control.handle.bottom.right {\n  left: 100%;\n}\n/* line styles */\n.react-flow__resize-control.line {\n  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  border-width: 0;\n  border-style: solid;\n}\n.react-flow__resize-control.line.left,\n.react-flow__resize-control.line.right {\n  width: 1px;\n  transform: translate(-50%, 0);\n  top: 0;\n  height: 100%;\n}\n.react-flow__resize-control.line.left {\n  left: 0;\n  border-left-width: 1px;\n}\n.react-flow__resize-control.line.right {\n  left: 100%;\n  border-right-width: 1px;\n}\n.react-flow__resize-control.line.top,\n.react-flow__resize-control.line.bottom {\n  height: 1px;\n  transform: translate(0, -50%);\n  left: 0;\n  width: 100%;\n}\n.react-flow__resize-control.line.top {\n  top: 0;\n  border-top-width: 1px;\n}\n.react-flow__resize-control.line.bottom {\n  border-bottom-width: 1px;\n  top: 100%;\n}\n.react-flow__edge-textbg {\n  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));\n}\n.react-flow__edge-text {\n  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));\n}\n";
+var css_248z = "/* this gets exported as style.css and can be used for the default theming */\n/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */\n.react-flow {\n  direction: ltr;\n\n  --xy-edge-stroke-default: #b1b1b7;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #555;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);\n\n  --xy-minimap-background-color-default: #fff;\n  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #e2e2e2;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: transparent;\n  --xy-background-pattern-dots-color-default: #91919a;\n  --xy-background-pattern-lines-color-default: #eee;\n  --xy-background-pattern-cross-color-default: #e2e2e2;\n  background-color: var(--xy-background-color, var(--xy-background-color-default));\n  --xy-node-color-default: inherit;\n  --xy-node-border-default: 1px solid #1a192b;\n  --xy-node-background-color-default: #fff;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;\n  --xy-node-border-radius-default: 3px;\n\n  --xy-handle-background-color-default: #1a192b;\n  --xy-handle-border-color-default: #fff;\n\n  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #fefefe;\n  --xy-controls-button-background-color-hover-default: #f4f4f4;\n  --xy-controls-button-color-default: inherit;\n  --xy-controls-button-color-hover-default: inherit;\n  --xy-controls-button-border-color-default: #eee;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #ffffff;\n  --xy-edge-label-color-default: inherit;\n  --xy-resize-background-color-default: #3367d9;\n}\n.react-flow.dark {\n  --xy-edge-stroke-default: #3e3e3e;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #727272;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);\n\n  --xy-minimap-background-color-default: #141414;\n  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #2b2b2b;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: #141414;\n  --xy-background-pattern-dots-color-default: #777;\n  --xy-background-pattern-lines-color-default: #777;\n  --xy-background-pattern-cross-color-default: #777;\n  --xy-node-color-default: #f8f8f8;\n  --xy-node-border-default: 1px solid #3c3c3c;\n  --xy-node-background-color-default: #1e1e1e;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;\n\n  --xy-handle-background-color-default: #bebebe;\n  --xy-handle-border-color-default: #1e1e1e;\n\n  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #2b2b2b;\n  --xy-controls-button-background-color-hover-default: #3e3e3e;\n  --xy-controls-button-color-default: #f8f8f8;\n  --xy-controls-button-color-hover-default: #fff;\n  --xy-controls-button-border-color-default: #5b5b5b;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #141414;\n  --xy-edge-label-color-default: #f8f8f8;\n}\n.react-flow__background {\n  background-color: var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));\n  pointer-events: none;\n  z-index: -1;\n}\n.react-flow__container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.react-flow__pane {\n  z-index: 1;\n}\n.react-flow__pane.draggable {\n    cursor: grab;\n  }\n.react-flow__pane.dragging {\n    cursor: grabbing;\n  }\n.react-flow__pane.selection {\n    cursor: pointer;\n  }\n.react-flow__viewport {\n  transform-origin: 0 0;\n  z-index: 2;\n  pointer-events: none;\n}\n.react-flow__renderer {\n  z-index: 4;\n}\n.react-flow__selection {\n  z-index: 6;\n}\n.react-flow__nodesselection-rect:focus,\n.react-flow__nodesselection-rect:focus-visible {\n  outline: none;\n}\n.react-flow__edge-path {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));\n  fill: none;\n}\n.react-flow__connection-path {\n  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));\n  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));\n  fill: none;\n}\n.react-flow .react-flow__edges {\n  position: absolute;\n}\n.react-flow .react-flow__edges svg {\n    overflow: visible;\n    position: absolute;\n    pointer-events: none;\n  }\n.react-flow__edge {\n  pointer-events: visibleStroke;\n}\n.react-flow__edge.selectable {\n    cursor: pointer;\n  }\n.react-flow__edge.animated path {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n.react-flow__edge.animated path.react-flow__edge-interaction {\n    stroke-dasharray: none;\n    animation: none;\n  }\n.react-flow__edge.inactive {\n    pointer-events: none;\n  }\n.react-flow__edge.selected,\n  .react-flow__edge:focus,\n  .react-flow__edge:focus-visible {\n    outline: none;\n  }\n.react-flow__edge.selected .react-flow__edge-path,\n  .react-flow__edge.selectable:focus .react-flow__edge-path,\n  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {\n    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));\n  }\n.react-flow__edge-textwrapper {\n    pointer-events: all;\n  }\n.react-flow__edge .react-flow__edge-text {\n    pointer-events: none;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__connection {\n  pointer-events: none;\n}\n.react-flow__connection .animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\nsvg.react-flow__connectionline {\n  z-index: 1001;\n  overflow: visible;\n  position: absolute;\n}\n.react-flow__nodes {\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n.react-flow__node {\n  position: absolute;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n  box-sizing: border-box;\n  cursor: default;\n}\n.react-flow__node.selectable {\n    cursor: pointer;\n  }\n.react-flow__node.draggable {\n    cursor: grab;\n    pointer-events: all;\n  }\n.react-flow__node.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__nodesselection {\n  z-index: 3;\n  transform-origin: left top;\n  pointer-events: none;\n}\n.react-flow__nodesselection-rect {\n    position: absolute;\n    pointer-events: all;\n    cursor: grab;\n  }\n.react-flow__handle {\n  position: absolute;\n  pointer-events: none;\n  min-width: 5px;\n  min-height: 5px;\n  width: 6px;\n  height: 6px;\n  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));\n  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));\n  border-radius: 100%;\n}\n.react-flow__handle.connectingfrom {\n    pointer-events: all;\n  }\n.react-flow__handle.connectionindicator {\n    pointer-events: all;\n    cursor: crosshair;\n  }\n.react-flow__handle-bottom {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n.react-flow__handle-top {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-left {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-right {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n.react-flow__edgeupdater {\n  cursor: move;\n  pointer-events: all;\n}\n.react-flow__panel {\n  position: absolute;\n  z-index: 5;\n  margin: 15px;\n}\n.react-flow__panel.top {\n    top: 0;\n  }\n.react-flow__panel.bottom {\n    bottom: 0;\n  }\n.react-flow__panel.top.center, .react-flow__panel.bottom.center {\n      left: 50%;\n      transform: translateX(-50%);\n    }\n.react-flow__panel.left {\n    left: 0;\n  }\n.react-flow__panel.right {\n    right: 0;\n  }\n.react-flow__panel.left.center, .react-flow__panel.right.center {\n      top: 50%;\n      transform: translateY(-50%);\n    }\n.react-flow__attribution {\n  font-size: 10px;\n  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));\n  padding: 2px 3px;\n  margin: 0;\n}\n.react-flow__attribution a {\n    text-decoration: none;\n    color: #999;\n  }\n@keyframes dashdraw {\n  from {\n    stroke-dashoffset: 10;\n  }\n}\n.react-flow__edgelabel-renderer {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  left: 0;\n  top: 0;\n}\n.react-flow__viewport-portal {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.react-flow__minimap {\n  background: var(\n    --xy-minimap-background-color-props,\n    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))\n  );\n}\n.react-flow__minimap-svg {\n    display: block;\n  }\n.react-flow__minimap-mask {\n    fill: var(\n      --xy-minimap-mask-background-color-props,\n      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-mask-stroke-color-props,\n      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-mask-stroke-width-props,\n      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))\n    );\n  }\n.react-flow__minimap-node {\n    fill: var(\n      --xy-minimap-node-background-color-props,\n      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-node-stroke-color-props,\n      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-node-stroke-width-props,\n      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))\n    );\n  }\n.react-flow__background-pattern.dots {\n    fill: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))\n    );\n  }\n.react-flow__background-pattern.lines {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))\n    );\n  }\n.react-flow__background-pattern.cross {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))\n    );\n  }\n.react-flow__controls {\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));\n}\n.react-flow__controls.horizontal {\n    flex-direction: row;\n  }\n.react-flow__controls-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 26px;\n    width: 26px;\n    padding: 4px;\n    border: none;\n    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));\n    border-bottom: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n    color: var(\n      --xy-controls-button-color-props,\n      var(--xy-controls-button-color, var(--xy-controls-button-color-default))\n    );\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__controls-button svg {\n      width: 100%;\n      max-width: 12px;\n      max-height: 12px;\n      fill: currentColor;\n    }\n.react-flow__edge.updating .react-flow__edge-path {\n      stroke: #777;\n    }\n.react-flow__edge-text {\n    font-size: 10px;\n  }\n.react-flow__node.selectable:focus,\n  .react-flow__node.selectable:focus-visible {\n    outline: none;\n  }\n.react-flow__node-input,\n.react-flow__node-default,\n.react-flow__node-output,\n.react-flow__node-group {\n  padding: 10px;\n  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));\n  width: 150px;\n  font-size: 12px;\n  color: var(--xy-node-color, var(--xy-node-color-default));\n  text-align: center;\n  border: var(--xy-node-border, var(--xy-node-border-default));\n  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));\n}\n.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {\n      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));\n    }\n.react-flow__node-input.selectable.selected,\n    .react-flow__node-input.selectable:focus,\n    .react-flow__node-input.selectable:focus-visible,\n    .react-flow__node-default.selectable.selected,\n    .react-flow__node-default.selectable:focus,\n    .react-flow__node-default.selectable:focus-visible,\n    .react-flow__node-output.selectable.selected,\n    .react-flow__node-output.selectable:focus,\n    .react-flow__node-output.selectable:focus-visible,\n    .react-flow__node-group.selectable.selected,\n    .react-flow__node-group.selectable:focus,\n    .react-flow__node-group.selectable:focus-visible {\n      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));\n    }\n.react-flow__node-group {\n  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));\n}\n.react-flow__nodesselection-rect,\n.react-flow__selection {\n  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));\n  border: var(--xy-selection-border, var(--xy-selection-border-default));\n}\n.react-flow__nodesselection-rect:focus,\n  .react-flow__nodesselection-rect:focus-visible,\n  .react-flow__selection:focus,\n  .react-flow__selection:focus-visible {\n    outline: none;\n  }\n.react-flow__controls-button:hover {\n      background: var(\n        --xy-controls-button-background-color-hover-props,\n        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))\n      );\n      color: var(\n        --xy-controls-button-color-hover-props,\n        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))\n      );\n    }\n.react-flow__controls-button:disabled {\n      pointer-events: none;\n    }\n.react-flow__controls-button:disabled svg {\n        fill-opacity: 0.4;\n      }\n.react-flow__controls-button:last-child {\n    border-bottom: none;\n  }\n.react-flow__resize-control {\n  position: absolute;\n}\n.react-flow__resize-control.left,\n.react-flow__resize-control.right {\n  cursor: ew-resize;\n}\n.react-flow__resize-control.top,\n.react-flow__resize-control.bottom {\n  cursor: ns-resize;\n}\n.react-flow__resize-control.top.left,\n.react-flow__resize-control.bottom.right {\n  cursor: nwse-resize;\n}\n.react-flow__resize-control.bottom.left,\n.react-flow__resize-control.top.right {\n  cursor: nesw-resize;\n}\n/* handle styles */\n.react-flow__resize-control.handle {\n  width: 4px;\n  height: 4px;\n  border: 1px solid #fff;\n  border-radius: 1px;\n  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  transform: translate(-50%, -50%);\n}\n.react-flow__resize-control.handle.left {\n  left: 0;\n  top: 50%;\n}\n.react-flow__resize-control.handle.right {\n  left: 100%;\n  top: 50%;\n}\n.react-flow__resize-control.handle.top {\n  left: 50%;\n  top: 0;\n}\n.react-flow__resize-control.handle.bottom {\n  left: 50%;\n  top: 100%;\n}\n.react-flow__resize-control.handle.top.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.bottom.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.top.right {\n  left: 100%;\n}\n.react-flow__resize-control.handle.bottom.right {\n  left: 100%;\n}\n/* line styles */\n.react-flow__resize-control.line {\n  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  border-width: 0;\n  border-style: solid;\n}\n.react-flow__resize-control.line.left,\n.react-flow__resize-control.line.right {\n  width: 1px;\n  transform: translate(-50%, 0);\n  top: 0;\n  height: 100%;\n}\n.react-flow__resize-control.line.left {\n  left: 0;\n  border-left-width: 1px;\n}\n.react-flow__resize-control.line.right {\n  left: 100%;\n  border-right-width: 1px;\n}\n.react-flow__resize-control.line.top,\n.react-flow__resize-control.line.bottom {\n  height: 1px;\n  transform: translate(0, -50%);\n  left: 0;\n  width: 100%;\n}\n.react-flow__resize-control.line.top {\n  top: 0;\n  border-top-width: 1px;\n}\n.react-flow__resize-control.line.bottom {\n  border-bottom-width: 1px;\n  top: 100%;\n}\n.react-flow__edge-textbg {\n  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));\n}\n.react-flow__edge-text {\n  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));\n}\n";
 styleInject(css_248z);
 
 var jsxRuntime = {exports: {}};
@@ -1162,15 +1154,13 @@ function requireReactJsxRuntime_development () {
 	    function getComponentNameFromType(type) {
 	      if (null == type) return null;
 	      if ("function" === typeof type)
-	        return type.$$typeof === REACT_CLIENT_REFERENCE$2
+	        return type.$$typeof === REACT_CLIENT_REFERENCE
 	          ? null
 	          : type.displayName || type.name || null;
 	      if ("string" === typeof type) return type;
 	      switch (type) {
 	        case REACT_FRAGMENT_TYPE:
 	          return "Fragment";
-	        case REACT_PORTAL_TYPE:
-	          return "Portal";
 	        case REACT_PROFILER_TYPE:
 	          return "Profiler";
 	        case REACT_STRICT_MODE_TYPE:
@@ -1179,6 +1169,8 @@ function requireReactJsxRuntime_development () {
 	          return "Suspense";
 	        case REACT_SUSPENSE_LIST_TYPE:
 	          return "SuspenseList";
+	        case REACT_ACTIVITY_TYPE:
+	          return "Activity";
 	      }
 	      if ("object" === typeof type)
 	        switch (
@@ -1188,6 +1180,8 @@ function requireReactJsxRuntime_development () {
 	            ),
 	          type.$$typeof)
 	        ) {
+	          case REACT_PORTAL_TYPE:
+	            return "Portal";
 	          case REACT_CONTEXT_TYPE:
 	            return (type.displayName || "Context") + ".Provider";
 	          case REACT_CONSUMER_TYPE:
@@ -1242,260 +1236,28 @@ function requireReactJsxRuntime_development () {
 	        return testStringCoercion(value);
 	      }
 	    }
-	    function disabledLog() {}
-	    function disableLogs() {
-	      if (0 === disabledDepth) {
-	        prevLog = console.log;
-	        prevInfo = console.info;
-	        prevWarn = console.warn;
-	        prevError = console.error;
-	        prevGroup = console.group;
-	        prevGroupCollapsed = console.groupCollapsed;
-	        prevGroupEnd = console.groupEnd;
-	        var props = {
-	          configurable: true,
-	          enumerable: true,
-	          value: disabledLog,
-	          writable: true
-	        };
-	        Object.defineProperties(console, {
-	          info: props,
-	          log: props,
-	          warn: props,
-	          error: props,
-	          group: props,
-	          groupCollapsed: props,
-	          groupEnd: props
-	        });
-	      }
-	      disabledDepth++;
-	    }
-	    function reenableLogs() {
-	      disabledDepth--;
-	      if (0 === disabledDepth) {
-	        var props = { configurable: true, enumerable: true, writable: true };
-	        Object.defineProperties(console, {
-	          log: assign({}, props, { value: prevLog }),
-	          info: assign({}, props, { value: prevInfo }),
-	          warn: assign({}, props, { value: prevWarn }),
-	          error: assign({}, props, { value: prevError }),
-	          group: assign({}, props, { value: prevGroup }),
-	          groupCollapsed: assign({}, props, { value: prevGroupCollapsed }),
-	          groupEnd: assign({}, props, { value: prevGroupEnd })
-	        });
-	      }
-	      0 > disabledDepth &&
-	        console.error(
-	          "disabledDepth fell below zero. This is a bug in React. Please file an issue."
-	        );
-	    }
-	    function describeBuiltInComponentFrame(name) {
-	      if (void 0 === prefix)
-	        try {
-	          throw Error();
-	        } catch (x) {
-	          var match = x.stack.trim().match(/\n( *(at )?)/);
-	          prefix = (match && match[1]) || "";
-	          suffix =
-	            -1 < x.stack.indexOf("\n    at")
-	              ? " (<anonymous>)"
-	              : -1 < x.stack.indexOf("@")
-	                ? "@unknown:0:0"
-	                : "";
-	        }
-	      return "\n" + prefix + name + suffix;
-	    }
-	    function describeNativeComponentFrame(fn, construct) {
-	      if (!fn || reentry) return "";
-	      var frame = componentFrameCache.get(fn);
-	      if (void 0 !== frame) return frame;
-	      reentry = true;
-	      frame = Error.prepareStackTrace;
-	      Error.prepareStackTrace = void 0;
-	      var previousDispatcher = null;
-	      previousDispatcher = ReactSharedInternals.H;
-	      ReactSharedInternals.H = null;
-	      disableLogs();
+	    function getTaskName(type) {
+	      if (type === REACT_FRAGMENT_TYPE) return "<>";
+	      if (
+	        "object" === typeof type &&
+	        null !== type &&
+	        type.$$typeof === REACT_LAZY_TYPE
+	      )
+	        return "<...>";
 	      try {
-	        var RunInRootFrame = {
-	          DetermineComponentFrameRoot: function () {
-	            try {
-	              if (construct) {
-	                var Fake = function () {
-	                  throw Error();
-	                };
-	                Object.defineProperty(Fake.prototype, "props", {
-	                  set: function () {
-	                    throw Error();
-	                  }
-	                });
-	                if ("object" === typeof Reflect && Reflect.construct) {
-	                  try {
-	                    Reflect.construct(Fake, []);
-	                  } catch (x) {
-	                    var control = x;
-	                  }
-	                  Reflect.construct(fn, [], Fake);
-	                } else {
-	                  try {
-	                    Fake.call();
-	                  } catch (x$0) {
-	                    control = x$0;
-	                  }
-	                  fn.call(Fake.prototype);
-	                }
-	              } else {
-	                try {
-	                  throw Error();
-	                } catch (x$1) {
-	                  control = x$1;
-	                }
-	                (Fake = fn()) &&
-	                  "function" === typeof Fake.catch &&
-	                  Fake.catch(function () {});
-	              }
-	            } catch (sample) {
-	              if (sample && control && "string" === typeof sample.stack)
-	                return [sample.stack, control.stack];
-	            }
-	            return [null, null];
-	          }
-	        };
-	        RunInRootFrame.DetermineComponentFrameRoot.displayName =
-	          "DetermineComponentFrameRoot";
-	        var namePropDescriptor = Object.getOwnPropertyDescriptor(
-	          RunInRootFrame.DetermineComponentFrameRoot,
-	          "name"
-	        );
-	        namePropDescriptor &&
-	          namePropDescriptor.configurable &&
-	          Object.defineProperty(
-	            RunInRootFrame.DetermineComponentFrameRoot,
-	            "name",
-	            { value: "DetermineComponentFrameRoot" }
-	          );
-	        var _RunInRootFrame$Deter =
-	            RunInRootFrame.DetermineComponentFrameRoot(),
-	          sampleStack = _RunInRootFrame$Deter[0],
-	          controlStack = _RunInRootFrame$Deter[1];
-	        if (sampleStack && controlStack) {
-	          var sampleLines = sampleStack.split("\n"),
-	            controlLines = controlStack.split("\n");
-	          for (
-	            _RunInRootFrame$Deter = namePropDescriptor = 0;
-	            namePropDescriptor < sampleLines.length &&
-	            !sampleLines[namePropDescriptor].includes(
-	              "DetermineComponentFrameRoot"
-	            );
-
-	          )
-	            namePropDescriptor++;
-	          for (
-	            ;
-	            _RunInRootFrame$Deter < controlLines.length &&
-	            !controlLines[_RunInRootFrame$Deter].includes(
-	              "DetermineComponentFrameRoot"
-	            );
-
-	          )
-	            _RunInRootFrame$Deter++;
-	          if (
-	            namePropDescriptor === sampleLines.length ||
-	            _RunInRootFrame$Deter === controlLines.length
-	          )
-	            for (
-	              namePropDescriptor = sampleLines.length - 1,
-	                _RunInRootFrame$Deter = controlLines.length - 1;
-	              1 <= namePropDescriptor &&
-	              0 <= _RunInRootFrame$Deter &&
-	              sampleLines[namePropDescriptor] !==
-	                controlLines[_RunInRootFrame$Deter];
-
-	            )
-	              _RunInRootFrame$Deter--;
-	          for (
-	            ;
-	            1 <= namePropDescriptor && 0 <= _RunInRootFrame$Deter;
-	            namePropDescriptor--, _RunInRootFrame$Deter--
-	          )
-	            if (
-	              sampleLines[namePropDescriptor] !==
-	              controlLines[_RunInRootFrame$Deter]
-	            ) {
-	              if (1 !== namePropDescriptor || 1 !== _RunInRootFrame$Deter) {
-	                do
-	                  if (
-	                    (namePropDescriptor--,
-	                    _RunInRootFrame$Deter--,
-	                    0 > _RunInRootFrame$Deter ||
-	                      sampleLines[namePropDescriptor] !==
-	                        controlLines[_RunInRootFrame$Deter])
-	                  ) {
-	                    var _frame =
-	                      "\n" +
-	                      sampleLines[namePropDescriptor].replace(
-	                        " at new ",
-	                        " at "
-	                      );
-	                    fn.displayName &&
-	                      _frame.includes("<anonymous>") &&
-	                      (_frame = _frame.replace("<anonymous>", fn.displayName));
-	                    "function" === typeof fn &&
-	                      componentFrameCache.set(fn, _frame);
-	                    return _frame;
-	                  }
-	                while (1 <= namePropDescriptor && 0 <= _RunInRootFrame$Deter);
-	              }
-	              break;
-	            }
-	        }
-	      } finally {
-	        (reentry = false),
-	          (ReactSharedInternals.H = previousDispatcher),
-	          reenableLogs(),
-	          (Error.prepareStackTrace = frame);
+	        var name = getComponentNameFromType(type);
+	        return name ? "<" + name + ">" : "<...>";
+	      } catch (x) {
+	        return "<...>";
 	      }
-	      sampleLines = (sampleLines = fn ? fn.displayName || fn.name : "")
-	        ? describeBuiltInComponentFrame(sampleLines)
-	        : "";
-	      "function" === typeof fn && componentFrameCache.set(fn, sampleLines);
-	      return sampleLines;
-	    }
-	    function describeUnknownElementTypeFrameInDEV(type) {
-	      if (null == type) return "";
-	      if ("function" === typeof type) {
-	        var prototype = type.prototype;
-	        return describeNativeComponentFrame(
-	          type,
-	          !(!prototype || !prototype.isReactComponent)
-	        );
-	      }
-	      if ("string" === typeof type) return describeBuiltInComponentFrame(type);
-	      switch (type) {
-	        case REACT_SUSPENSE_TYPE:
-	          return describeBuiltInComponentFrame("Suspense");
-	        case REACT_SUSPENSE_LIST_TYPE:
-	          return describeBuiltInComponentFrame("SuspenseList");
-	      }
-	      if ("object" === typeof type)
-	        switch (type.$$typeof) {
-	          case REACT_FORWARD_REF_TYPE:
-	            return (type = describeNativeComponentFrame(type.render, false)), type;
-	          case REACT_MEMO_TYPE:
-	            return describeUnknownElementTypeFrameInDEV(type.type);
-	          case REACT_LAZY_TYPE:
-	            prototype = type._payload;
-	            type = type._init;
-	            try {
-	              return describeUnknownElementTypeFrameInDEV(type(prototype));
-	            } catch (x) {}
-	        }
-	      return "";
 	    }
 	    function getOwner() {
 	      var dispatcher = ReactSharedInternals.A;
 	      return null === dispatcher ? null : dispatcher.getOwner();
 	    }
+	    function UnknownOwner() {
+	      return Error("react-stack-top-frame");
+	    }
 	    function hasValidKey(config) {
 	      if (hasOwnProperty.call(config, "key")) {
 	        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
@@ -1528,7 +1290,16 @@ function requireReactJsxRuntime_development () {
 	      componentName = this.props.ref;
 	      return void 0 !== componentName ? componentName : null;
 	    }
-	    function ReactElement(type, key, self, source, owner, props) {
+	    function ReactElement(
+	      type,
+	      key,
+	      self,
+	      source,
+	      owner,
+	      props,
+	      debugStack,
+	      debugTask
+	    ) {
 	      self = props.ref;
 	      type = {
 	        $$typeof: REACT_ELEMENT_TYPE,
@@ -1556,6 +1327,18 @@ function requireReactJsxRuntime_development () {
 	        writable: true,
 	        value: null
 	      });
+	      Object.defineProperty(type, "_debugStack", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: debugStack
+	      });
+	      Object.defineProperty(type, "_debugTask", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: debugTask
+	      });
 	      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
 	      return type;
 	    }
@@ -1565,71 +1348,26 @@ function requireReactJsxRuntime_development () {
 	      maybeKey,
 	      isStaticChildren,
 	      source,
-	      self
+	      self,
+	      debugStack,
+	      debugTask
 	    ) {
-	      if (
-	        "string" === typeof type ||
-	        "function" === typeof type ||
-	        type === REACT_FRAGMENT_TYPE ||
-	        type === REACT_PROFILER_TYPE ||
-	        type === REACT_STRICT_MODE_TYPE ||
-	        type === REACT_SUSPENSE_TYPE ||
-	        type === REACT_SUSPENSE_LIST_TYPE ||
-	        type === REACT_OFFSCREEN_TYPE ||
-	        ("object" === typeof type &&
-	          null !== type &&
-	          (type.$$typeof === REACT_LAZY_TYPE ||
-	            type.$$typeof === REACT_MEMO_TYPE ||
-	            type.$$typeof === REACT_CONTEXT_TYPE ||
-	            type.$$typeof === REACT_CONSUMER_TYPE ||
-	            type.$$typeof === REACT_FORWARD_REF_TYPE ||
-	            type.$$typeof === REACT_CLIENT_REFERENCE$1 ||
-	            void 0 !== type.getModuleId))
-	      ) {
-	        var children = config.children;
-	        if (void 0 !== children)
-	          if (isStaticChildren)
-	            if (isArrayImpl(children)) {
-	              for (
-	                isStaticChildren = 0;
-	                isStaticChildren < children.length;
-	                isStaticChildren++
-	              )
-	                validateChildKeys(children[isStaticChildren], type);
-	              Object.freeze && Object.freeze(children);
-	            } else
-	              console.error(
-	                "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-	              );
-	          else validateChildKeys(children, type);
-	      } else {
-	        children = "";
-	        if (
-	          void 0 === type ||
-	          ("object" === typeof type &&
-	            null !== type &&
-	            0 === Object.keys(type).length)
-	        )
-	          children +=
-	            " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.";
-	        null === type
-	          ? (isStaticChildren = "null")
-	          : isArrayImpl(type)
-	            ? (isStaticChildren = "array")
-	            : void 0 !== type && type.$$typeof === REACT_ELEMENT_TYPE
-	              ? ((isStaticChildren =
-	                  "<" +
-	                  (getComponentNameFromType(type.type) || "Unknown") +
-	                  " />"),
-	                (children =
-	                  " Did you accidentally export a JSX literal instead of a component?"))
-	              : (isStaticChildren = typeof type);
-	        console.error(
-	          "React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",
-	          isStaticChildren,
-	          children
-	        );
-	      }
+	      var children = config.children;
+	      if (void 0 !== children)
+	        if (isStaticChildren)
+	          if (isArrayImpl(children)) {
+	            for (
+	              isStaticChildren = 0;
+	              isStaticChildren < children.length;
+	              isStaticChildren++
+	            )
+	              validateChildKeys(children[isStaticChildren]);
+	            Object.freeze && Object.freeze(children);
+	          } else
+	            console.error(
+	              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+	            );
+	        else validateChildKeys(children);
 	      if (hasOwnProperty.call(config, "key")) {
 	        children = getComponentNameFromType(type);
 	        var keys = Object.keys(config).filter(function (k) {
@@ -1668,88 +1406,23 @@ function requireReactJsxRuntime_development () {
 	            ? type.displayName || type.name || "Unknown"
 	            : type
 	        );
-	      return ReactElement(type, children, self, source, getOwner(), maybeKey);
-	    }
-	    function validateChildKeys(node, parentType) {
-	      if (
-	        "object" === typeof node &&
-	        node &&
-	        node.$$typeof !== REACT_CLIENT_REFERENCE
-	      )
-	        if (isArrayImpl(node))
-	          for (var i = 0; i < node.length; i++) {
-	            var child = node[i];
-	            isValidElement(child) && validateExplicitKey(child, parentType);
-	          }
-	        else if (isValidElement(node))
-	          node._store && (node._store.validated = 1);
-	        else if (
-	          (null === node || "object" !== typeof node
-	            ? (i = null)
-	            : ((i =
-	                (MAYBE_ITERATOR_SYMBOL && node[MAYBE_ITERATOR_SYMBOL]) ||
-	                node["@@iterator"]),
-	              (i = "function" === typeof i ? i : null)),
-	          "function" === typeof i &&
-	            i !== node.entries &&
-	            ((i = i.call(node)), i !== node))
-	        )
-	          for (; !(node = i.next()).done; )
-	            isValidElement(node.value) &&
-	              validateExplicitKey(node.value, parentType);
-	    }
-	    function isValidElement(object) {
-	      return (
-	        "object" === typeof object &&
-	        null !== object &&
-	        object.$$typeof === REACT_ELEMENT_TYPE
+	      return ReactElement(
+	        type,
+	        children,
+	        self,
+	        source,
+	        getOwner(),
+	        maybeKey,
+	        debugStack,
+	        debugTask
 	      );
 	    }
-	    function validateExplicitKey(element, parentType) {
-	      if (
-	        element._store &&
-	        !element._store.validated &&
-	        null == element.key &&
-	        ((element._store.validated = 1),
-	        (parentType = getCurrentComponentErrorInfo(parentType)),
-	        !ownerHasKeyUseWarning[parentType])
-	      ) {
-	        ownerHasKeyUseWarning[parentType] = true;
-	        var childOwner = "";
-	        element &&
-	          null != element._owner &&
-	          element._owner !== getOwner() &&
-	          ((childOwner = null),
-	          "number" === typeof element._owner.tag
-	            ? (childOwner = getComponentNameFromType(element._owner.type))
-	            : "string" === typeof element._owner.name &&
-	              (childOwner = element._owner.name),
-	          (childOwner = " It was passed a child from " + childOwner + "."));
-	        var prevGetCurrentStack = ReactSharedInternals.getCurrentStack;
-	        ReactSharedInternals.getCurrentStack = function () {
-	          var stack = describeUnknownElementTypeFrameInDEV(element.type);
-	          prevGetCurrentStack && (stack += prevGetCurrentStack() || "");
-	          return stack;
-	        };
-	        console.error(
-	          'Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',
-	          parentType,
-	          childOwner
-	        );
-	        ReactSharedInternals.getCurrentStack = prevGetCurrentStack;
-	      }
-	    }
-	    function getCurrentComponentErrorInfo(parentType) {
-	      var info = "",
-	        owner = getOwner();
-	      owner &&
-	        (owner = getComponentNameFromType(owner.type)) &&
-	        (info = "\n\nCheck the render method of `" + owner + "`.");
-	      info ||
-	        ((parentType = getComponentNameFromType(parentType)) &&
-	          (info =
-	            "\n\nCheck the top-level render call using <" + parentType + ">."));
-	      return info;
+	    function validateChildKeys(node) {
+	      "object" === typeof node &&
+	        null !== node &&
+	        node.$$typeof === REACT_ELEMENT_TYPE &&
+	        node._store &&
+	        (node._store.validated = 1);
 	    }
 	    var React$1 = React,
 	      REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
@@ -1764,41 +1437,62 @@ function requireReactJsxRuntime_development () {
 	      REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
 	      REACT_MEMO_TYPE = Symbol.for("react.memo"),
 	      REACT_LAZY_TYPE = Symbol.for("react.lazy"),
-	      REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen"),
-	      MAYBE_ITERATOR_SYMBOL = Symbol.iterator,
-	      REACT_CLIENT_REFERENCE$2 = Symbol.for("react.client.reference"),
+	      REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
+	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
 	      ReactSharedInternals =
 	        React$1.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
 	      hasOwnProperty = Object.prototype.hasOwnProperty,
-	      assign = Object.assign,
-	      REACT_CLIENT_REFERENCE$1 = Symbol.for("react.client.reference"),
 	      isArrayImpl = Array.isArray,
-	      disabledDepth = 0,
-	      prevLog,
-	      prevInfo,
-	      prevWarn,
-	      prevError,
-	      prevGroup,
-	      prevGroupCollapsed,
-	      prevGroupEnd;
-	    disabledLog.__reactDisabledLog = true;
-	    var prefix,
-	      suffix,
-	      reentry = false;
-	    var componentFrameCache = new (
-	      "function" === typeof WeakMap ? WeakMap : Map
-	    )();
-	    var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
-	      specialPropKeyWarningShown;
+	      createTask = console.createTask
+	        ? console.createTask
+	        : function () {
+	            return null;
+	          };
+	    React$1 = {
+	      "react-stack-bottom-frame": function (callStackForError) {
+	        return callStackForError();
+	      }
+	    };
+	    var specialPropKeyWarningShown;
 	    var didWarnAboutElementRef = {};
-	    var didWarnAboutKeySpread = {},
-	      ownerHasKeyUseWarning = {};
+	    var unknownOwnerDebugStack = React$1["react-stack-bottom-frame"].bind(
+	      React$1,
+	      UnknownOwner
+	    )();
+	    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
+	    var didWarnAboutKeySpread = {};
 	    reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
 	    reactJsxRuntime_development.jsx = function (type, config, maybeKey, source, self) {
-	      return jsxDEVImpl(type, config, maybeKey, false, source, self);
+	      var trackActualOwner =
+	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+	      return jsxDEVImpl(
+	        type,
+	        config,
+	        maybeKey,
+	        false,
+	        source,
+	        self,
+	        trackActualOwner
+	          ? Error("react-stack-top-frame")
+	          : unknownOwnerDebugStack,
+	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+	      );
 	    };
 	    reactJsxRuntime_development.jsxs = function (type, config, maybeKey, source, self) {
-	      return jsxDEVImpl(type, config, maybeKey, true, source, self);
+	      var trackActualOwner =
+	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+	      return jsxDEVImpl(
+	        type,
+	        config,
+	        maybeKey,
+	        true,
+	        source,
+	        self,
+	        trackActualOwner
+	          ? Error("react-stack-top-frame")
+	          : unknownOwnerDebugStack,
+	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+	      );
 	    };
 	  })();
 	return reactJsxRuntime_development;
@@ -5456,7 +5150,7 @@ function getConnectionStatus(isValid) {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
- * Test whether an object is useable as an Edge
+ * Test whether an object is usable as an Edge
  * @public
  * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true
  * @param element - The element to test
@@ -5464,7 +5158,7 @@ function getConnectionStatus(isValid) {
  */
 const isEdgeBase = (element) => 'id' in element && 'source' in element && 'target' in element;
 /**
- * Test whether an object is useable as a Node
+ * Test whether an object is usable as a Node
  * @public
  * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true
  * @param element - The element to test
@@ -5488,9 +5182,8 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
  * to calculate the correct transform to fit the given nodes in a viewport.
  * @public
  * @remarks Useful when combined with {@link getViewportForBounds} to calculate the correct transform to fit the given nodes in a viewport.
- * @param nodes - Nodes to calculate the bounds for
- * @param params.nodeOrigin - Origin of the nodes: [0, 0] - top left, [0.5, 0.5] - center
- * @returns Bounding box enclosing all nodes
+ * @param nodes - Nodes to calculate the bounds for.
+ * @returns Bounding box enclosing all nodes.
  *
  * @remarks This function was previously called `getRectOfNodes`
  *
@@ -5518,7 +5211,7 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
  *const bounds = getNodesBounds(nodes);
  *```
  */
-const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0], nodeLookup: undefined }) => {
+const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0] }) => {
     if (process.env.NODE_ENV === 'development' && !params.nodeLookup) {
         console.warn('Please use `getNodesBounds` from `useReactFlow`/`useSvelteFlow` hook to ensure correct values for sub flows. If not possible, you have to provide a nodeLookup to support sub flows.');
     }
@@ -5588,9 +5281,9 @@ excludeNonSelectableNodes = false) => {
  * This utility filters an array of edges, keeping only those where either the source or target
  * node is present in the given array of nodes.
  * @public
- * @param nodes - Nodes you want to get the connected edges for
- * @param edges - All edges
- * @returns Array of edges that connect any of the given nodes with each other
+ * @param nodes - Nodes you want to get the connected edges for.
+ * @param edges - All edges.
+ * @returns Array of edges that connect any of the given nodes with each other.
  *
  * @example
  * ```js
@@ -5628,11 +5321,12 @@ function getFitViewNodes(nodeLookup, options) {
     });
     return fitViewNodes;
 }
-async function fitView({ nodes, width, height, panZoom, minZoom, maxZoom }, options) {
+async function fitViewport({ nodes, width, height, panZoom, minZoom, maxZoom }, options) {
     if (nodes.size === 0) {
-        return Promise.resolve(false);
+        return Promise.resolve(true);
     }
-    const bounds = getInternalNodesBounds(nodes);
+    const nodesToFit = getFitViewNodes(nodes, options);
+    const bounds = getInternalNodesBounds(nodesToFit);
     const viewport = getViewportForBounds(bounds, width, height, options?.minZoom ?? minZoom, options?.maxZoom ?? maxZoom, options?.padding ?? 0.1);
     await panZoom.setViewport(viewport, { duration: options?.duration });
     return Promise.resolve(true);
@@ -5844,31 +5538,126 @@ const rendererPointToPoint = ({ x, y }, [tx, ty, tScale]) => {
     };
 };
 /**
- * Returns a viewport that encloses the given bounds with optional padding.
- * @public
- * @remarks You can determine bounds of nodes with {@link getNodesBounds} and {@link getBoundsOfRects}
+ * Parses a single padding value to a number
+ * @internal
+ * @param padding - Padding to parse
+ * @param viewport - Width or height of the viewport
+ * @returns The padding in pixels
+ */
+function parsePadding(padding, viewport) {
+    if (typeof padding === 'number') {
+        return Math.floor(viewport - viewport / (1 + padding));
+    }
+    if (typeof padding === 'string' && padding.endsWith('px')) {
+        const paddingValue = parseFloat(padding);
+        if (!Number.isNaN(paddingValue)) {
+            return Math.floor(paddingValue);
+        }
+    }
+    if (typeof padding === 'string' && padding.endsWith('%')) {
+        const paddingValue = parseFloat(padding);
+        if (!Number.isNaN(paddingValue)) {
+            return Math.floor(viewport * paddingValue * 0.01);
+        }
+    }
+    console.error(`[React Flow] The padding value "${padding}" is invalid. Please provide a number or a string with a valid unit (px or %).`);
+    return 0;
+}
+/**
+ * Parses the paddings to an object with top, right, bottom, left, x and y paddings
+ * @internal
+ * @param padding - Padding to parse
+ * @param width - Width of the viewport
+ * @param height - Height of the viewport
+ * @returns An object with the paddings in pixels
+ */
+function parsePaddings(padding, width, height) {
+    if (typeof padding === 'string' || typeof padding === 'number') {
+        const paddingY = parsePadding(padding, height);
+        const paddingX = parsePadding(padding, width);
+        return {
+            top: paddingY,
+            right: paddingX,
+            bottom: paddingY,
+            left: paddingX,
+            x: paddingX * 2,
+            y: paddingY * 2,
+        };
+    }
+    if (typeof padding === 'object') {
+        const top = parsePadding(padding.top ?? padding.y ?? 0, height);
+        const bottom = parsePadding(padding.bottom ?? padding.y ?? 0, height);
+        const left = parsePadding(padding.left ?? padding.x ?? 0, width);
+        const right = parsePadding(padding.right ?? padding.x ?? 0, width);
+        return { top, right, bottom, left, x: left + right, y: top + bottom };
+    }
+    return { top: 0, right: 0, bottom: 0, left: 0, x: 0, y: 0 };
+}
+/**
+ * Calculates the resulting paddings if the new viewport is applied
+ * @internal
  * @param bounds - Bounds to fit inside viewport
+ * @param x - X position of the viewport
+ * @param y - Y position of the viewport
+ * @param zoom - Zoom level of the viewport
  * @param width - Width of the viewport
- * @param height  - Height of the viewport
- * @param minZoom - Minimum zoom level of the resulting viewport
- * @param maxZoom - Maximum zoom level of the resulting viewport
- * @param padding - Optional padding around the bounds
- * @returns A transforned {@link Viewport} that encloses the given bounds which you can pass to e.g. {@link setViewport}
+ * @param height - Height of the viewport
+ * @returns An object with the minimum padding required to fit the bounds inside the viewport
+ */
+function calculateAppliedPaddings(bounds, x, y, zoom, width, height) {
+    const { x: left, y: top } = rendererPointToPoint(bounds, [x, y, zoom]);
+    const { x: boundRight, y: boundBottom } = rendererPointToPoint({ x: bounds.x + bounds.width, y: bounds.y + bounds.height }, [x, y, zoom]);
+    const right = width - boundRight;
+    const bottom = height - boundBottom;
+    return {
+        left: Math.floor(left),
+        top: Math.floor(top),
+        right: Math.floor(right),
+        bottom: Math.floor(bottom),
+    };
+}
+/**
+ * Returns a viewport that encloses the given bounds with padding.
+ * @public
+ * @remarks You can determine bounds of nodes with {@link getNodesBounds} and {@link getBoundsOfRects}
+ * @param bounds - Bounds to fit inside viewport.
+ * @param width - Width of the viewport.
+ * @param height  - Height of the viewport.
+ * @param minZoom - Minimum zoom level of the resulting viewport.
+ * @param maxZoom - Maximum zoom level of the resulting viewport.
+ * @param padding - Padding around the bounds.
+ * @returns A transformed {@link Viewport} that encloses the given bounds which you can pass to e.g. {@link setViewport}.
  * @example
  * const { x, y, zoom } = getViewportForBounds(
- *{ x: 0, y: 0, width: 100, height: 100},
- *1200, 800, 0.5, 2);
+ * { x: 0, y: 0, width: 100, height: 100},
+ * 1200, 800, 0.5, 2);
  */
 const getViewportForBounds = (bounds, width, height, minZoom, maxZoom, padding) => {
-    const xZoom = width / (bounds.width * (1 + padding));
-    const yZoom = height / (bounds.height * (1 + padding));
+    // First we resolve all the paddings to actual pixel values
+    const p = parsePaddings(padding, width, height);
+    const xZoom = (width - p.x) / bounds.width;
+    const yZoom = (height - p.y) / bounds.height;
+    // We calculate the new x, y, zoom for a centered view
     const zoom = Math.min(xZoom, yZoom);
     const clampedZoom = clamp(zoom, minZoom, maxZoom);
     const boundsCenterX = bounds.x + bounds.width / 2;
     const boundsCenterY = bounds.y + bounds.height / 2;
     const x = width / 2 - boundsCenterX * clampedZoom;
     const y = height / 2 - boundsCenterY * clampedZoom;
-    return { x, y, zoom: clampedZoom };
+    // Then we calculate the minimum padding, to respect asymmetric paddings
+    const newPadding = calculateAppliedPaddings(bounds, x, y, clampedZoom, width, height);
+    // We only want to have an offset if the newPadding is smaller than the required padding
+    const offset = {
+        left: Math.min(newPadding.left - p.left, 0),
+        top: Math.min(newPadding.top - p.top, 0),
+        right: Math.min(newPadding.right - p.right, 0),
+        bottom: Math.min(newPadding.bottom - p.bottom, 0),
+    };
+    return {
+        x: x - offset.left + offset.right,
+        y: y - offset.top + offset.bottom,
+        zoom: clampedZoom,
+    };
 };
 const isMacOs = () => typeof navigator !== 'undefined' && navigator?.userAgent?.indexOf('Mac') >= 0;
 function isCoordinateExtent(extent) {
@@ -6009,14 +5798,15 @@ function getControlWithCurvature({ pos, x1, y1, x2, y2, c }) {
  * The `getBezierPath` util returns everything you need to render a bezier edge
  *between two nodes.
  * @public
- * @param params.sourceX - The x position of the source handle
- * @param params.sourceY - The y position of the source handle
- * @param params.sourcePosition - The position of the source handle (default: Position.Bottom)
- * @param params.targetX - The x position of the target handle
- * @param params.targetY - The y position of the target handle
- * @param params.targetPosition - The position of the target handle (default: Position.Top)
- * @param params.curvature - The curvature of the bezier edge
- * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path)
+ * and `offsetX`, `offsetY` between source handle and label.
+ * - `path`: the path to use in an SVG `<path>` element.
+ * - `labelX`: the `x` position you can use to render a label for this edge.
+ * - `labelY`: the `y` position you can use to render a label for this edge.
+ * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
+ * middle of this path.
+ * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
+ * middle of this path.
  * @example
  * ```js
  *  const source = { x: 0, y: 20 };
@@ -6113,9 +5903,9 @@ const connectionExists = (edge, edges) => {
 /**
  * This util is a convenience function to add a new Edge to an array of edges. It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.
  * @public
- * @param edgeParams - Either an Edge or a Connection you want to add
- * @param edges -  The array of all current edges
- * @returns A new array of edges with the new edge added
+ * @param edgeParams - Either an `Edge` or a `Connection` you want to add.
+ * @param edges - The array of all current edges.
+ * @returns A new array of edges with the new edge added.
  *
  * @remarks If an edge with the same `target` and `source` already exists (and the same
  *`targetHandle` and `sourceHandle` if those are set), then this util won't add
@@ -6152,11 +5942,16 @@ const addEdge = (edgeParams, edges) => {
 /**
  * Calculates the straight line path between two points.
  * @public
- * @param params.sourceX - The x position of the source handle
- * @param params.sourceY - The y position of the source handle
- * @param params.targetX - The x position of the target handle
- * @param params.targetY - The y position of the target handle
- * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path)
+ * and `offsetX`, `offsetY` between source handle and label.
+ *
+ * - `path`: the path to use in an SVG `<path>` element.
+ * - `labelX`: the `x` position you can use to render a label for this edge.
+ * - `labelY`: the `y` position you can use to render a label for this edge.
+ * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
+ * middle of this path.
+ * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
+ * middle of this path.
  * @example
  * ```js
  *  const source = { x: 0, y: 20 };
@@ -6197,8 +5992,8 @@ const getDirection = ({ source, sourcePosition = Position.Bottom, target, }) =>
 };
 const distance = (a, b) => Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
 /*
- * ith this function we try to mimic a orthogonal edge routing behaviour
- * It's not as good as a real orthogonal edge routing but it's faster and good enough as a default for step and smooth step edges
+ * With this function we try to mimic an orthogonal edge routing behaviour
+ * It's not as good as a real orthogonal edge routing, but it's faster and good enough as a default for step and smooth step edges
  */
 function getPoints({ source, sourcePosition = Position.Bottom, target, targetPosition = Position.Top, center, offset, }) {
     const sourceDir = handleDirections[sourcePosition];
@@ -6329,16 +6124,19 @@ function getBend(a, b, c, size) {
 }
 /**
  * The `getSmoothStepPath` util returns everything you need to render a stepped path
- *between two nodes. The `borderRadius` property can be used to choose how rounded
- *the corners of those steps are.
+ * between two nodes. The `borderRadius` property can be used to choose how rounded
+ * the corners of those steps are.
  * @public
- * @param params.sourceX - The x position of the source handle
- * @param params.sourceY - The y position of the source handle
- * @param params.sourcePosition - The position of the source handle (default: Position.Bottom)
- * @param params.targetX - The x position of the target handle
- * @param params.targetY - The y position of the target handle
- * @param params.targetPosition - The position of the target handle (default: Position.Top)
- * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ * @returns A path string you can use in an SVG, the `labelX` and `labelY` position (center of path)
+ * and `offsetX`, `offsetY` between source handle and label.
+ *
+ * - `path`: the path to use in an SVG `<path>` element.
+ * - `labelX`: the `x` position you can use to render a label for this edge.
+ * - `labelY`: the `y` position you can use to render a label for this edge.
+ * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
+ * middle of this path.
+ * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
+ * middle of this path.
  * @example
  * ```js
  *  const source = { x: 0, y: 20 };
@@ -6532,6 +6330,7 @@ function updateAbsolutePositions(nodeLookup, parentLookup, options) {
 }
 function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
     const _options = mergeObjects(adoptUserNodesDefaultOptions, options);
+    let nodesInitialized = true;
     const tmpLookup = new Map(nodeLookup);
     const selectedNodeZ = _options?.elevateNodesOnSelect ? 1000 : 0;
     nodeLookup.clear();
@@ -6562,10 +6361,15 @@ function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
             };
             nodeLookup.set(userNode.id, internalNode);
         }
+        if ((!internalNode.measured || !internalNode.measured.width || !internalNode.measured.height) &&
+            !internalNode.hidden) {
+            nodesInitialized = false;
+        }
         if (userNode.parentId) {
             updateChildNode(internalNode, nodeLookup, parentLookup, options);
         }
     }
+    return nodesInitialized;
 }
 function updateParentLookup(node, parentLookup) {
     if (!node.parentId) {
@@ -7582,9 +7386,15 @@ function createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection
 }
 function createZoomOnScrollHandler({ noWheelClassName, preventScrolling, d3ZoomHandler }) {
     return function (event, d) {
+        const isWheel = event.type === 'wheel';
         // we still want to enable pinch zooming even if preventScrolling is set to false
-        const preventZoom = !preventScrolling && event.type === 'wheel' && !event.ctrlKey;
-        if (preventZoom || isWrappedWithClass(event, noWheelClassName)) {
+        const preventZoom = !preventScrolling && isWheel && !event.ctrlKey;
+        const hasNoWheelClass = isWrappedWithClass(event, noWheelClassName);
+        // if user is pinch zooming above a nowheel element, we don't want the browser to zoom
+        if (event.ctrlKey && isWheel && hasNoWheelClass) {
+            event.preventDefault();
+        }
+        if (preventZoom || hasNoWheelClass) {
             return null;
         }
         event.preventDefault();
@@ -8295,7 +8105,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
         })
             .on('end', (event) => {
             onResizeEnd?.(event, { ...prevValues });
-            onEnd?.();
+            onEnd?.({ ...prevValues });
         });
         selection.call(dragHandler);
     }
@@ -8312,6 +8122,201 @@ var withSelector = {exports: {}};
 
 var withSelector_production = {};
 
+var shim = {exports: {}};
+
+var useSyncExternalStoreShim_production = {};
+
+/**
+ * @license React
+ * use-sync-external-store-shim.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredUseSyncExternalStoreShim_production;
+
+function requireUseSyncExternalStoreShim_production () {
+	if (hasRequiredUseSyncExternalStoreShim_production) return useSyncExternalStoreShim_production;
+	hasRequiredUseSyncExternalStoreShim_production = 1;
+	var React$1 = React;
+	function is(x, y) {
+	  return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
+	}
+	var objectIs = "function" === typeof Object.is ? Object.is : is,
+	  useState = React$1.useState,
+	  useEffect = React$1.useEffect,
+	  useLayoutEffect = React$1.useLayoutEffect,
+	  useDebugValue = React$1.useDebugValue;
+	function useSyncExternalStore$2(subscribe, getSnapshot) {
+	  var value = getSnapshot(),
+	    _useState = useState({ inst: { value: value, getSnapshot: getSnapshot } }),
+	    inst = _useState[0].inst,
+	    forceUpdate = _useState[1];
+	  useLayoutEffect(
+	    function () {
+	      inst.value = value;
+	      inst.getSnapshot = getSnapshot;
+	      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	    },
+	    [subscribe, value, getSnapshot]
+	  );
+	  useEffect(
+	    function () {
+	      checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	      return subscribe(function () {
+	        checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	      });
+	    },
+	    [subscribe]
+	  );
+	  useDebugValue(value);
+	  return value;
+	}
+	function checkIfSnapshotChanged(inst) {
+	  var latestGetSnapshot = inst.getSnapshot;
+	  inst = inst.value;
+	  try {
+	    var nextValue = latestGetSnapshot();
+	    return !objectIs(inst, nextValue);
+	  } catch (error) {
+	    return true;
+	  }
+	}
+	function useSyncExternalStore$1(subscribe, getSnapshot) {
+	  return getSnapshot();
+	}
+	var shim =
+	  "undefined" === typeof window ||
+	  "undefined" === typeof window.document ||
+	  "undefined" === typeof window.document.createElement
+	    ? useSyncExternalStore$1
+	    : useSyncExternalStore$2;
+	useSyncExternalStoreShim_production.useSyncExternalStore =
+	  void 0 !== React$1.useSyncExternalStore ? React$1.useSyncExternalStore : shim;
+	return useSyncExternalStoreShim_production;
+}
+
+var useSyncExternalStoreShim_development = {};
+
+/**
+ * @license React
+ * use-sync-external-store-shim.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredUseSyncExternalStoreShim_development;
+
+function requireUseSyncExternalStoreShim_development () {
+	if (hasRequiredUseSyncExternalStoreShim_development) return useSyncExternalStoreShim_development;
+	hasRequiredUseSyncExternalStoreShim_development = 1;
+	"production" !== process.env.NODE_ENV &&
+	  (function () {
+	    function is(x, y) {
+	      return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
+	    }
+	    function useSyncExternalStore$2(subscribe, getSnapshot) {
+	      didWarnOld18Alpha ||
+	        void 0 === React$1.startTransition ||
+	        ((didWarnOld18Alpha = true),
+	        console.error(
+	          "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
+	        ));
+	      var value = getSnapshot();
+	      if (!didWarnUncachedGetSnapshot) {
+	        var cachedValue = getSnapshot();
+	        objectIs(value, cachedValue) ||
+	          (console.error(
+	            "The result of getSnapshot should be cached to avoid an infinite loop"
+	          ),
+	          (didWarnUncachedGetSnapshot = true));
+	      }
+	      cachedValue = useState({
+	        inst: { value: value, getSnapshot: getSnapshot }
+	      });
+	      var inst = cachedValue[0].inst,
+	        forceUpdate = cachedValue[1];
+	      useLayoutEffect(
+	        function () {
+	          inst.value = value;
+	          inst.getSnapshot = getSnapshot;
+	          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	        },
+	        [subscribe, value, getSnapshot]
+	      );
+	      useEffect(
+	        function () {
+	          checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	          return subscribe(function () {
+	            checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
+	          });
+	        },
+	        [subscribe]
+	      );
+	      useDebugValue(value);
+	      return value;
+	    }
+	    function checkIfSnapshotChanged(inst) {
+	      var latestGetSnapshot = inst.getSnapshot;
+	      inst = inst.value;
+	      try {
+	        var nextValue = latestGetSnapshot();
+	        return !objectIs(inst, nextValue);
+	      } catch (error) {
+	        return true;
+	      }
+	    }
+	    function useSyncExternalStore$1(subscribe, getSnapshot) {
+	      return getSnapshot();
+	    }
+	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
+	      "function" ===
+	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
+	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+	    var React$1 = React,
+	      objectIs = "function" === typeof Object.is ? Object.is : is,
+	      useState = React$1.useState,
+	      useEffect = React$1.useEffect,
+	      useLayoutEffect = React$1.useLayoutEffect,
+	      useDebugValue = React$1.useDebugValue,
+	      didWarnOld18Alpha = false,
+	      didWarnUncachedGetSnapshot = false,
+	      shim =
+	        "undefined" === typeof window ||
+	        "undefined" === typeof window.document ||
+	        "undefined" === typeof window.document.createElement
+	          ? useSyncExternalStore$1
+	          : useSyncExternalStore$2;
+	    useSyncExternalStoreShim_development.useSyncExternalStore =
+	      void 0 !== React$1.useSyncExternalStore ? React$1.useSyncExternalStore : shim;
+	    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
+	      "function" ===
+	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
+	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+	  })();
+	return useSyncExternalStoreShim_development;
+}
+
+var hasRequiredShim;
+
+function requireShim () {
+	if (hasRequiredShim) return shim.exports;
+	hasRequiredShim = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  shim.exports = requireUseSyncExternalStoreShim_production();
+	} else {
+	  shim.exports = requireUseSyncExternalStoreShim_development();
+	}
+	return shim.exports;
+}
+
 /**
  * @license React
  * use-sync-external-store-shim/with-selector.production.js
@@ -8328,7 +8333,7 @@ function requireWithSelector_production () {
 	if (hasRequiredWithSelector_production) return withSelector_production;
 	hasRequiredWithSelector_production = 1;
 	var React$1 = React,
-	  shim = require$$1;
+	  shim = requireShim();
 	function is(x, y) {
 	  return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
 	}
@@ -8431,7 +8436,7 @@ function requireWithSelector_development () {
 	        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
 	      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
 	    var React$1 = React,
-	      shim = require$$1,
+	      shim = requireShim(),
 	      objectIs = "function" === typeof Object.is ? Object.is : is,
 	      useSyncExternalStore = shim.useSyncExternalStore,
 	      useRef = React$1.useRef,
@@ -8627,9 +8632,13 @@ const zustandErrorMessage = errorMessages['error001']();
  * state management library, so you should check out their docs for more details.
  *
  * @public
- * @param selector
- * @param equalityFn
- * @returns The selected state slice
+ * @param selector - A selector function that returns a slice of the flow's internal state.
+ * Extracting or transforming just the state you need is a good practice to avoid unnecessary
+ * re-renders.
+ * @param equalityFn - A function to compare the previous and next value. This is incredibly useful
+ * for preventing unnecessary re-renders. Good sensible defaults are using `Object.is` or importing
+ * `zustand/shallow`, but you can be as granular as you like.
+ * @returns The selected state slice.
  *
  * @example
  * ```ts
@@ -8650,8 +8659,7 @@ function useStore(selector, equalityFn) {
 /**
  * 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.
  *
- * @returns The store object
- *
+ * @returns The store object.
  * @example
  * ```ts
  * const store = useStoreApi();
@@ -8784,7 +8792,7 @@ const defaultViewport = { x: 0, y: 0, zoom: 1 };
  * We distinguish between values we can update directly with `useDirectStoreUpdater` (like `snapGrid`)
  * and values that have a dedicated setter function in the store (like `setNodes`).
  */
-// these fields exist in the global store and we need to keep them up to date
+// These fields exist in the global store, and we need to keep them up to date
 const reactFlowFieldsToTrack = [
     'nodes',
     'edges',
@@ -8907,9 +8915,9 @@ function StoreUpdater(props) {
                 setPaneClickDistance(fieldValue);
             // Renamed fields
             else if (fieldName === 'fitView')
-                store.setState({ fitViewOnInit: fieldValue });
+                store.setState({ fitViewQueued: fieldValue });
             else if (fieldName === 'fitViewOptions')
-                store.setState({ fitViewOnInitOptions: fieldValue });
+                store.setState({ fitViewOptions: fieldValue });
             // General case
             else
                 store.setState({ [fieldName]: fieldValue });
@@ -8957,9 +8965,7 @@ const defaultDoc = typeof document !== 'undefined' ? document : null;
  * currently pressed or not.
  *
  * @public
- * @param param.keyCode - The key code (string or array of strings) to use
- * @param param.options - Options
- * @returns boolean
+ * @param options - Options
  *
  * @example
  * ```tsx
@@ -8979,11 +8985,17 @@ const defaultDoc = typeof document !== 'undefined' ? document : null;
  *```
  */
 function useKeyPress(
-/*
- * the keycode can be a string 'a' or an array of strings ['a', 'a+d']
- * a string means a single key 'a' or a combination when '+' is used 'a+d'
- * an array means different possibilites. Explainer: ['a', 'd+s'] here the
- * user can use the single key 'a' or the combination 'd' + 's'
+/**
+ * The key code (string or array of strings) specifies which key(s) should trigger
+ * an action.
+ *
+ * A **string** can represent:
+ * - A **single key**, e.g. `'a'`
+ * - A **key combination**, using `'+'` to separate keys, e.g. `'a+d'`
+ *
+ * An  **array of strings** represents **multiple possible key inputs**. For example, `['a', 'd+s']`
+ * means the user can press either the single key `'a'` or the combination of `'d'` and `'s'`.
+ * @default null
  */
 keyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: true }) {
     const [keyPressed, setKeyPressed] = useState(false);
@@ -9019,7 +9031,7 @@ keyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: true
         const target = options?.target || defaultDoc;
         if (keyCode !== null) {
             const downHandler = (event) => {
-                modifierPressed.current = event.ctrlKey || event.metaKey || event.shiftKey;
+                modifierPressed.current = event.ctrlKey || event.metaKey || event.shiftKey || event.altKey;
                 const preventAction = (!modifierPressed.current || (modifierPressed.current && !options.actInsideInputWithModifier)) &&
                     isInputDOMNode(event);
                 if (preventAction) {
@@ -9028,16 +9040,15 @@ keyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: true
                 const keyOrCode = useKeyOrCode(event.code, keysToWatch);
                 pressedKeys.current.add(event[keyOrCode]);
                 if (isMatchingKey(keyCodes, pressedKeys.current, false)) {
-                    event.preventDefault();
+                    const target = (event.composedPath?.()?.[0] || event.target);
+                    const isInteractiveElement = target?.nodeName === 'BUTTON' || target?.nodeName === 'A';
+                    if (options.preventDefault !== false && (modifierPressed.current || !isInteractiveElement)) {
+                        event.preventDefault();
+                    }
                     setKeyPressed(true);
                 }
             };
             const upHandler = (event) => {
-                const preventAction = (!modifierPressed.current || (modifierPressed.current && !options.actInsideInputWithModifier)) &&
-                    isInputDOMNode(event);
-                if (preventAction) {
-                    return false;
-                }
                 const keyOrCode = useKeyOrCode(event.code, keysToWatch);
                 if (isMatchingKey(keyCodes, pressedKeys.current, true)) {
                     setKeyPressed(false);
@@ -9128,22 +9139,6 @@ const useViewportHelper = () => {
                 const [x, y, zoom] = store.getState().transform;
                 return { x, y, zoom };
             },
-            fitView: (options) => {
-                const { nodeLookup, minZoom, maxZoom, panZoom, domNode } = store.getState();
-                if (!panZoom || !domNode) {
-                    return Promise.resolve(false);
-                }
-                const fitViewNodes = getFitViewNodes(nodeLookup, options);
-                const { width, height } = getDimensions(domNode);
-                return fitView({
-                    nodes: fitViewNodes,
-                    width,
-                    height,
-                    minZoom,
-                    maxZoom,
-                    panZoom,
-                }, options);
-            },
             setCenter: async (x, y, options) => {
                 const { width, height, maxZoom, panZoom } = store.getState();
                 const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom;
@@ -9318,9 +9313,9 @@ function applyChange(change, element) {
 /**
  * Drop in function that applies node changes to an array of nodes.
  * @public
- * @param changes - Array of changes to apply
- * @param nodes - Array of nodes to apply the changes to
- * @returns Array of updated nodes
+ * @param changes - Array of changes to apply.
+ * @param nodes - Array of nodes to apply the changes to.
+ * @returns Array of updated nodes.
  * @example
  *```tsx
  *import { useState, useCallback } from 'react';
@@ -9352,9 +9347,9 @@ function applyNodeChanges(changes, nodes) {
 /**
  * Drop in function that applies edge changes to an array of edges.
  * @public
- * @param changes - Array of changes to apply
- * @param edges - Array of edge to apply the changes to
- * @returns Array of updated edges
+ * @param changes - Array of changes to apply.
+ * @param edges - Array of edge to apply the changes to.
+ * @returns Array of updated edges.
  * @example
  * ```tsx
  *import { useState, useCallback } from 'react';
@@ -9438,41 +9433,45 @@ function elementToRemoveChange(item) {
 }
 
 /**
- * Test whether an object is useable as an [`Node`](/api-reference/types/node).
+ * Test whether an object is usable as an [`Node`](/api-reference/types/node).
  * In TypeScript this is a type guard that will narrow the type of whatever you pass in to
  * [`Node`](/api-reference/types/node) if it returns `true`.
  *
  * @public
  * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true
- * @param element - The element to test
- * @returns A boolean indicating whether the element is an Node
+ * @param element - The element to test.
+ * @returns Tests whether the provided value can be used as a `Node`. If you're using TypeScript,
+ * this function acts as a type guard and will narrow the type of the value to `Node` if it returns
+ * `true`.
  *
  * @example
  * ```js
  *import { isNode } from '@xyflow/react';
  *
  *if (isNode(node)) {
- * // ..
+ * // ...
  *}
  *```
  */
 const isNode = (element) => isNodeBase(element);
 /**
- * Test whether an object is useable as an [`Edge`](/api-reference/types/edge).
+ * Test whether an object is usable as an [`Edge`](/api-reference/types/edge).
  * In TypeScript this is a type guard that will narrow the type of whatever you pass in to
  * [`Edge`](/api-reference/types/edge) if it returns `true`.
  *
  * @public
  * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true
  * @param element - The element to test
- * @returns A boolean indicating whether the element is an Edge
+ * @returns Tests whether the provided value can be used as an `Edge`. If you're using TypeScript,
+ * this function acts as a type guard and will narrow the type of the value to `Edge` if it returns
+ * `true`.
  *
  * @example
  * ```js
  *import { isEdge } from '@xyflow/react';
  *
  *if (isEdge(edge)) {
- * // ..
+ * // ...
  *}
  *```
  */
@@ -9547,7 +9546,7 @@ const BatchContext = createContext(null);
 function BatchProvider({ children, }) {
     const store = useStoreApi();
     const nodeQueueHandler = useCallback((queueItems) => {
-        const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup } = store.getState();
+        const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup, fitViewQueued } = store.getState();
         /*
          * This is essentially an `Array.reduce` in imperative clothing. Processing
          * this queue is a relatively hot path so we'd like to avoid the overhead of
@@ -9560,11 +9559,26 @@ function BatchProvider({ children, }) {
         if (hasDefaultNodes) {
             setNodes(next);
         }
-        else if (onNodesChange) {
-            onNodesChange(getElementsDiffChanges({
+        else {
+            // When a controlled flow is used we need to collect the changes
+            const changes = getElementsDiffChanges({
                 items: next,
                 lookup: nodeLookup,
-            }));
+            });
+            // We only want to fire onNodesChange if there are changes to the nodes
+            if (changes.length > 0) {
+                onNodesChange?.(changes);
+            }
+            else if (fitViewQueued) {
+                // If there are no changes to the nodes, we still need to call setNodes
+                // to trigger a re-render and fitView.
+                window.requestAnimationFrame(() => {
+                    const { fitViewQueued, nodes, setNodes } = store.getState();
+                    if (fitViewQueued) {
+                        setNodes(nodes);
+                    }
+                });
+            }
         }
     }, []);
     const nodeQueue = useQueue(nodeQueueHandler);
@@ -9601,8 +9615,6 @@ const selector$k = (s) => !!s.panZoom;
  * 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.
  *
  * @public
- * @returns ReactFlowInstance
- *
  * @example
  * ```jsx
  *import { useCallback, useState } from 'react';
@@ -9783,6 +9795,15 @@ function useReactFlow() {
                 .getState()
                 .connectionLookup.get(`${nodeId}${type ? (handleId ? `-${type}-${handleId}` : `-${type}`) : ''}`)
                 ?.values() ?? []),
+            fitView: async (options) => {
+                // We either create a new Promise or reuse the existing one
+                // Even if fitView is called multiple times in a row, we only end up with a single Promise
+                const fitViewResolver = store.getState().fitViewResolver ?? Promise.withResolvers();
+                // We schedule a fitView by setting fitViewQueued and triggering a setNodes
+                store.setState({ fitViewQueued: true, fitViewOptions: options, fitViewResolver });
+                batchContext.nodeQueue.push((nodes) => [...nodes]);
+                return fitViewResolver.promise;
+            },
         };
     }, []);
     return useMemo(() => {
@@ -9980,11 +10001,12 @@ const wrapHandler = (handler, containerRef) => {
 const selector$h = (s) => ({
     userSelectionActive: s.userSelectionActive,
     elementsSelectable: s.elementsSelectable,
+    connectionInProgress: s.connection.inProgress,
     dragging: s.paneDragging,
 });
 function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children, }) {
     const store = useStoreApi();
-    const { userSelectionActive, elementsSelectable, dragging } = useStore(selector$h, shallow$1);
+    const { userSelectionActive, elementsSelectable, dragging, connectionInProgress } = useStore(selector$h, shallow$1);
     const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
     const container = useRef(null);
     const containerBounds = useRef();
@@ -9995,7 +10017,8 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
     const selectionStarted = useRef(false);
     const onClick = (event) => {
         // We prevent click events when the user let go of the selectionKey during a selection
-        if (selectionInProgress.current) {
+        // We also prevent click events when a connection is in progress
+        if (selectionInProgress.current || connectionInProgress) {
             selectionInProgress.current = false;
             return;
         }
@@ -10246,7 +10269,7 @@ NodeIdContext.Consumer;
  * drill down the id as a prop.
  *
  * @public
- * @returns id of the node
+ * @returns The id for a node in the flow.
  *
  * @example
  *```jsx
@@ -10919,7 +10942,7 @@ const MarkerDefinitions = ({ defaultColor, rfId }) => {
 MarkerDefinitions.displayName = 'MarkerDefinitions';
 var MarkerDefinitions$1 = memo(MarkerDefinitions);
 
-function EdgeTextComponent({ x, y, label, labelStyle = {}, labelShowBg = true, labelBgStyle = {}, labelBgPadding = [2, 4], labelBgBorderRadius = 2, children, className, ...rest }) {
+function EdgeTextComponent({ x, y, label, labelStyle, labelShowBg = true, labelBgStyle, labelBgPadding = [2, 4], labelBgBorderRadius = 2, children, className, ...rest }) {
     const [edgeTextBbox, setEdgeTextBbox] = useState({ x: 1, y: 0, width: 0, height: 0 });
     const edgeTextClasses = cc(['react-flow__edge-textwrapper', className]);
     const edgeTextRef = useRef(null);
@@ -10934,7 +10957,7 @@ function EdgeTextComponent({ x, y, label, labelStyle = {}, labelShowBg = true, l
             });
         }
     }, [label]);
-    if (typeof label === 'undefined' || !label) {
+    if (!label) {
         return null;
     }
     return (jsxRuntimeExports.jsxs("g", { transform: `translate(${x - edgeTextBbox.width / 2} ${y - edgeTextBbox.height / 2})`, className: edgeTextClasses, visibility: edgeTextBbox.width ? 'visible' : 'hidden', ...rest, children: [labelShowBg && (jsxRuntimeExports.jsx("rect", { width: edgeTextBbox.width + 2 * labelBgPadding[0], x: -labelBgPadding[0], y: -labelBgPadding[1], height: edgeTextBbox.height + 2 * labelBgPadding[1], className: "react-flow__edge-textbg", style: labelBgStyle, rx: labelBgBorderRadius, ry: labelBgBorderRadius })), jsxRuntimeExports.jsx("text", { className: "react-flow__edge-text", y: edgeTextBbox.height / 2, dy: "0.3em", ref: edgeTextRef, style: labelStyle, children: label }), children] }));
@@ -10944,26 +10967,26 @@ EdgeTextComponent.displayName = 'EdgeText';
  * You can use the `<EdgeText />` component as a helper component to display text
  * within your custom edges.
  *
- *@public
+ * @public
  *
- *@example
- *```jsx
- *import { EdgeText } from '@xyflow/react';
+ * @example
+ * ```jsx
+ * import { EdgeText } from '@xyflow/react';
  *
- *export function CustomEdgeLabel({ label }) {
- *  return (
- *    <EdgeText
- *      x={100}
- *      y={100}
- *      label={label}
- *      labelStyle={{ fill: 'white' }}
- *      labelShowBg
- *      labelBgStyle={{ fill: 'red' }}
- *      labelBgPadding={[2, 4]}
- *      labelBgBorderRadius={2}
- *    />
- *  );
- *}
+ * export function CustomEdgeLabel({ label }) {
+ *   return (
+ *     <EdgeText
+ *       x={100}
+ *       y={100}
+ *       label={label}
+ *       labelStyle={{ fill: 'white' }}
+ *       labelShowBg
+ *       labelBgStyle={{ fill: 'red' }}
+ *       labelBgPadding={[2, 4]}
+ *       labelBgBorderRadius={2}
+ *     />
+ *   );
+ * }
  *```
  */
 const EdgeText = memo(EdgeTextComponent);
@@ -11009,6 +11032,14 @@ function getControl({ pos, x1, y1, x2, y2 }) {
  * The `getSimpleBezierPath` util returns everything you need to render a simple
  * bezier edge between two nodes.
  * @public
+ * @returns
+ * - `path`: the path to use in an SVG `<path>` element.
+ * - `labelX`: the `x` position you can use to render a label for this edge.
+ * - `labelY`: the `y` position you can use to render a label for this edge.
+ * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
+ * middle of this path.
+ * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
+ * middle of this path.
  */
 function getSimpleBezierPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, }) {
     const [sourceControlX, sourceControlY] = getControl({
@@ -11045,7 +11076,7 @@ function getSimpleBezierPath({ sourceX, sourceY, sourcePosition = Position.Botto
 }
 function createSimpleBezierEdge(params) {
     // eslint-disable-next-line react/display-name
-    return memo(({ id, sourceX, sourceY, targetX, targetY, sourcePosition = Position.Bottom, targetPosition = Position.Top, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, interactionWidth, }) => {
+    return memo(({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, interactionWidth, }) => {
         const [path, labelX, labelY] = getSimpleBezierPath({
             sourceX,
             sourceY,
@@ -11080,7 +11111,33 @@ function createSmoothStepEdge(params) {
         return (jsxRuntimeExports.jsx(BaseEdge, { id: _id, path: path, labelX: labelX, labelY: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius, style: style, markerEnd: markerEnd, markerStart: markerStart, interactionWidth: interactionWidth }));
     });
 }
+/**
+ * Component that can be used inside a custom edge to render a smooth step edge.
+ *
+ * @public
+ * @example
+ *
+ * ```tsx
+ * import { SmoothStepEdge } from '@xyflow/react';
+ *
+ * function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
+ *   return (
+ *     <SmoothStepEdge
+ *       sourceX={sourceX}
+ *       sourceY={sourceY}
+ *       targetX={targetX}
+ *       targetY={targetY}
+ *       sourcePosition={sourcePosition}
+ *       targetPosition={targetPosition}
+ *     />
+ *   );
+ * }
+ * ```
+ */
 const SmoothStepEdge = createSmoothStepEdge({ isInternal: false });
+/**
+ * @internal
+ */
 const SmoothStepEdgeInternal = createSmoothStepEdge({ isInternal: true });
 SmoothStepEdge.displayName = 'SmoothStepEdge';
 SmoothStepEdgeInternal.displayName = 'SmoothStepEdgeInternal';
@@ -11092,7 +11149,33 @@ function createStepEdge(params) {
         return (jsxRuntimeExports.jsx(SmoothStepEdge, { ...props, id: _id, pathOptions: useMemo(() => ({ borderRadius: 0, offset: props.pathOptions?.offset }), [props.pathOptions?.offset]) }));
     });
 }
+/**
+ * Component that can be used inside a custom edge to render a step edge.
+ *
+ * @public
+ * @example
+ *
+ * ```tsx
+ * import { StepEdge } from '@xyflow/react';
+ *
+ * function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
+ *   return (
+ *     <StepEdge
+ *       sourceX={sourceX}
+ *       sourceY={sourceY}
+ *       targetX={targetX}
+ *       targetY={targetY}
+ *       sourcePosition={sourcePosition}
+ *       targetPosition={targetPosition}
+ *     />
+ *   );
+ * }
+ * ```
+ */
 const StepEdge = createStepEdge({ isInternal: false });
+/**
+ * @internal
+ */
 const StepEdgeInternal = createStepEdge({ isInternal: true });
 StepEdge.displayName = 'StepEdge';
 StepEdgeInternal.displayName = 'StepEdgeInternal';
@@ -11105,7 +11188,31 @@ function createStraightEdge(params) {
         return (jsxRuntimeExports.jsx(BaseEdge, { id: _id, path: path, labelX: labelX, labelY: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius, style: style, markerEnd: markerEnd, markerStart: markerStart, interactionWidth: interactionWidth }));
     });
 }
+/**
+ * Component that can be used inside a custom edge to render a straight line.
+ *
+ * @public
+ * @example
+ *
+ * ```tsx
+ * import { StraightEdge } from '@xyflow/react';
+ *
+ * function CustomEdge({ sourceX, sourceY, targetX, targetY }) {
+ *   return (
+ *     <StraightEdge
+ *       sourceX={sourceX}
+ *       sourceY={sourceY}
+ *       targetX={targetX}
+ *       targetY={targetY}
+ *     />
+ *   );
+ * }
+ * ```
+ */
 const StraightEdge = createStraightEdge({ isInternal: false });
+/**
+ * @internal
+ */
 const StraightEdgeInternal = createStraightEdge({ isInternal: true });
 StraightEdge.displayName = 'StraightEdge';
 StraightEdgeInternal.displayName = 'StraightEdgeInternal';
@@ -11126,7 +11233,33 @@ function createBezierEdge(params) {
         return (jsxRuntimeExports.jsx(BaseEdge, { id: _id, path: path, labelX: labelX, labelY: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius, style: style, markerEnd: markerEnd, markerStart: markerStart, interactionWidth: interactionWidth }));
     });
 }
+/**
+ * Component that can be used inside a custom edge to render a bezier curve.
+ *
+ * @public
+ * @example
+ *
+ * ```tsx
+ * import { BezierEdge } from '@xyflow/react';
+ *
+ * function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
+ *   return (
+ *     <BezierEdge
+ *       sourceX={sourceX}
+ *       sourceY={sourceY}
+ *       targetX={targetX}
+ *       targetY={targetY}
+ *       sourcePosition={sourcePosition}
+ *       targetPosition={targetPosition}
+ *     />
+ *   );
+ * }
+ * ```
+ */
 const BezierEdge = createBezierEdge({ isInternal: false });
+/**
+ * @internal
+ */
 const BezierEdgeInternal = createBezierEdge({ isInternal: true });
 BezierEdge.displayName = 'BezierEdge';
 BezierEdgeInternal.displayName = 'BezierEdgeInternal';
@@ -11162,6 +11295,9 @@ const shiftY = (y, shift, position) => {
     return y;
 };
 const EdgeUpdaterClassName = 'react-flow__edgeupdater';
+/**
+ * @internal
+ */
 function EdgeAnchor({ position, centerX, centerY, radius = 10, onMouseDown, onMouseEnter, onMouseOut, type, }) {
     return (jsxRuntimeExports.jsx("circle", { onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseOut: onMouseOut, className: cc([EdgeUpdaterClassName, `${EdgeUpdaterClassName}-${type}`]), cx: shiftX(centerX, radius, position), cy: shiftY(centerY, radius, position), r: radius, stroke: "transparent", fill: "transparent" }));
 }
@@ -11409,6 +11545,10 @@ function getSelector(connectionSelector) {
  * based on a certain condition (e.g. if the connection is valid or not).
  *
  * @public
+ * @param connectionSelector - An optional selector function used to extract a slice of the
+ * `ConnectionState` data. Using a selector can prevent component re-renders where data you don't
+ * otherwise care about might change. If a selector is not provided, the entire `ConnectionState`
+ * object is returned unchanged.
  * @example
  *
  * ```tsx
@@ -11595,11 +11735,11 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
         elementsSelectable: true,
         elevateNodesOnSelect: true,
         elevateEdgesOnSelect: false,
-        fitViewOnInit: false,
-        fitViewDone: false,
-        fitViewOnInitOptions: undefined,
         selectNodesOnDrag: true,
         multiSelectionActive: false,
+        fitViewQueued: fitView ?? false,
+        fitViewOptions: undefined,
+        fitViewResolver: null,
         connection: { ...initialConnection },
         connectionClickStartHandle: null,
         connectOnClick: true,
@@ -11616,277 +11756,256 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
     };
 };
 
-const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView: fitView$1, nodeOrigin, nodeExtent, }) => createWithEqualityFn((set, get) => ({
-    ...getInitialState({ nodes, edges, width, height, fitView: fitView$1, nodeOrigin, nodeExtent, defaultNodes, defaultEdges }),
-    setNodes: (nodes) => {
-        const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect } = get();
-        /*
-         * setNodes() is called exclusively in response to user actions:
-         * - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
-         * - or when the user calls something like `reactFlowInstance.setNodes()` in an uncontrolled ReactFlow setup.
-         *
-         * When this happens, we take the note objects passed by the user and extend them with fields
-         * relevant for internal React Flow operations.
-         */
-        adoptUserNodes(nodes, nodeLookup, parentLookup, {
-            nodeOrigin,
-            nodeExtent,
-            elevateNodesOnSelect,
-            checkEquality: true,
-        });
-        set({ nodes });
-    },
-    setEdges: (edges) => {
-        const { connectionLookup, edgeLookup } = get();
-        updateConnectionLookup(connectionLookup, edgeLookup, edges);
-        set({ edges });
-    },
-    setDefaultNodesAndEdges: (nodes, edges) => {
-        if (nodes) {
-            const { setNodes } = get();
-            setNodes(nodes);
-            set({ hasDefaultNodes: true });
-        }
-        if (edges) {
-            const { setEdges } = get();
-            setEdges(edges);
-            set({ hasDefaultEdges: true });
-        }
-    },
-    /*
-     * Every node gets registerd at a ResizeObserver. Whenever a node
-     * changes its dimensions, this function is called to measure the
-     * new dimensions and update the nodes.
-     */
-    updateNodeInternals: (updates, params = { triggerFitView: true }) => {
-        const { triggerNodeChanges, nodeLookup, parentLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin, nodeExtent, debug, fitViewSync, } = get();
-        const { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent);
-        if (!updatedInternals) {
+const createStore = ({ nodes, edges, defaultNodes, defaultEdges, width, height, fitView, nodeOrigin, nodeExtent, }) => createWithEqualityFn((set, get) => {
+    async function resolveFitView() {
+        const { nodeLookup, panZoom, fitViewOptions, fitViewResolver, width, height, minZoom, maxZoom } = get();
+        if (!panZoom) {
             return;
         }
-        updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin, nodeExtent });
-        if (params.triggerFitView) {
-            // we call fitView once initially after all dimensions are set
-            let nextFitViewDone = fitViewDone;
-            if (!fitViewDone && fitViewOnInit) {
-                nextFitViewDone = fitViewSync({
-                    ...fitViewOnInitOptions,
-                    nodes: fitViewOnInitOptions?.nodes,
-                });
-            }
+        await fitViewport({
+            nodes: nodeLookup,
+            width,
+            height,
+            panZoom,
+            minZoom,
+            maxZoom,
+        }, fitViewOptions);
+        fitViewResolver?.resolve(true);
+        /**
+         * wait for the fitViewport to resolve before deleting the resolver,
+         * we want to reuse the old resolver if the user calls fitView again in the mean time
+         */
+        set({ fitViewResolver: null });
+    }
+    return {
+        ...getInitialState({ nodes, edges, width, height, fitView, nodeOrigin, nodeExtent, defaultNodes, defaultEdges }),
+        setNodes: (nodes) => {
+            const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued } = get();
             /*
-             * here we are cirmumventing the onNodesChange handler
-             * in order to be able to display nodes even if the user
-             * has not provided an onNodesChange handler.
-             * Nodes are only rendered if they have a width and height
-             * attribute which they get from this handler.
+             * setNodes() is called exclusively in response to user actions:
+             * - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
+             * - or when the user calls something like `reactFlowInstance.setNodes()` in an uncontrolled ReactFlow setup.
+             *
+             * When this happens, we take the note objects passed by the user and extend them with fields
+             * relevant for internal React Flow operations.
              */
-            set({ fitViewDone: nextFitViewDone });
-        }
-        else {
-            // we always want to trigger useStore calls whenever updateNodeInternals is called
-            set({});
-        }
-        if (changes?.length > 0) {
-            if (debug) {
-                console.log('React Flow: trigger node changes', changes);
+            const nodesInitialized = adoptUserNodes(nodes, nodeLookup, parentLookup, {
+                nodeOrigin,
+                nodeExtent,
+                elevateNodesOnSelect,
+                checkEquality: true,
+            });
+            if (fitViewQueued && nodesInitialized) {
+                resolveFitView();
+                set({ nodes, fitViewQueued: false, fitViewOptions: undefined });
             }
-            triggerNodeChanges?.(changes);
-        }
-    },
-    updateNodePositions: (nodeDragItems, dragging = false) => {
-        const parentExpandChildren = [];
-        const changes = [];
-        const { nodeLookup, triggerNodeChanges } = get();
-        for (const [id, dragItem] of nodeDragItems) {
-            // we are using the nodelookup to be sure to use the current expandParent and parentId value
-            const node = nodeLookup.get(id);
-            const expandParent = !!(node?.expandParent && node?.parentId && dragItem?.position);
-            const change = {
-                id,
-                type: 'position',
-                position: expandParent
-                    ? {
-                        x: Math.max(0, dragItem.position.x),
-                        y: Math.max(0, dragItem.position.y),
-                    }
-                    : dragItem.position,
-                dragging,
-            };
-            if (expandParent && node.parentId) {
-                parentExpandChildren.push({
+            else {
+                set({ nodes });
+            }
+        },
+        setEdges: (edges) => {
+            const { connectionLookup, edgeLookup } = get();
+            updateConnectionLookup(connectionLookup, edgeLookup, edges);
+            set({ edges });
+        },
+        setDefaultNodesAndEdges: (nodes, edges) => {
+            if (nodes) {
+                const { setNodes } = get();
+                setNodes(nodes);
+                set({ hasDefaultNodes: true });
+            }
+            if (edges) {
+                const { setEdges } = get();
+                setEdges(edges);
+                set({ hasDefaultEdges: true });
+            }
+        },
+        /*
+         * Every node gets registerd at a ResizeObserver. Whenever a node
+         * changes its dimensions, this function is called to measure the
+         * new dimensions and update the nodes.
+         */
+        updateNodeInternals: (updates) => {
+            const { triggerNodeChanges, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent, debug, fitViewQueued } = get();
+            const { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin, nodeExtent);
+            if (!updatedInternals) {
+                return;
+            }
+            updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin, nodeExtent });
+            if (fitViewQueued) {
+                resolveFitView();
+                set({ fitViewQueued: false, fitViewOptions: undefined });
+            }
+            else {
+                // we always want to trigger useStore calls whenever updateNodeInternals is called
+                set({});
+            }
+            if (changes?.length > 0) {
+                if (debug) {
+                    console.log('React Flow: trigger node changes', changes);
+                }
+                triggerNodeChanges?.(changes);
+            }
+        },
+        updateNodePositions: (nodeDragItems, dragging = false) => {
+            const parentExpandChildren = [];
+            const changes = [];
+            const { nodeLookup, triggerNodeChanges } = get();
+            for (const [id, dragItem] of nodeDragItems) {
+                // we are using the nodelookup to be sure to use the current expandParent and parentId value
+                const node = nodeLookup.get(id);
+                const expandParent = !!(node?.expandParent && node?.parentId && dragItem?.position);
+                const change = {
                     id,
-                    parentId: node.parentId,
-                    rect: {
-                        ...dragItem.internals.positionAbsolute,
-                        width: dragItem.measured.width ?? 0,
-                        height: dragItem.measured.height ?? 0,
-                    },
-                });
+                    type: 'position',
+                    position: expandParent
+                        ? {
+                            x: Math.max(0, dragItem.position.x),
+                            y: Math.max(0, dragItem.position.y),
+                        }
+                        : dragItem.position,
+                    dragging,
+                };
+                if (expandParent && node.parentId) {
+                    parentExpandChildren.push({
+                        id,
+                        parentId: node.parentId,
+                        rect: {
+                            ...dragItem.internals.positionAbsolute,
+                            width: dragItem.measured.width ?? 0,
+                            height: dragItem.measured.height ?? 0,
+                        },
+                    });
+                }
+                changes.push(change);
             }
-            changes.push(change);
-        }
-        if (parentExpandChildren.length > 0) {
-            const { parentLookup, nodeOrigin } = get();
-            const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
-            changes.push(...parentExpandChanges);
-        }
-        triggerNodeChanges(changes);
-    },
-    triggerNodeChanges: (changes) => {
-        const { onNodesChange, setNodes, nodes, hasDefaultNodes, debug } = get();
-        if (changes?.length) {
-            if (hasDefaultNodes) {
-                const updatedNodes = applyNodeChanges(changes, nodes);
-                setNodes(updatedNodes);
+            if (parentExpandChildren.length > 0) {
+                const { parentLookup, nodeOrigin } = get();
+                const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
+                changes.push(...parentExpandChanges);
             }
-            if (debug) {
-                console.log('React Flow: trigger node changes', changes);
+            triggerNodeChanges(changes);
+        },
+        triggerNodeChanges: (changes) => {
+            const { onNodesChange, setNodes, nodes, hasDefaultNodes, debug } = get();
+            if (changes?.length) {
+                if (hasDefaultNodes) {
+                    const updatedNodes = applyNodeChanges(changes, nodes);
+                    setNodes(updatedNodes);
+                }
+                if (debug) {
+                    console.log('React Flow: trigger node changes', changes);
+                }
+                onNodesChange?.(changes);
             }
-            onNodesChange?.(changes);
-        }
-    },
-    triggerEdgeChanges: (changes) => {
-        const { onEdgesChange, setEdges, edges, hasDefaultEdges, debug } = get();
-        if (changes?.length) {
-            if (hasDefaultEdges) {
-                const updatedEdges = applyEdgeChanges(changes, edges);
-                setEdges(updatedEdges);
+        },
+        triggerEdgeChanges: (changes) => {
+            const { onEdgesChange, setEdges, edges, hasDefaultEdges, debug } = get();
+            if (changes?.length) {
+                if (hasDefaultEdges) {
+                    const updatedEdges = applyEdgeChanges(changes, edges);
+                    setEdges(updatedEdges);
+                }
+                if (debug) {
+                    console.log('React Flow: trigger edge changes', changes);
+                }
+                onEdgesChange?.(changes);
             }
-            if (debug) {
-                console.log('React Flow: trigger edge changes', changes);
+        },
+        addSelectedNodes: (selectedNodeIds) => {
+            const { multiSelectionActive, edgeLookup, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
+            if (multiSelectionActive) {
+                const nodeChanges = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true));
+                triggerNodeChanges(nodeChanges);
+                return;
             }
-            onEdgesChange?.(changes);
-        }
-    },
-    addSelectedNodes: (selectedNodeIds) => {
-        const { multiSelectionActive, edgeLookup, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
-        if (multiSelectionActive) {
-            const nodeChanges = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true));
+            triggerNodeChanges(getSelectionChanges(nodeLookup, new Set([...selectedNodeIds]), true));
+            triggerEdgeChanges(getSelectionChanges(edgeLookup));
+        },
+        addSelectedEdges: (selectedEdgeIds) => {
+            const { multiSelectionActive, edgeLookup, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
+            if (multiSelectionActive) {
+                const changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true));
+                triggerEdgeChanges(changedEdges);
+                return;
+            }
+            triggerEdgeChanges(getSelectionChanges(edgeLookup, new Set([...selectedEdgeIds])));
+            triggerNodeChanges(getSelectionChanges(nodeLookup, new Set(), true));
+        },
+        unselectNodesAndEdges: ({ nodes, edges } = {}) => {
+            const { edges: storeEdges, nodes: storeNodes, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
+            const nodesToUnselect = nodes ? nodes : storeNodes;
+            const edgesToUnselect = edges ? edges : storeEdges;
+            const nodeChanges = nodesToUnselect.map((n) => {
+                const internalNode = nodeLookup.get(n.id);
+                if (internalNode) {
+                    /*
+                     * we need to unselect the internal node that was selected previously before we
+                     * send the change to the user to prevent it to be selected while dragging the new node
+                     */
+                    internalNode.selected = false;
+                }
+                return createSelectionChange(n.id, false);
+            });
+            const edgeChanges = edgesToUnselect.map((edge) => createSelectionChange(edge.id, false));
             triggerNodeChanges(nodeChanges);
-            return;
-        }
-        triggerNodeChanges(getSelectionChanges(nodeLookup, new Set([...selectedNodeIds]), true));
-        triggerEdgeChanges(getSelectionChanges(edgeLookup));
-    },
-    addSelectedEdges: (selectedEdgeIds) => {
-        const { multiSelectionActive, edgeLookup, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
-        if (multiSelectionActive) {
-            const changedEdges = selectedEdgeIds.map((edgeId) => createSelectionChange(edgeId, true));
-            triggerEdgeChanges(changedEdges);
-            return;
-        }
-        triggerEdgeChanges(getSelectionChanges(edgeLookup, new Set([...selectedEdgeIds])));
-        triggerNodeChanges(getSelectionChanges(nodeLookup, new Set(), true));
-    },
-    unselectNodesAndEdges: ({ nodes, edges } = {}) => {
-        const { edges: storeEdges, nodes: storeNodes, nodeLookup, triggerNodeChanges, triggerEdgeChanges } = get();
-        const nodesToUnselect = nodes ? nodes : storeNodes;
-        const edgesToUnselect = edges ? edges : storeEdges;
-        const nodeChanges = nodesToUnselect.map((n) => {
-            const internalNode = nodeLookup.get(n.id);
-            if (internalNode) {
-                /*
-                 * we need to unselect the internal node that was selected previously before we
-                 * send the change to the user to prevent it to be selected while dragging the new node
-                 */
-                internalNode.selected = false;
+            triggerEdgeChanges(edgeChanges);
+        },
+        setMinZoom: (minZoom) => {
+            const { panZoom, maxZoom } = get();
+            panZoom?.setScaleExtent([minZoom, maxZoom]);
+            set({ minZoom });
+        },
+        setMaxZoom: (maxZoom) => {
+            const { panZoom, minZoom } = get();
+            panZoom?.setScaleExtent([minZoom, maxZoom]);
+            set({ maxZoom });
+        },
+        setTranslateExtent: (translateExtent) => {
+            get().panZoom?.setTranslateExtent(translateExtent);
+            set({ translateExtent });
+        },
+        setPaneClickDistance: (clickDistance) => {
+            get().panZoom?.setClickDistance(clickDistance);
+        },
+        resetSelectedElements: () => {
+            const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
+            const nodeChanges = nodes.reduce((res, node) => (node.selected ? [...res, createSelectionChange(node.id, false)] : res), []);
+            const edgeChanges = edges.reduce((res, edge) => (edge.selected ? [...res, createSelectionChange(edge.id, false)] : res), []);
+            triggerNodeChanges(nodeChanges);
+            triggerEdgeChanges(edgeChanges);
+        },
+        setNodeExtent: (nextNodeExtent) => {
+            const { nodes, nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, nodeExtent } = get();
+            if (nextNodeExtent[0][0] === nodeExtent[0][0] &&
+                nextNodeExtent[0][1] === nodeExtent[0][1] &&
+                nextNodeExtent[1][0] === nodeExtent[1][0] &&
+                nextNodeExtent[1][1] === nodeExtent[1][1]) {
+                return;
             }
-            return createSelectionChange(n.id, false);
-        });
-        const edgeChanges = edgesToUnselect.map((edge) => createSelectionChange(edge.id, false));
-        triggerNodeChanges(nodeChanges);
-        triggerEdgeChanges(edgeChanges);
-    },
-    setMinZoom: (minZoom) => {
-        const { panZoom, maxZoom } = get();
-        panZoom?.setScaleExtent([minZoom, maxZoom]);
-        set({ minZoom });
-    },
-    setMaxZoom: (maxZoom) => {
-        const { panZoom, minZoom } = get();
-        panZoom?.setScaleExtent([minZoom, maxZoom]);
-        set({ maxZoom });
-    },
-    setTranslateExtent: (translateExtent) => {
-        get().panZoom?.setTranslateExtent(translateExtent);
-        set({ translateExtent });
-    },
-    setPaneClickDistance: (clickDistance) => {
-        get().panZoom?.setClickDistance(clickDistance);
-    },
-    resetSelectedElements: () => {
-        const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = get();
-        const nodeChanges = nodes.reduce((res, node) => (node.selected ? [...res, createSelectionChange(node.id, false)] : res), []);
-        const edgeChanges = edges.reduce((res, edge) => (edge.selected ? [...res, createSelectionChange(edge.id, false)] : res), []);
-        triggerNodeChanges(nodeChanges);
-        triggerEdgeChanges(edgeChanges);
-    },
-    setNodeExtent: (nextNodeExtent) => {
-        const { nodes, nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, nodeExtent } = get();
-        if (nextNodeExtent[0][0] === nodeExtent[0][0] &&
-            nextNodeExtent[0][1] === nodeExtent[0][1] &&
-            nextNodeExtent[1][0] === nodeExtent[1][0] &&
-            nextNodeExtent[1][1] === nodeExtent[1][1]) {
-            return;
-        }
-        adoptUserNodes(nodes, nodeLookup, parentLookup, {
-            nodeOrigin,
-            nodeExtent: nextNodeExtent,
-            elevateNodesOnSelect,
-            checkEquality: false,
-        });
-        set({ nodeExtent: nextNodeExtent });
-    },
-    panBy: (delta) => {
-        const { transform, width, height, panZoom, translateExtent } = get();
-        return panBy({ delta, panZoom, transform, translateExtent, width, height });
-    },
-    fitView: (options) => {
-        const { panZoom, width, height, minZoom, maxZoom, nodeLookup } = get();
-        if (!panZoom) {
-            return Promise.resolve(false);
-        }
-        const fitViewNodes = getFitViewNodes(nodeLookup, options);
-        return fitView({
-            nodes: fitViewNodes,
-            width,
-            height,
-            panZoom,
-            minZoom,
-            maxZoom,
-        }, options);
-    },
-    /*
-     * we can't call an asnychronous function in updateNodeInternals
-     * for that we created this sync version of fitView
-     */
-    fitViewSync: (options) => {
-        const { panZoom, width, height, minZoom, maxZoom, nodeLookup } = get();
-        if (!panZoom) {
-            return false;
-        }
-        const fitViewNodes = getFitViewNodes(nodeLookup, options);
-        fitView({
-            nodes: fitViewNodes,
-            width,
-            height,
-            panZoom,
-            minZoom,
-            maxZoom,
-        }, options);
-        return fitViewNodes.size > 0;
-    },
-    cancelConnection: () => {
-        set({
-            connection: { ...initialConnection },
-        });
-    },
-    updateConnection: (connection) => {
-        set({ connection });
-    },
-    reset: () => set({ ...getInitialState() }),
-}), Object.is);
+            adoptUserNodes(nodes, nodeLookup, parentLookup, {
+                nodeOrigin,
+                nodeExtent: nextNodeExtent,
+                elevateNodesOnSelect,
+                checkEquality: false,
+            });
+            set({ nodeExtent: nextNodeExtent });
+        },
+        panBy: (delta) => {
+            const { transform, width, height, panZoom, translateExtent } = get();
+            return panBy({ delta, panZoom, transform, translateExtent, width, height });
+        },
+        cancelConnection: () => {
+            set({
+                connection: { ...initialConnection },
+            });
+        },
+        updateConnection: (connection) => {
+            set({ connection });
+        },
+        reset: () => set({ ...getInitialState() }),
+    };
+}, Object.is);
 
 /**
  * The `<ReactFlowProvider />` component is a [context provider](https://react.dev/learn/passing-data-deeply-with-context#)
@@ -11993,37 +12112,38 @@ const selector$6 = (s) => s.domNode?.querySelector('.react-flow__edgelabel-rende
  * Edges are SVG-based. If you want to render more complex labels you can use the
  * `<EdgeLabelRenderer />` component to access a div based renderer. This component
  * is a portal that renders the label in a `<div />` that is positioned on top of
- * the edges. You can see an example usage of the component in the [edge label renderer](/examples/edges/edge-label-renderer) example.
+ * the edges. You can see an example usage of the component in the
+ * [edge label renderer example](/examples/edges/edge-label-renderer).
  * @public
  *
  * @example
- *```jsx
- *import React from 'react';
- *import { getBezierPath, EdgeLabelRenderer, BaseEdge } from '@xyflow/react';
+ * ```jsx
+ * import React from 'react';
+ * import { getBezierPath, EdgeLabelRenderer, BaseEdge } from '@xyflow/react';
  *
- *export function CustomEdge({ id, data, ...props }) {
- *  const [edgePath, labelX, labelY] = getBezierPath(props);
+ * export function CustomEdge({ id, data, ...props }) {
+ *   const [edgePath, labelX, labelY] = getBezierPath(props);
  *
- *  return (
- *    <>
- *      <BaseEdge id={id} path={edgePath} />
- *      <EdgeLabelRenderer>
- *        <div
- *          style={{
- *            position: 'absolute',
- *            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
- *            background: '#ffcc00',
- *            padding: 10,
- *        }}
- *          className="nodrag nopan"
- *        >
- *         {data.label}
- *        </div>
- *      </EdgeLabelRenderer>
- *    </>
- *  );
- *};
- *```
+ *   return (
+ *     <>
+ *       <BaseEdge id={id} path={edgePath} />
+ *       <EdgeLabelRenderer>
+ *         <div
+ *           style={{
+ *             position: 'absolute',
+ *             transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+ *             background: '#ffcc00',
+ *             padding: 10,
+ *         }}
+ *           className="nodrag nopan"
+ *         >
+ *          {data.label}
+ *         </div>
+ *       </EdgeLabelRenderer>
+ *     </>
+ *   );
+ * };
+ * ```
  *
  * @remarks The `<EdgeLabelRenderer />` has no pointer events by default. If you want to
  * add mouse interactions you need to set the style `pointerEvents: all` and add
@@ -12043,8 +12163,16 @@ function EdgeLabelRenderer({ children }) {
  * like React's `useState` hook with an additional helper callback.
  *
  * @public
- * @param initialNodes
- * @returns an array [nodes, setNodes, onNodesChange]
+ * @returns
+ * - `nodes`: The current array of nodes. You might pass this directly to the `nodes` prop of your
+ * `<ReactFlow />` component, or you may want to manipulate it first to perform some layouting,
+ * for example.
+ * - `setNodes`: A function that you can use to update the nodes. You can pass it a new array of
+ * nodes or a callback that receives the current array of nodes and returns a new array of nodes.
+ * This is the same as the second element of the tuple returned by React's `useState` hook.
+ * - `onNodesChange`: A handy callback that can take an array of `NodeChanges` and update the nodes
+ * state accordingly. You'll typically pass this directly to the `onNodesChange` prop of your
+ * `<ReactFlow />` component.
  * @example
  *
  *```tsx
@@ -12085,8 +12213,18 @@ function useNodesState(initialNodes) {
  * like React's `useState` hook with an additional helper callback.
  *
  * @public
- * @param initialEdges
- * @returns an array [edges, setEdges, onEdgesChange]
+ * @returns
+ * - `edges`: The current array of edges. You might pass this directly to the `edges` prop of your
+ * `<ReactFlow />` component, or you may want to manipulate it first to perform some layouting,
+ * for example.
+ *
+ * - `setEdges`: A function that you can use to update the edges. You can pass it a new array of
+ * edges or a callback that receives the current array of edges and returns a new array of edges.
+ * This is the same as the second element of the tuple returned by React's `useState` hook.
+ *
+ * - `onEdgesChange`: A handy callback that can take an array of `EdgeChanges` and update the edges
+ * state accordingly. You'll typically pass this directly to the `onEdgesChange` prop of your
+ * `<ReactFlow />` component.
  * @example
  *
  *```tsx
@@ -12370,8 +12508,9 @@ nodeComponent: NodeComponent = MiniMapNode, onClick, }) {
 }
 function NodeComponentWrapperInner({ id, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, shapeRendering, NodeComponent, onClick, }) {
     const { node, x, y, width, height } = useStore((s) => {
-        const node = s.nodeLookup.get(id);
-        const { x, y } = node.internals.positionAbsolute;
+        const { internals } = s.nodeLookup.get(id);
+        const node = internals.userNode;
+        const { x, y } = internals.positionAbsolute;
         const { width, height } = getNodeDimensions(node);
         return {
             node,
@@ -12391,6 +12530,7 @@ var MiniMapNodes$1 = memo(MiniMapNodes);
 
 const defaultWidth = 200;
 const defaultHeight = 150;
+const filterHidden = (node) => !node.hidden;
 const selector$1 = (s) => {
     const viewBB = {
         x: -s.transform[0] / s.transform[2],
@@ -12400,7 +12540,9 @@ const selector$1 = (s) => {
     };
     return {
         viewBB,
-        boundingRect: s.nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds(s.nodeLookup), viewBB) : viewBB,
+        boundingRect: s.nodeLookup.size > 0
+            ? getBoundsOfRects(getInternalNodesBounds(s.nodeLookup, { filter: filterHidden }), viewBB)
+            : viewBB,
         rfId: s.rfId,
         panZoom: s.panZoom,
         translateExtent: s.translateExtent,
@@ -12466,7 +12608,7 @@ nodeComponent, bgColor, maskColor, maskStrokeColor, maskStrokeWidth, position =
         : undefined;
     const onSvgNodeClick = onNodeClick
         ? useCallback((event, nodeId) => {
-            const node = store.getState().nodeLookup.get(nodeId);
+            const node = store.getState().nodeLookup.get(nodeId).internals.userNode;
             onNodeClick(event, node);
         }, [])
         : undefined;
@@ -12478,7 +12620,7 @@ nodeComponent, bgColor, maskColor, maskStrokeColor, maskStrokeWidth, position =
             '--xy-minimap-mask-stroke-width-props': typeof maskStrokeWidth === 'number' ? maskStrokeWidth * viewScale : undefined,
             '--xy-minimap-node-background-color-props': typeof nodeColor === 'string' ? nodeColor : undefined,
             '--xy-minimap-node-stroke-color-props': typeof nodeStrokeColor === 'string' ? nodeStrokeColor : undefined,
-            '--xy-minimap-node-stroke-width-props': typeof nodeStrokeWidth === 'string' ? nodeStrokeWidth : undefined,
+            '--xy-minimap-node-stroke-width-props': typeof nodeStrokeWidth === 'number' ? nodeStrokeWidth : undefined,
         }, className: cc(['react-flow__minimap', className]), "data-testid": "rf__minimap", children: jsxRuntimeExports.jsxs("svg", { width: elementWidth, height: elementHeight, viewBox: `${x} ${y} ${width} ${height}`, className: "react-flow__minimap-svg", role: "img", "aria-labelledby": labelledBy, ref: svg, onClick: onSvgClick, children: [ariaLabel && jsxRuntimeExports.jsx("title", { id: labelledBy, children: ariaLabel }), jsxRuntimeExports.jsx(MiniMapNodes$1, { onClick: onSvgNodeClick, nodeColor: nodeColor, nodeStrokeColor: nodeStrokeColor, nodeBorderRadius: nodeBorderRadius, nodeClassName: nodeClassName, nodeStrokeWidth: nodeStrokeWidth, nodeComponent: nodeComponent }), jsxRuntimeExports.jsx("path", { className: "react-flow__minimap-mask", d: `M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width - offset * 2}z
         M${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`, fillRule: "evenodd", pointerEvents: "none" })] }) }));
 }
@@ -12592,11 +12734,15 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
                     }
                     triggerNodeChanges(changes);
                 },
-                onEnd: () => {
+                onEnd: ({ width, height }) => {
                     const dimensionChange = {
                         id: id,
                         type: 'dimensions',
                         resizing: false,
+                        dimensions: {
+                            width,
+                            height,
+                        },
                     };
                     store.getState().triggerNodeChanges([dimensionChange]);
                 },