@odigos/ui-kit 0.0.19 → 0.0.21

package/lib/containers.js

@@ -1,23 +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-CvuVOtkr.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-Dboulcny.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 { 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 require$$1 from 'use-sync-external-store/shim';
 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';
@@ -1092,7 +1092,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: 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.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 +1162,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 +1177,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 +1188,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 +1244,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 +1298,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 +1335,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 +1356,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 +1414,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 +1445,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;
@@ -5628,11 +5330,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);
@@ -5843,6 +5546,85 @@ const rendererPointToPoint = ({ x, y }, [tx, ty, tScale]) => {
         y: y * tScale + ty,
     };
 };
+/**
+ * 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
+ * @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 optional padding.
  * @public
@@ -5856,19 +5638,35 @@ const rendererPointToPoint = ({ x, y }, [tx, ty, tScale]) => {
  * @returns A transforned {@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) {
@@ -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) {
@@ -8907,9 +8711,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 });
@@ -9019,7 +8823,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 +8832,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 +8931,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;
@@ -9547,7 +9334,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 +9347,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);
@@ -9783,6 +9585,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 +9791,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 +9807,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;
         }
@@ -10919,7 +10732,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 +10747,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 +10757,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);
@@ -11080,7 +10893,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 +10931,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 +10970,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 +11015,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 +11077,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" }));
 }
@@ -11595,11 +11513,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 +11534,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 +11890,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
@@ -12391,6 +12289,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 +12299,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,