@odigos/ui-kit 0.0.83 → 0.0.85

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.0.85](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.84...ui-kit-v0.0.85) (2025-08-18)
+
+
+### Bug Fixes
+
+* override existing toggle for addclusterinfo action ([#326](https://github.com/odigos-io/ui-kit/issues/326)) ([4080e83](https://github.com/odigos-io/ui-kit/commit/4080e83910fa50790d6bd55b0153dc6897f8c32d))
+
+## [0.0.84](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.83...ui-kit-v0.0.84) (2025-08-18)
+
+
+### Features
+
+* add toggle for overwriting existing cluster attributes in AddClusterInfo component ([#324](https://github.com/odigos-io/ui-kit/issues/324)) ([ef2ef11](https://github.com/odigos-io/ui-kit/commit/ef2ef11a3392fda77f2f302c0e55ae6c2f24a99e))
+
 ## [0.0.83](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.82...ui-kit-v0.0.83) (2025-08-13)
 
 

package/lib/components.js

@@ -1,6 +1,6 @@
-import { B as Button } from './index-dcb15a56.js';
-export { A as AutocompleteInput, a as Badge, a9 as CenterThis, C as Checkbox, b as Code, c as ConditionDetails, D as DataCard, e as DataCardFieldTypes, d as DataCardFields, f as DataFinger, g as DataTab, h as DescribeRow, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, a8 as FlexColumn, a7 as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, ac as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, ab as Overlay, P as Popup, O as PopupForm, S as ScrollX, Q as SectionTitle, R as Segment, U as SelectionButton, V as SkeletonLoader, W as Status, X as Stepper, Y as TabList, ad as TableContainer, ae as TableTitleWrap, af as TableWrap, Z as Tag, _ as Text, a2 as TextArea, a3 as Toggle, T as ToggleCodeComponent, a4 as Tooltip, a5 as TraceLoader, aa as VerticalScroll, a6 as WarningModal, $ as getLinksFromText, a0 as getStrongsFromText, a1 as renderText } from './index-dcb15a56.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-b980f6ea.js';
+import { B as Button } from './index-90161559.js';
+export { A as AutocompleteInput, a as Badge, a9 as CenterThis, C as Checkbox, b as Code, c as ConditionDetails, D as DataCard, e as DataCardFieldTypes, d as DataCardFields, f as DataFinger, g as DataTab, h as DescribeRow, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, a8 as FlexColumn, a7 as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, ac as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, ab as Overlay, P as Popup, O as PopupForm, S as ScrollX, Q as SectionTitle, R as Segment, U as SelectionButton, V as SkeletonLoader, W as Status, X as Stepper, Y as TabList, ad as TableContainer, ae as TableTitleWrap, af as TableWrap, Z as Tag, _ as Text, a2 as TextArea, a3 as Toggle, T as ToggleCodeComponent, a4 as Tooltip, a5 as TraceLoader, aa as VerticalScroll, a6 as WarningModal, $ as getLinksFromText, a0 as getStrongsFromText, a1 as renderText } from './index-90161559.js';
+export { C as CancelWarning, D as DeleteWarning } from './index-8e9ad0b4.js';
 import React, { createContext, Component, createElement } from 'react';
 import { T as Theme } from './index-86030474.js';
 import 'styled-components';

package/lib/containers.js

@@ -2,14 +2,14 @@ import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, us
 import styled, { css } from 'styled-components';
 import { b as DISPLAY_TITLES, T as Theme, U as usePendingStore, V as useNotificationStore, O as useDrawerStore, B as BUTTON_TEXTS, W as useEntityStore, A as ACTION_OPTIONS, g as getActionIcon, z as useModalStore, F as FORM_ALERTS, X as useFilterStore, d as getInstrumentationRuleIcon, Y as useDataStreamStore, Z as useInstrumentStore, c as getEntityId, D as DISPLAY_LANGUAGES, M as MONITORS_OPTIONS, S as STORAGE_KEYS, a as DEFAULT_DATA_STREAM_NAME, _ as useSetupStore, e as getProgrammingLanguageIcon, I as INSTRUMENTATION_RULE_OPTIONS, $ as useSelectedStore, k as ImageErrorIcon, a0 as useDarkMode } from './index-86030474.js';
 import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, EdgeTypes, AddNodeTypes, SignalType, HeadersCollectionKeyTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType, K8sResourceKind, ProgrammingLanguages, MountMethod, AgentEnvVarsInjectionMethod, Profile, InstallationMethod } from './types.js';
-import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, _ as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, a2 as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a8 as FlexColumn, M as Modal, N as NavigationButtons, ac as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a7 as FlexRow, a4 as Tooltip, s as IconWrapped, G as MonitorsIcons, ad as TableContainer, ae as TableTitleWrap, r as IconTitleBadge, af as TableWrap, y as InteractiveTable, a9 as CenterThis, J as NoDataFound, a5 as TraceLoader, a as Badge, ag as nodeConfig, ah as useNodesState, ai as useEdgesState, aj as Flow, ak as applyNodeChanges, P as Popup, U as SelectionButton, aa as VerticalScroll, n as Dropdown, B as Button, a3 as Toggle, I as IconButton, E as ExtendArrow, al as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Z as Tag, am as MarkerType, t as IconsNav, an as CopyText, h as DescribeRow, ao as PodContainer, ap as SourceContainer, q as IconGroup, O as PopupForm } from './index-dcb15a56.js';
+import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, a3 as Toggle, K as KeyValueInputsList, w as InputList, _ as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, a2 as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a8 as FlexColumn, M as Modal, N as NavigationButtons, ac as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a7 as FlexRow, a4 as Tooltip, s as IconWrapped, G as MonitorsIcons, ad as TableContainer, ae as TableTitleWrap, r as IconTitleBadge, af as TableWrap, y as InteractiveTable, a9 as CenterThis, J as NoDataFound, a5 as TraceLoader, a as Badge, ag as nodeConfig, ah as useNodesState, ai as useEdgesState, aj as Flow, ak as applyNodeChanges, P as Popup, U as SelectionButton, aa as VerticalScroll, n as Dropdown, B as Button, I as IconButton, E as ExtendArrow, al as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Z as Tag, am as MarkerType, t as IconsNav, an as CopyText, h as DescribeRow, ao as PodContainer, ap as SourceContainer, q as IconGroup, O as PopupForm } from './index-90161559.js';
 import { i as isEmpty, s as safeJsonParse, d as deepClone } from './index-5e5f7bda.js';
 import { C as CheckCircledIcon, O as OdigosLogo } from './index-4dfaeaab.js';
 import { C as CrossCircledIcon, O as OdigosLogoText, F as FilterIcon, D as DataStreamsIcon, A as ArrowIcon, R as RefreshLeftArrowIcon, N as NotificationIcon, U as UserIcon, a as OverviewIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon, G as GearIcon } from './index-c1a8e92c.js';
 import { useActionFormData, useSessionStorage, useDataStreamFormData, useDestinationFormData, useClickNotification, useSourceFormData, useSourceSelectionFormData } from './hooks.js';
 import { u as useKeyDown, a as useContainerSize, b as useClickNode, c as usePopup, d as useOnClickOutside, e as useInstrumentationRuleFormData, f as useTransition, g as useTimeAgo, h as useCopy, i as useGenericForm } from './useTransition-cac1649d.js';
 import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, P as PlusIcon, a as CopyIcon } from './index-72089d6e.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-b980f6ea.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-8e9ad0b4.js';
 import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, h as splitCamelString, c as capitalizeFirstLetter, i as isStringABoolean, p as parseBooleanFromString } from './index-f22371cb.js';
 import { f as filterActions, l as getEntityLabel, k as getEntityIcon, t as sleep, g as formatBytes, i as getContainersIcons, n as getValueForRange, j as getDestinationIcon, e as filterSourcesByStream, d as filterSources, b as filterDestinationsByStream, a as filterDestinations, s as mapDestinationFieldsForDisplay, c as compareCondition, p as getYamlFieldsForDestination, m as getMetricForEntity, o as getWorkloadId, q as hasUnhealthyInstances, h as getContainersInstrumentedCount, r as isOverTime } from './index-8b736e84.js';
 import { m as mapExportedSignals } from './index-6a6bea6e.js';
@@ -19,7 +19,7 @@ import { a6 as RulesIcon, a3 as SourcesIcon, a5 as ActionsIcon, a4 as Destinatio
 import 'react-dom';
 
 const buildCard$3 = (action) => {
-    const { type, spec: { actionName, notes, signals, disabled, collectContainerAttributes, collectReplicaSetAttributes, collectWorkloadId, collectClusterId, labelsAttributes, annotationsAttributes, clusterAttributes, attributeNamesToDelete, renames, piiCategories, fallbackSamplingRatio, samplingPercentage, endpointsFilters, servicesNameFilters, attributeFilters, }, } = action;
+    const { type, spec: { actionName, notes, signals, disabled, collectContainerAttributes, collectReplicaSetAttributes, collectWorkloadId, collectClusterId, labelsAttributes, annotationsAttributes, clusterAttributes, overwriteExistingValues, attributeNamesToDelete, renames, piiCategories, fallbackSamplingRatio, samplingPercentage, endpointsFilters, servicesNameFilters, attributeFilters, }, } = action;
     const arr = [
         { title: DISPLAY_TITLES.TYPE, value: type },
         { type: DataCardFieldTypes.ActiveStatus, title: DISPLAY_TITLES.STATUS, value: String(!disabled) },
@@ -51,6 +51,7 @@ const buildCard$3 = (action) => {
         });
     }
     if (type === ActionType.AddClusterInfo) {
+        arr.push({ title: 'Overwrite Existing Values', value: String(overwriteExistingValues || false) });
         let str = '';
         clusterAttributes?.forEach(({ attributeName, attributeStringValue }, idx) => {
             str += `${attributeName}: ${attributeStringValue}`;
@@ -131,7 +132,7 @@ const buildCard$3 = (action) => {
     return arr;
 };
 
-const KEY$8 = ActionKeyTypes.PiiCategories;
+const KEY$7 = ActionKeyTypes.PiiCategories;
 const ListContainer$2 = styled.div `
   display: flex;
   flex-direction: row;
@@ -150,18 +151,18 @@ const PII_OPTIONS = [
     },
 ];
 const PiiMasking = ({ value, setValue, formErrors }) => {
-    const errorMessage = formErrors[KEY$8];
-    const mappedValue = value[KEY$8] || [];
+    const errorMessage = formErrors[KEY$7];
+    const mappedValue = value[KEY$7] || [];
     const [isLastSelection, setIsLastSelection] = useState(mappedValue.length === 1);
     const handleChange = (id, isAdd) => {
         const arr = isAdd ? [...mappedValue, id] : mappedValue.filter((str) => str !== id);
-        setValue(KEY$8, arr);
+        setValue(KEY$7, arr);
         setIsLastSelection(arr.length === 1);
     };
     useEffect(() => {
         if (!mappedValue.length) {
             const arr = PII_OPTIONS.map(({ id }) => id);
-            setValue(KEY$8, arr);
+            setValue(KEY$7, arr);
             setIsLastSelection(PII_OPTIONS.length === 1);
         }
         // eslint-disable-next-line
@@ -172,11 +173,11 @@ const PiiMasking = ({ value, setValue, formErrors }) => {
         !!errorMessage && React.createElement(FieldError, null, errorMessage)));
 };
 
-const KEY$7 = ActionKeyTypes.FallbackSamplingRatio, MIN$1 = 0, MAX$1 = 100;
+const KEY$6 = ActionKeyTypes.FallbackSamplingRatio, MIN$1 = 0, MAX$1 = 100;
 const ErrorSampler = ({ value, setValue, formErrors }) => {
-    const errorMessage = formErrors[KEY$7];
-    const mappedValue = value[KEY$7];
-    const handleChange = (val) => setValue(KEY$7, Math.max(MIN$1, Math.min(Number(val), MAX$1)) || MIN$1);
+    const errorMessage = formErrors[KEY$6];
+    const mappedValue = value[KEY$6];
+    const handleChange = (val) => setValue(KEY$6, Math.max(MIN$1, Math.min(Number(val), MAX$1)) || MIN$1);
     return (React.createElement(Input, { title: 'Fallback sampling ratio', required: true, type: InputTypes.Number, min: MIN$1, max: MAX$1, value: !isEmpty(mappedValue) ? String(mappedValue) : '', onChange: ({ target: { value: v } }) => handleChange(v), errorMessage: errorMessage }));
 };
 
@@ -234,7 +235,7 @@ const K8sAttributes = ({ value, setValue, formErrors }) => {
         React.createElement(InputTable, { columns: ANNOTATION_COLUMNS, value: value[ActionKeyTypes.AnnotationsAttributes] || [], onChange: (arr) => setValue(ActionKeyTypes.AnnotationsAttributes, arr), errorMessage: formErrors[ActionKeyTypes.AnnotationsAttributes] })));
 };
 
-const KEY$6 = ActionKeyTypes.EndpointsFilters;
+const KEY$5 = ActionKeyTypes.EndpointsFilters;
 const COLUMNS$2 = [
     {
         title: 'Service',
@@ -268,8 +269,8 @@ const COLUMNS$2 = [
     },
 ];
 const LatencySampler = ({ value, setValue, formErrors }) => {
-    const errorMessage = formErrors[KEY$6];
-    const mappedValue = value[KEY$6] || [];
+    const errorMessage = formErrors[KEY$5];
+    const mappedValue = value[KEY$5] || [];
     const handleChange = (arr) => {
         const mapped = arr.map(({ serviceName, httpRoute, minimumLatencyThreshold, fallbackSamplingRatio }) => {
             const row = {
@@ -280,23 +281,21 @@ const LatencySampler = ({ value, setValue, formErrors }) => {
             };
             return row;
         });
-        setValue(KEY$6, mapped);
+        setValue(KEY$5, mapped);
     };
     return React.createElement(InputTable, { columns: COLUMNS$2, value: mappedValue, onChange: handleChange, errorMessage: errorMessage });
 };
 
-const KEY$5 = ActionKeyTypes.ClusterAttributes;
 const AddClusterInfo = ({ value, setValue, formErrors }) => {
-    const errorMessage = formErrors[KEY$5];
-    const mappedValue = value[KEY$5]?.map((obj) => ({
-        key: obj.attributeName,
-        value: obj.attributeStringValue,
-    })) || [];
-    const handleChange = (arr) => setValue(KEY$5, arr.map((obj) => ({
-        attributeName: obj.key,
-        attributeStringValue: obj.value,
-    })));
-    return React.createElement(KeyValueInputsList, { title: 'Resource Attributes', value: mappedValue, onChange: handleChange, required: true, errorMessage: errorMessage });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Toggle, { title: 'Overwrite Existing Values', tooltip: 'If enabled, the resource attributes will overwrite any existing attributes with the same name.', initialValue: value[ActionKeyTypes.OverwriteExistingValues] || false, onChange: (bool) => setValue(ActionKeyTypes.OverwriteExistingValues, bool) }),
+        React.createElement(KeyValueInputsList, { title: 'Resource Attributes', value: value[ActionKeyTypes.ClusterAttributes]?.map((obj) => ({
+                key: obj.attributeName,
+                value: obj.attributeStringValue,
+            })) || [], onChange: (arr) => setValue(ActionKeyTypes.ClusterAttributes, arr.map((obj) => ({
+                attributeName: obj.key,
+                attributeStringValue: obj.value,
+            }))), required: true, errorMessage: formErrors[ActionKeyTypes.ClusterAttributes] })));
 };
 
 const KEY$4 = ActionKeyTypes.AttributeNamesToDelete;
@@ -783,7 +782,7 @@ const ActionModal = ({ createAction }) => {
 };
 
 const buildSpecCell$1 = (action) => {
-    const { type, spec: { collectContainerAttributes, collectReplicaSetAttributes, collectWorkloadId, collectClusterId, labelsAttributes, annotationsAttributes, clusterAttributes, attributeNamesToDelete, renames, piiCategories, fallbackSamplingRatio, samplingPercentage, endpointsFilters, }, } = action;
+    const { type, spec: { collectContainerAttributes, collectReplicaSetAttributes, collectWorkloadId, collectClusterId, labelsAttributes, annotationsAttributes, clusterAttributes, overwriteExistingValues, attributeNamesToDelete, renames, piiCategories, fallbackSamplingRatio, samplingPercentage, endpointsFilters, attributeFilters, servicesNameFilters, }, } = action;
     let str = '';
     if (type === ActionType.K8sAttributes) {
         if (collectContainerAttributes)
@@ -806,6 +805,7 @@ const buildSpecCell$1 = (action) => {
         });
     }
     if (type === ActionType.AddClusterInfo) {
+        str += `Overwrite Existing: ${overwriteExistingValues}\n`;
         clusterAttributes?.forEach(({ attributeName, attributeStringValue }, idx) => {
             str += `${attributeName}: ${attributeStringValue}`;
             if (idx < clusterAttributes.length - 1)
@@ -843,13 +843,27 @@ const buildSpecCell$1 = (action) => {
     }
     if (type === ActionType.LatencySampler) {
         endpointsFilters?.forEach(({ serviceName, httpRoute, minimumLatencyThreshold, fallbackSamplingRatio }, idx) => {
-            str += `Endpoint${endpointsFilters.length > 1 ? ` #${idx + 1}` : ''}=${serviceName}${httpRoute}`;
+            str += `Endpoint${endpointsFilters.length > 1 ? ` #${idx + 1}` : ''}=${serviceName}${httpRoute}\n`;
             str += ` Latency=${minimumLatencyThreshold}`;
             str += ` Sampling=${fallbackSamplingRatio}`;
             if (idx < endpointsFilters.length - 1)
                 str += ', ';
         });
     }
+    if (type === ActionType.ServiceNameSampler) {
+        servicesNameFilters?.forEach(({ serviceName, samplingRatio, fallbackSamplingRatio }) => {
+            str += `Service Name: ${serviceName}, `;
+            str += `Sampling Ratio: ${samplingRatio}, `;
+            str += `Fallback Sampling Ratio: ${fallbackSamplingRatio}\n`;
+        });
+    }
+    if (type === ActionType.SpanAttributeSampler) {
+        attributeFilters?.forEach(({ serviceName, attributeKey, fallbackSamplingRatio }) => {
+            str += `Service Name: ${serviceName}, `;
+            str += `Attribute Key: ${attributeKey}, `;
+            str += `Fallback Sampling Ratio: ${fallbackSamplingRatio}\n`;
+        });
+    }
     return str;
 };
 
@@ -1871,12 +1885,14 @@ const PushRight = styled.div `
 `;
 const getFilterCount = (params) => {
     let count = 0;
-    count += params.namespaces?.length || 0;
-    count += params.kinds?.length || 0;
-    count += params.monitors?.length || 0;
-    count += params.languages?.length || 0;
-    count += params.errors?.length || 0;
-    if (!!params.onlyErrors)
+    Object.values(params).forEach((value) => {
+        if (value && Array.isArray(value) && value.length > 0) {
+            count += value.length;
+        }
+    });
+    if (params.onlyErrors)
+        count++;
+    if (params.searchText)
         count++;
     return count;
 };

package/lib/hooks.js

@@ -15,6 +15,7 @@ const INITIAL$2 = {
     signals: [],
     disabled: false,
     clusterAttributes: null,
+    overwriteExistingValues: false,
     renames: null,
     attributeNamesToDelete: null,
     piiCategories: null,
@@ -122,6 +123,7 @@ const useActionFormData = () => {
                     case ActionKeyTypes.LabelsAttributes:
                     case ActionKeyTypes.AnnotationsAttributes:
                     case ActionKeyTypes.ClusterAttributes:
+                    case ActionKeyTypes.OverwriteExistingValues:
                     case ActionKeyTypes.AttributeNamesToDelete:
                     case ActionKeyTypes.Renames:
                     case ActionKeyTypes.PiiCategories:

package/lib/{index-b980f6ea.js → index-8e9ad0b4.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { a6 as WarningModal } from './index-dcb15a56.js';
+import { a6 as WarningModal } from './index-90161559.js';
 import { StatusType, EntityTypes } from './types.js';
 import './index-86030474.js';
 import 'styled-components';

package/lib/{index-dcb15a56.js → index-90161559.js}

@@ -4549,7 +4549,7 @@ const nodeConfig = {
     framePadding: 12,
 };
 
-var css_248z = "/* this gets exported as style.css and can be used for the default theming */\n/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */\n.react-flow {\n  direction: ltr;\n\n  --xy-edge-stroke-default: #b1b1b7;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #555;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);\n\n  --xy-minimap-background-color-default: #fff;\n  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #e2e2e2;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: transparent;\n  --xy-background-pattern-dots-color-default: #91919a;\n  --xy-background-pattern-lines-color-default: #eee;\n  --xy-background-pattern-cross-color-default: #e2e2e2;\n  background-color: var(--xy-background-color, var(--xy-background-color-default));\n  --xy-node-color-default: inherit;\n  --xy-node-border-default: 1px solid #1a192b;\n  --xy-node-background-color-default: #fff;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;\n  --xy-node-border-radius-default: 3px;\n\n  --xy-handle-background-color-default: #1a192b;\n  --xy-handle-border-color-default: #fff;\n\n  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #fefefe;\n  --xy-controls-button-background-color-hover-default: #f4f4f4;\n  --xy-controls-button-color-default: inherit;\n  --xy-controls-button-color-hover-default: inherit;\n  --xy-controls-button-border-color-default: #eee;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #ffffff;\n  --xy-edge-label-color-default: inherit;\n  --xy-resize-background-color-default: #3367d9;\n}\n.react-flow.dark {\n  --xy-edge-stroke-default: #3e3e3e;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #727272;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);\n\n  --xy-minimap-background-color-default: #141414;\n  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #2b2b2b;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: #141414;\n  --xy-background-pattern-dots-color-default: #777;\n  --xy-background-pattern-lines-color-default: #777;\n  --xy-background-pattern-cross-color-default: #777;\n  --xy-node-color-default: #f8f8f8;\n  --xy-node-border-default: 1px solid #3c3c3c;\n  --xy-node-background-color-default: #1e1e1e;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;\n\n  --xy-handle-background-color-default: #bebebe;\n  --xy-handle-border-color-default: #1e1e1e;\n\n  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #2b2b2b;\n  --xy-controls-button-background-color-hover-default: #3e3e3e;\n  --xy-controls-button-color-default: #f8f8f8;\n  --xy-controls-button-color-hover-default: #fff;\n  --xy-controls-button-border-color-default: #5b5b5b;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #141414;\n  --xy-edge-label-color-default: #f8f8f8;\n}\n.react-flow__background {\n  background-color: var(--xy-background-color-props, var(--xy-background-color, 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__pane.selection .react-flow__panel {\n  pointer-events: none;\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(-15px) 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(-15px) 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__controls.horizontal .react-flow__controls-button {\n    border-bottom: none;\n    border-right: 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  }\n.react-flow__controls.horizontal .react-flow__controls-button:last-child {\n    border-right: 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: 5px;\n  height: 5px;\n  border: 1px solid #fff;\n  border-radius: 1px;\n  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  translate: -50% -50%;\n}\n.react-flow__resize-control.handle.left {\n  left: 0;\n  top: 50%;\n}\n.react-flow__resize-control.handle.right {\n  left: 100%;\n  top: 50%;\n}\n.react-flow__resize-control.handle.top {\n  left: 50%;\n  top: 0;\n}\n.react-flow__resize-control.handle.bottom {\n  left: 50%;\n  top: 100%;\n}\n.react-flow__resize-control.handle.top.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.bottom.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.top.right {\n  left: 100%;\n}\n.react-flow__resize-control.handle.bottom.right {\n  left: 100%;\n}\n/* line styles */\n.react-flow__resize-control.line {\n  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  border-width: 0;\n  border-style: solid;\n}\n.react-flow__resize-control.line.left,\n.react-flow__resize-control.line.right {\n  width: 1px;\n  transform: translate(-50%, 0);\n  top: 0;\n  height: 100%;\n}\n.react-flow__resize-control.line.left {\n  left: 0;\n  border-left-width: 1px;\n}\n.react-flow__resize-control.line.right {\n  left: 100%;\n  border-right-width: 1px;\n}\n.react-flow__resize-control.line.top,\n.react-flow__resize-control.line.bottom {\n  height: 1px;\n  transform: translate(0, -50%);\n  left: 0;\n  width: 100%;\n}\n.react-flow__resize-control.line.top {\n  top: 0;\n  border-top-width: 1px;\n}\n.react-flow__resize-control.line.bottom {\n  border-bottom-width: 1px;\n  top: 100%;\n}\n.react-flow__edge-textbg {\n  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));\n}\n.react-flow__edge-text {\n  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));\n}\n";
+var css_248z = "/* this gets exported as style.css and can be used for the default theming */\n/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */\n.react-flow {\n  direction: ltr;\n\n  --xy-edge-stroke-default: #b1b1b7;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #555;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);\n\n  --xy-minimap-background-color-default: #fff;\n  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #e2e2e2;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: transparent;\n  --xy-background-pattern-dots-color-default: #91919a;\n  --xy-background-pattern-lines-color-default: #eee;\n  --xy-background-pattern-cross-color-default: #e2e2e2;\n  background-color: var(--xy-background-color, var(--xy-background-color-default));\n  --xy-node-color-default: inherit;\n  --xy-node-border-default: 1px solid #1a192b;\n  --xy-node-background-color-default: #fff;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;\n  --xy-node-border-radius-default: 3px;\n\n  --xy-handle-background-color-default: #1a192b;\n  --xy-handle-border-color-default: #fff;\n\n  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #fefefe;\n  --xy-controls-button-background-color-hover-default: #f4f4f4;\n  --xy-controls-button-color-default: inherit;\n  --xy-controls-button-color-hover-default: inherit;\n  --xy-controls-button-border-color-default: #eee;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #ffffff;\n  --xy-edge-label-color-default: inherit;\n  --xy-resize-background-color-default: #3367d9;\n}\n.react-flow.dark {\n  --xy-edge-stroke-default: #3e3e3e;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #727272;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);\n\n  --xy-minimap-background-color-default: #141414;\n  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #2b2b2b;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: #141414;\n  --xy-background-pattern-dots-color-default: #777;\n  --xy-background-pattern-lines-color-default: #777;\n  --xy-background-pattern-cross-color-default: #777;\n  --xy-node-color-default: #f8f8f8;\n  --xy-node-border-default: 1px solid #3c3c3c;\n  --xy-node-background-color-default: #1e1e1e;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;\n\n  --xy-handle-background-color-default: #bebebe;\n  --xy-handle-border-color-default: #1e1e1e;\n\n  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #2b2b2b;\n  --xy-controls-button-background-color-hover-default: #3e3e3e;\n  --xy-controls-button-color-default: #f8f8f8;\n  --xy-controls-button-color-hover-default: #fff;\n  --xy-controls-button-border-color-default: #5b5b5b;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #141414;\n  --xy-edge-label-color-default: #f8f8f8;\n}\n.react-flow__background {\n  background-color: var(--xy-background-color-props, var(--xy-background-color, 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/* Arrowhead marker styles - use CSS custom properties as default */\n.react-flow__arrowhead polyline {\n  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\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__pane.selection .react-flow__panel {\n  pointer-events: none;\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(-15px) 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(-15px) 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__controls.horizontal .react-flow__controls-button {\n    border-bottom: none;\n    border-right: 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  }\n.react-flow__controls.horizontal .react-flow__controls-button:last-child {\n    border-right: 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: 5px;\n  height: 5px;\n  border: 1px solid #fff;\n  border-radius: 1px;\n  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  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);
 
 function getDefaultExportFromCjs (x) {
@@ -10325,6 +10325,25 @@ function getEventHandlerParams({ nodeId, dragItems, nodeLookup, dragging = true,
         nodesFromDragItems,
     ];
 }
+/**
+ * If a selection is being dragged we want to apply the same snap offset to all nodes in the selection.
+ * This function calculates the snap offset based on the first node in the selection.
+ */
+function calculateSnapOffset({ dragItems, snapGrid, x, y, }) {
+    const refDragItem = dragItems.values().next().value;
+    if (!refDragItem) {
+        return null;
+    }
+    const refPos = {
+        x: x - refDragItem.distance.x,
+        y: y - refDragItem.distance.y,
+    };
+    const refPosSnapped = snapPosition(refPos, snapGrid);
+    return {
+        x: refPosSnapped.x - refPos.x,
+        y: refPosSnapped.y - refPos.y,
+    };
+}
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragStop, }) {
@@ -10338,39 +10357,43 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
     let d3Selection = null;
     let abortDrag = false; // prevents unintentional dragging on multitouch
     let nodePositionsChanged = false;
+    // we store the last drag event to be able to use it in the update function
+    let dragEvent = null;
     // public functions
     function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId, nodeClickDistance = 0, }) {
         d3Selection = select(domNode);
-        function updateNodes({ x, y }, dragEvent) {
+        function updateNodes({ x, y }) {
             const { nodeLookup, nodeExtent, snapGrid, snapToGrid, nodeOrigin, onNodeDrag, onSelectionDrag, onError, updateNodePositions, } = getStoreItems();
             lastPos = { x, y };
             let hasChange = false;
-            let nodesBox = { x: 0, y: 0, x2: 0, y2: 0 };
-            if (dragItems.size > 1 && nodeExtent) {
-                const rect = getInternalNodesBounds(dragItems);
-                nodesBox = rectToBox(rect);
-            }
+            const isMultiDrag = dragItems.size > 1;
+            const nodesBox = isMultiDrag && nodeExtent ? rectToBox(getInternalNodesBounds(dragItems)) : null;
+            const multiDragSnapOffset = isMultiDrag && snapToGrid
+                ? calculateSnapOffset({
+                    dragItems,
+                    snapGrid,
+                    x,
+                    y,
+                })
+                : null;
             for (const [id, dragItem] of dragItems) {
+                /*
+                 * if the node is not in the nodeLookup anymore, it was probably deleted while dragging
+                 */
                 if (!nodeLookup.has(id)) {
-                    /*
-                     * if the node is not in the nodeLookup anymore, it was probably deleted while dragging
-                     * and we don't need to update it anymore
-                     */
                     continue;
                 }
                 let nextPosition = { x: x - dragItem.distance.x, y: y - dragItem.distance.y };
                 if (snapToGrid) {
-                    nextPosition = snapPosition(nextPosition, snapGrid);
+                    nextPosition = multiDragSnapOffset
+                        ? {
+                            x: nextPosition.x + multiDragSnapOffset.x,
+                            y: nextPosition.y + multiDragSnapOffset.y,
+                        }
+                        : snapPosition(nextPosition, snapGrid);
                 }
-                /*
-                 * if there is selection with multiple nodes and a node extent is set, we need to adjust the node extent for each node
-                 * based on its position so that the node stays at it's position relative to the selection.
-                 */
-                let adjustedNodeExtent = [
-                    [nodeExtent[0][0], nodeExtent[0][1]],
-                    [nodeExtent[1][0], nodeExtent[1][1]],
-                ];
-                if (dragItems.size > 1 && nodeExtent && !dragItem.extent) {
+                let adjustedNodeExtent = null;
+                if (isMultiDrag && nodeExtent && !dragItem.extent && nodesBox) {
                     const { positionAbsolute } = dragItem.internals;
                     const x1 = positionAbsolute.x - nodesBox.x + nodeExtent[0][0];
                     const x2 = positionAbsolute.x + dragItem.measured.width - nodesBox.x2 + nodeExtent[1][0];
@@ -10385,7 +10408,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
                     nodeId: id,
                     nextPosition,
                     nodeLookup,
-                    nodeExtent: adjustedNodeExtent,
+                    nodeExtent: adjustedNodeExtent ? adjustedNodeExtent : nodeExtent,
                     nodeOrigin,
                     onError,
                 });
@@ -10427,7 +10450,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
                 lastPos.x = (lastPos.x ?? 0) - xMovement / transform[2];
                 lastPos.y = (lastPos.y ?? 0) - yMovement / transform[2];
                 if (await panBy({ x: xMovement, y: yMovement })) {
-                    updateNodes(lastPos, null);
+                    updateNodes(lastPos);
                 }
             }
             autoPanId = requestAnimationFrame(autoPan);
@@ -10467,6 +10490,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
             containerBounds = domNode?.getBoundingClientRect() || null;
             abortDrag = false;
             nodePositionsChanged = false;
+            dragEvent = event.sourceEvent;
             if (nodeDragThreshold === 0) {
                 startDrag(event);
             }
@@ -10477,6 +10501,7 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
             .on('drag', (event) => {
             const { autoPanOnNodeDrag, transform, snapGrid, snapToGrid, nodeDragThreshold, nodeLookup } = getStoreItems();
             const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid, containerBounds });
+            dragEvent = event.sourceEvent;
             if ((event.sourceEvent.type === 'touchmove' && event.sourceEvent.touches.length > 1) ||
                 // if user deletes a node while dragging, we need to abort the drag to prevent errors
                 (nodeId && !nodeLookup.has(nodeId))) {
@@ -10499,9 +10524,8 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
             }
             // skip events without movement
             if ((lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems && dragStarted) {
-                // dragEvent = event.sourceEvent as MouseEvent;
                 mousePosition = getEventPosition(event.sourceEvent, containerBounds);
-                updateNodes(pointerPos, event.sourceEvent);
+                updateNodes(pointerPos);
             }
         })
             .on('end', (event) => {
@@ -10644,14 +10668,13 @@ function isConnectionValid(isInsideConnectionRadius, isHandleValid) {
 }
 
 const alwaysValid = () => true;
-function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodeLookup, lib, autoPanOnConnect, flowId, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onReconnectEnd, updateConnection, getTransform, getFromHandle, autoPanSpeed, dragThreshold = 1, }) {
+function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodeLookup, lib, autoPanOnConnect, flowId, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onReconnectEnd, updateConnection, getTransform, getFromHandle, autoPanSpeed, dragThreshold = 1, handleDomNode, }) {
     // when xyflow is used inside a shadow root we can't use document
     const doc = getHostForElement(event.target);
     let autoPanId = 0;
     let closestHandle;
     const { x, y } = getEventPosition(event);
-    const clickedHandle = doc?.elementFromPoint(x, y);
-    const handleType = getHandleType(edgeUpdaterType, clickedHandle);
+    const handleType = getHandleType(edgeUpdaterType, handleDomNode);
     const containerBounds = domNode?.getBoundingClientRect();
     let connectionStarted = false;
     if (!containerBounds || !handleType) {
@@ -10665,7 +10688,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
     let autoPanStarted = false;
     let connection = null;
     let isValid = false;
-    let handleDomNode = null;
+    let resultHandleDomNode = null;
     // when the user is moving the mouse close to the edge of the canvas while connecting we move the canvas
     function autoPan() {
         if (!autoPanOnConnect || !containerBounds) {
@@ -10738,7 +10761,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
             flowId,
             nodeLookup,
         });
-        handleDomNode = result.handleDomNode;
+        resultHandleDomNode = result.handleDomNode;
         connection = result.connection;
         isValid = isConnectionValid(!!closestHandle, result.isValid);
         const newConnection = {
@@ -10772,7 +10795,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
     }
     function onPointerUp(event) {
         if (connectionStarted) {
-            if ((closestHandle || handleDomNode) && connection && isValid) {
+            if ((closestHandle || resultHandleDomNode) && connection && isValid) {
                 onConnect?.(connection);
             }
             /*
@@ -10795,7 +10818,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
         autoPanStarted = false;
         isValid = false;
         connection = null;
-        handleDomNode = null;
+        resultHandleDomNode = null;
         doc.removeEventListener('mousemove', onPointerMove);
         doc.removeEventListener('mouseup', onPointerUp);
         doc.removeEventListener('touchmove', onPointerMove);
@@ -10859,17 +10882,18 @@ const XYHandle = {
 
 function XYMinimap({ domNode, panZoom, getTransform, getViewScale }) {
     const selection = select(domNode);
-    function update({ translateExtent, width, height, zoomStep = 10, pannable = true, zoomable = true, inversePan = false, }) {
+    function update({ translateExtent, width, height, zoomStep = 1, pannable = true, zoomable = true, inversePan = false, }) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const zoomHandler = (event) => {
-            const transform = getTransform();
             if (event.sourceEvent.type !== 'wheel' || !panZoom) {
                 return;
             }
+            const transform = getTransform();
+            const factor = event.sourceEvent.ctrlKey && isMacOs() ? 10 : 1;
             const pinchDelta = -event.sourceEvent.deltaY *
                 (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) *
                 zoomStep;
-            const nextZoom = transform[2] * Math.pow(2, pinchDelta);
+            const nextZoom = transform[2] * Math.pow(2, pinchDelta * factor);
             panZoom.scaleTo(nextZoom);
         };
         let panStart = [0, 0];
@@ -13974,6 +13998,7 @@ function HandleComponent({ type = 'source', position = Position.Top, isValidConn
             ((isMouseTriggered && event.button === 0) || !isMouseTriggered)) {
             const currentStore = store.getState();
             XYHandle.onPointerDown(event.nativeEvent, {
+                handleDomNode: event.currentTarget,
                 autoPanOnConnect: currentStore.autoPanOnConnect,
                 connectionMode: currentStore.connectionMode,
                 connectionRadius: currentStore.connectionRadius,
@@ -14525,17 +14550,18 @@ function useVisibleEdgeIds(onlyRenderVisible) {
 }
 
 const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }) => {
-    return (jsxRuntimeExports.jsx("polyline", { style: {
-            stroke: color,
-            strokeWidth,
-        }, strokeLinecap: "round", strokeLinejoin: "round", fill: "none", points: "-5,-4 0,0 -5,4" }));
+    const style = {
+        strokeWidth,
+        ...(color && { stroke: color }),
+    };
+    return jsxRuntimeExports.jsx("polyline", { style: style, strokeLinecap: "round", strokeLinejoin: "round", fill: "none", points: "-5,-4 0,0 -5,4" });
 };
 const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }) => {
-    return (jsxRuntimeExports.jsx("polyline", { style: {
-            stroke: color,
-            fill: color,
-            strokeWidth,
-        }, strokeLinecap: "round", strokeLinejoin: "round", points: "-5,-4 0,0 -5,4 -5,-4" }));
+    const style = {
+        strokeWidth,
+        ...(color && { stroke: color, fill: color }),
+    };
+    return jsxRuntimeExports.jsx("polyline", { style: style, strokeLinecap: "round", strokeLinejoin: "round", points: "-5,-4 0,0 -5,4 -5,-4" });
 };
 const MarkerSymbols = {
     [MarkerType.Arrow]: ArrowSymbol,
@@ -14663,7 +14689,7 @@ const EdgeText = memo(EdgeTextComponent);
  * You can see all the props passed to a custom edge by looking at the [`EdgeProps`](/api-reference/types/edge-props) type.
  */
 function BaseEdge({ path, labelX, labelY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, interactionWidth = 20, ...props }) {
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("path", { ...props, d: path, fill: "none", className: cc(['react-flow__edge-path', props.className]) }), interactionWidth && (jsxRuntimeExports.jsx("path", { d: path, fill: "none", strokeOpacity: 0, strokeWidth: interactionWidth, className: "react-flow__edge-interaction" })), label && isNumeric(labelX) && isNumeric(labelY) ? (jsxRuntimeExports.jsx(EdgeText, { x: labelX, y: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius })) : null] }));
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("path", { ...props, d: path, fill: "none", className: cc(['react-flow__edge-path', props.className]) }), interactionWidth ? (jsxRuntimeExports.jsx("path", { d: path, fill: "none", strokeOpacity: 0, strokeWidth: interactionWidth, className: "react-flow__edge-interaction" })) : null, label && isNumeric(labelX) && isNumeric(labelY) ? (jsxRuntimeExports.jsx(EdgeText, { x: labelX, y: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius })) : null] }));
 }
 
 function getControl({ pos, x1, y1, x2, y2 }) {
@@ -14989,6 +15015,7 @@ function EdgeUpdateAnchors({ isReconnectable, reconnectRadius, edge, sourceX, so
             getTransform: () => store.getState().transform,
             getFromHandle: () => store.getState().connection.fromHandle,
             dragThreshold: store.getState().connectionDragThreshold,
+            handleDomNode: event.currentTarget,
         });
     };
     const onReconnectSourceMouseDown = (event) => handleEdgeUpdater(event, { nodeId: edge.target, id: edge.targetHandle ?? null, type: 'target' });
@@ -16250,7 +16277,7 @@ function MiniMapComponent({ style, className, nodeStrokeColor, nodeColor, nodeCl
  * We need to rename the prop to be `CapitalCase` so that JSX will render it as
  * a component properly.
  */
-nodeComponent, bgColor, maskColor, maskStrokeColor, maskStrokeWidth, position = 'bottom-right', onClick, onNodeClick, pannable = false, zoomable = false, ariaLabel, inversePan, zoomStep = 10, offsetScale = 5, }) {
+nodeComponent, bgColor, maskColor, maskStrokeColor, maskStrokeWidth, position = 'bottom-right', onClick, onNodeClick, pannable = false, zoomable = false, ariaLabel, inversePan, zoomStep = 1, offsetScale = 5, }) {
     const store = useStoreApi();
     const svg = useRef(null);
     const { boundingRect, viewBB, rfId, panZoom, translateExtent, flowWidth, flowHeight, ariaLabelConfig } = useStore(selector$1, shallow$1);

package/lib/snippets.js

@@ -1,5 +1,5 @@
-import { B as Button, _ as Text, L as NotificationNote } from './index-dcb15a56.js';
-export { al as AddButton, aq as AddNode, ar as BaseNode, an as CopyText, as as EdgedNode, aj as Flow, at as FrameNode, au as HeaderNode, az as LabeledEdge, av as MapItemNode, aw as NoDataNode, ao as PodContainer, ax as ScrollNode, ay as SkeletonNode, ap as SourceContainer, ag as nodeConfig } from './index-dcb15a56.js';
+import { B as Button, _ as Text, L as NotificationNote } from './index-90161559.js';
+export { al as AddButton, aq as AddNode, ar as BaseNode, an as CopyText, as as EdgedNode, aj as Flow, at as FrameNode, au as HeaderNode, az as LabeledEdge, av as MapItemNode, aw as NoDataNode, ao as PodContainer, ax as ScrollNode, ay as SkeletonNode, ap as SourceContainer, ag as nodeConfig } from './index-90161559.js';
 import React from 'react';
 import { T as Theme, B as BUTTON_TEXTS, b as DISPLAY_TITLES } from './index-86030474.js';
 import { E as EditIcon } from './index-72089d6e.js';

package/lib/store/useFilterStore.d.ts

@@ -32,7 +32,7 @@ interface StoreState {
     setErrors: (metrics: FiltersState['errors']) => void;
     onlyErrors: FiltersState['onlyErrors'];
     setOnlyErrors: (onlyErrors: FiltersState['onlyErrors']) => void;
-    setAll: (params: FiltersState) => void;
+    setAll: (params: Partial<FiltersState>) => void;
     clearAll: () => void;
     getEmptyState: () => FiltersState;
 }

package/lib/types/actions/index.d.ts

@@ -24,6 +24,7 @@ export declare enum ActionKeyTypes {
     LabelsAttributes = "labelsAttributes",
     AnnotationsAttributes = "annotationsAttributes",
     ClusterAttributes = "clusterAttributes",
+    OverwriteExistingValues = "overwriteExistingValues",
     AttributeNamesToDelete = "attributeNamesToDelete",
     Renames = "renames",
     PiiCategories = "piiCategories",
@@ -49,6 +50,7 @@ export interface Action {
         [ActionKeyTypes.LabelsAttributes]?: LabelsAttributes[] | null;
         [ActionKeyTypes.AnnotationsAttributes]?: AnnotationsAttributes[] | null;
         [ActionKeyTypes.ClusterAttributes]?: ClusterAttributes[] | null;
+        [ActionKeyTypes.OverwriteExistingValues]?: boolean | null;
         [ActionKeyTypes.AttributeNamesToDelete]?: string[] | null;
         [ActionKeyTypes.Renames]?: {
             [oldKey: string]: string;
@@ -84,6 +86,7 @@ export interface ActionFormData {
     [ActionKeyTypes.LabelsAttributes]: Action['spec'][ActionKeyTypes.LabelsAttributes];
     [ActionKeyTypes.AnnotationsAttributes]: Action['spec'][ActionKeyTypes.AnnotationsAttributes];
     [ActionKeyTypes.ClusterAttributes]: Action['spec'][ActionKeyTypes.ClusterAttributes];
+    [ActionKeyTypes.OverwriteExistingValues]: Action['spec'][ActionKeyTypes.OverwriteExistingValues];
     [ActionKeyTypes.AttributeNamesToDelete]: Action['spec'][ActionKeyTypes.AttributeNamesToDelete];
     [ActionKeyTypes.Renames]: Action['spec'][ActionKeyTypes.Renames];
     [ActionKeyTypes.PiiCategories]: Action['spec'][ActionKeyTypes.PiiCategories];

package/lib/types.js

@@ -27,6 +27,7 @@ var ActionKeyTypes;
     ActionKeyTypes["AnnotationsAttributes"] = "annotationsAttributes";
     // AddClusterInfo
     ActionKeyTypes["ClusterAttributes"] = "clusterAttributes";
+    ActionKeyTypes["OverwriteExistingValues"] = "overwriteExistingValues";
     // DeleteAttributes
     ActionKeyTypes["AttributeNamesToDelete"] = "attributeNamesToDelete";
     // RenameAttributes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.83",
+  "version": "0.0.85",
   "author": "Odigos",
   "repository": {
     "type": "git",
@@ -85,7 +85,7 @@
     "zustand": "^5.0.6"
   },
   "dependencies": {
-    "@xyflow/react": "^12.8.2",
+    "@xyflow/react": "^12.8.3",
     "javascript-time-ago": "^2.5.11",
     "lottie-react": "^2.4.1",
     "prism-react-renderer": "^2.4.1",
@@ -96,8 +96,8 @@
     "zustand": "^5.0.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.0",
-    "@babel/preset-env": "^7.28.0",
+    "@babel/core": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@eslint/eslintrc": "^3.3.1",
@@ -105,22 +105,22 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.4",
-    "@storybook/addon-docs": "^9.1.1",
+    "@storybook/addon-docs": "^9.1.2",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/react-webpack5": "9.1.1",
-    "@types/node": "^24.2.1",
-    "@types/react": "^19.1.9",
+    "@storybook/react-webpack5": "9.1.2",
+    "@types/node": "^24.3.0",
+    "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "babel-loader": "^10.0.0",
     "babel-plugin-styled-components": "^2.1.4",
-    "eslint": "^9.32.0",
-    "eslint-config-next": "^15.4.5",
-    "eslint-plugin-storybook": "9.1.1",
-    "next": "^15.4.5",
+    "eslint": "^9.33.0",
+    "eslint-config-next": "^15.4.6",
+    "eslint-plugin-storybook": "9.1.2",
+    "next": "^15.4.6",
     "postcss": "^8.5.6",
     "rollup": "^3.29.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "9.1.1",
+    "storybook": "9.1.2",
     "typescript": "^5.9.2"
   }
 }