@likec4/diagram 1.41.0 → 1.42.0

package/dist/overlays/relationship-details/hooks.d.ts

@@ -1,8 +1,7 @@
-import { EdgeId, Fqn, ViewId, RelationId, Color, RelationshipLineType, RichTextOrEmpty, BBox } from '@likec4/core';
+import { EdgeId, Fqn, ViewId, BBox } from '@likec4/core';
 import { RelationshipDetailsActorRef, RelationshipDetailsSnapshot, Events } from './actor';
-import { Context, ReactNode, CSSProperties, AriaRole, SVGAttributes } from 'react';
-import { GeneralHelpers, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
-import { EdgeMarkerType, HandleType } from '@xyflow/system';
+import { Context } from 'react';
+import { GeneralHelpers, ViewportHelperFunctions, ReactFlowStore, ReactFlowActions } from '@xyflow/react';
 export declare const RelationshipDetailsActorContext: Context<RelationshipDetailsActorRef | null>;
 export declare function useRelationshipDetailsActor(): RelationshipDetailsActorRef;
 export declare function useRelationshipDetailsState<T = unknown>(selector: (state: RelationshipDetailsSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
@@ -20,382 +19,11 @@ export declare function useRelationshipDetails(): {
             edgeId?: never;
         };
         viewId: ViewId;
-        xyflow: ( GeneralHelpers<import("./_types").RelationshipDetailsTypes.Node, {
-            id: string;
-            source: string;
-            target: string;
-            sourceHandle?: string | null;
-            targetHandle?: string | null;
-            animated?: boolean;
-            hidden?: boolean;
-            deletable?: boolean;
-            selectable?: boolean;
-            selected?: boolean;
-            markerStart?: EdgeMarkerType;
-            markerEnd?: EdgeMarkerType;
-            zIndex?: number;
-            ariaLabel?: string;
-            interactionWidth?: number;
-            label?: ReactNode;
-            labelStyle?: CSSProperties;
-            labelShowBg?: boolean;
-            labelBgStyle?: CSSProperties;
-            labelBgPadding?: [number, number];
-            labelBgBorderRadius?: number;
-            style?: CSSProperties;
-            className?: string;
-            reconnectable?: boolean | HandleType;
-            focusable?: boolean;
-            ariaRole?: AriaRole;
-            domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
-            type: "relationship";
-            data: {
-                hovered?: boolean;
-                active?: boolean;
-                dimmed?: import("../../base").Base.Dimmed;
-                relationId: RelationId;
-                color: Color | undefined;
-                label: string | null;
-                technology?: string | undefined | undefined;
-                navigateTo: ViewId | null;
-                line: RelationshipLineType;
-                description: RichTextOrEmpty;
-            };
-        }> & ViewportHelperFunctions & {
+        xyflow: ( GeneralHelpers<import("./_types").RelationshipDetailsTypes.AnyNode, import("./_types").RelationshipDetailsTypes.Edge> & ViewportHelperFunctions & {
             viewportInitialized: boolean;
         }) | null;
         xystore: {
-            getState: () => ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
-                id: string;
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: EdgeMarkerType;
-                markerEnd?: EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: ReactNode;
-                labelStyle?: CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: CSSProperties;
-                className?: string;
-                reconnectable?: boolean | HandleType;
-                focusable?: boolean;
-                ariaRole?: AriaRole;
-                domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
-                type: "relationship";
-                data: {
-                    hovered?: boolean;
-                    active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
-                    relationId: RelationId;
-                    color: Color | undefined;
-                    label: string | null;
-                    technology?: string | undefined | undefined;
-                    navigateTo: ViewId | null;
-                    line: RelationshipLineType;
-                    description: RichTextOrEmpty;
-                };
-            }>;
-            setState: (partial: ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
-                id: string;
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: EdgeMarkerType;
-                markerEnd?: EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: ReactNode;
-                labelStyle?: CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: CSSProperties;
-                className?: string;
-                reconnectable?: boolean | HandleType;
-                focusable?: boolean;
-                ariaRole?: AriaRole;
-                domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
-                type: "relationship";
-                data: {
-                    hovered?: boolean;
-                    active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
-                    relationId: RelationId;
-                    color: Color | undefined;
-                    label: string | null;
-                    technology?: string | undefined | undefined;
-                    navigateTo: ViewId | null;
-                    line: RelationshipLineType;
-                    description: RichTextOrEmpty;
-                };
-            }> | Partial< ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
-                id: string;
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: EdgeMarkerType;
-                markerEnd?: EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: ReactNode;
-                labelStyle?: CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: CSSProperties;
-                className?: string;
-                reconnectable?: boolean | HandleType;
-                focusable?: boolean;
-                ariaRole?: AriaRole;
-                domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
-                type: "relationship";
-                data: {
-                    hovered?: boolean;
-                    active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
-                    relationId: RelationId;
-                    color: Color | undefined;
-                    label: string | null;
-                    technology?: string | undefined | undefined;
-                    navigateTo: ViewId | null;
-                    line: RelationshipLineType;
-                    description: RichTextOrEmpty;
-                };
-            }>> | ((state: ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
-                id: string;
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: EdgeMarkerType;
-                markerEnd?: EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: ReactNode;
-                labelStyle?: CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: CSSProperties;
-                className?: string;
-                reconnectable?: boolean | HandleType;
-                focusable?: boolean;
-                ariaRole?: AriaRole;
-                domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
-                type: "relationship";
-                data: {
-                    hovered?: boolean;
-                    active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
-                    relationId: RelationId;
-                    color: Color | undefined;
-                    label: string | null;
-                    technology?: string | undefined | undefined;
-                    navigateTo: ViewId | null;
-                    line: RelationshipLineType;
-                    description: RichTextOrEmpty;
-                };
-            }>) => ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
-                id: string;
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: EdgeMarkerType;
-                markerEnd?: EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: ReactNode;
-                labelStyle?: CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: CSSProperties;
-                className?: string;
-                reconnectable?: boolean | HandleType;
-                focusable?: boolean;
-                ariaRole?: AriaRole;
-                domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
-                type: "relationship";
-                data: {
-                    hovered?: boolean;
-                    active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
-                    relationId: RelationId;
-                    color: Color | undefined;
-                    label: string | null;
-                    technology?: string | undefined | undefined;
-                    navigateTo: ViewId | null;
-                    line: RelationshipLineType;
-                    description: RichTextOrEmpty;
-                };
-            }> | Partial< ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
-                id: string;
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: EdgeMarkerType;
-                markerEnd?: EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: ReactNode;
-                labelStyle?: CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: CSSProperties;
-                className?: string;
-                reconnectable?: boolean | HandleType;
-                focusable?: boolean;
-                ariaRole?: AriaRole;
-                domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
-                type: "relationship";
-                data: {
-                    hovered?: boolean;
-                    active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
-                    relationId: RelationId;
-                    color: Color | undefined;
-                    label: string | null;
-                    technology?: string | undefined | undefined;
-                    navigateTo: ViewId | null;
-                    line: RelationshipLineType;
-                    description: RichTextOrEmpty;
-                };
-            }>>), replace?: boolean | undefined) => void;
-            subscribe: (listener: (state: ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
-                id: string;
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: EdgeMarkerType;
-                markerEnd?: EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: ReactNode;
-                labelStyle?: CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: CSSProperties;
-                className?: string;
-                reconnectable?: boolean | HandleType;
-                focusable?: boolean;
-                ariaRole?: AriaRole;
-                domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
-                type: "relationship";
-                data: {
-                    hovered?: boolean;
-                    active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
-                    relationId: RelationId;
-                    color: Color | undefined;
-                    label: string | null;
-                    technology?: string | undefined | undefined;
-                    navigateTo: ViewId | null;
-                    line: RelationshipLineType;
-                    description: RichTextOrEmpty;
-                };
-            }>, prevState: ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
-                id: string;
-                source: string;
-                target: string;
-                sourceHandle?: string | null;
-                targetHandle?: string | null;
-                animated?: boolean;
-                hidden?: boolean;
-                deletable?: boolean;
-                selectable?: boolean;
-                selected?: boolean;
-                markerStart?: EdgeMarkerType;
-                markerEnd?: EdgeMarkerType;
-                zIndex?: number;
-                ariaLabel?: string;
-                interactionWidth?: number;
-                label?: ReactNode;
-                labelStyle?: CSSProperties;
-                labelShowBg?: boolean;
-                labelBgStyle?: CSSProperties;
-                labelBgPadding?: [number, number];
-                labelBgBorderRadius?: number;
-                style?: CSSProperties;
-                className?: string;
-                reconnectable?: boolean | HandleType;
-                focusable?: boolean;
-                ariaRole?: AriaRole;
-                domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
-                type: "relationship";
-                data: {
-                    hovered?: boolean;
-                    active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
-                    relationId: RelationId;
-                    color: Color | undefined;
-                    label: string | null;
-                    technology?: string | undefined | undefined;
-                    navigateTo: ViewId | null;
-                    line: RelationshipLineType;
-                    description: RichTextOrEmpty;
-                };
-            }>) => void) => () => void;
+            getState: () => ReactFlowStore<import("./_types").RelationshipDetailsTypes.AnyNode, import("./_types").RelationshipDetailsTypes.Edge> & ReactFlowActions<import("./_types").RelationshipDetailsTypes.AnyNode, import("./_types").RelationshipDetailsTypes.Edge>;
         } | null;
         initialized: {
             xydata: boolean;

package/dist/overlays/relationship-details/layout-to-xyflow.js

@@ -14,7 +14,6 @@ function layoutResultToXYFlow(layout) {
     },
     []
   ));
-  const ns = "";
   const nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
   let next;
   while (next = queue.dequeue()) {
@@ -26,14 +25,14 @@ function layoutResultToXYFlow(layout) {
       }
     }
     const position = {
-      x: node.position[0],
-      y: node.position[1]
+      x: node.x,
+      y: node.y
     };
     if (parent) {
-      position.x -= parent.position[0];
-      position.y -= parent.position[1];
+      position.x -= parent.x;
+      position.y -= parent.y;
     }
-    const id = ns + node.id;
+    const id = node.id;
     const base = {
       id,
       draggable: false,
@@ -49,7 +48,7 @@ function layoutResultToXYFlow(layout) {
       initialWidth: node.width,
       initialHeight: node.height,
       ...parent && {
-        parentId: ns + parent.id
+        parentId: parent.id
       }
     };
     const fqn = node.modelRef;
@@ -61,6 +60,7 @@ function layoutResultToXYFlow(layout) {
             ...base,
             type: "compound",
             data: {
+              id,
               column: node.column,
               title: node.title,
               color: node.color,
@@ -81,6 +81,7 @@ function layoutResultToXYFlow(layout) {
             ...base,
             type: "element",
             data: {
+              id,
               column: node.column,
               fqn,
               title: node.title,
@@ -113,12 +114,12 @@ function layoutResultToXYFlow(layout) {
     line = "dashed",
     ...edge
   } of layout.edges) {
-    const id = ns + edge.id;
+    const id = edge.id;
     xyedges.push({
       id,
       type: "relationship",
-      source: ns + source,
-      target: ns + target,
+      source,
+      target,
       sourceHandle: edge.sourceHandle,
       targetHandle: edge.targetHandle,
       // selectable: selectable,

package/dist/overlays/relationship-details/layout.d.ts

@@ -1,5 +1,5 @@
-import { DiagramEdge, DiagramNode, DiagramView, Fqn, RelationId, RichTextOrEmpty } from '@likec4/core/types';
-import { AnyAux, LikeC4ViewModel } from '@likec4/core/model';
+import { AnyAux, DiagramEdge, DiagramNode, DiagramView, Fqn, RelationId, RichTextOrEmpty } from '@likec4/core/types';
+import { LikeC4ViewModel } from '@likec4/core/model';
 import { Except } from 'type-fest';
 import { RelationshipDetailsTypes } from './_types';
 import { RelationshipDetailsViewData } from './compute';

package/dist/overlays/relationship-details/layout.js

@@ -1,7 +1,8 @@
 import { treeFromElements } from '@likec4/core/compute-view/relationships';
+import { exact } from '@likec4/core/types';
 import dagre from '@dagrejs/dagre';
 import { ifind, DefaultMap, invariant } from '@likec4/core/utils';
-import { pipe, filter, mapToObj, find, map, tap, reduce, sortBy, prop } from 'remeda';
+import { pipe, filter, mapToObj, omit, find, map, tap, reduce, sortBy, prop } from 'remeda';
 
 const Sizes = {
   dagre: {
@@ -232,12 +233,11 @@ function layoutRelationshipDetails(data, scope) {
     const inheritFromNode = scope?.findNodeWithElement(element.id);
     const scopedAncestor = scope && !inheritFromNode ? ifind(element.ancestors(), (a) => !!scope.findNodeWithElement(a.id))?.id : null;
     const inheritFromNodeOrAncestor = inheritFromNode ?? (scopedAncestor && scope?.findNodeWithElement(scopedAncestor));
-    return {
+    return exact({
       id,
       parent: parentId ?? null,
       x: position.x,
       y: position.y,
-      position: [position.x, position.y],
       title: element.title,
       description: element.summary,
       technology: element.technology,
@@ -255,10 +255,10 @@ function layoutRelationshipDetails(data, scope) {
         width,
         height
       },
-      style: {
+      style: omit({
         ...(inheritFromNode ?? inheritFromNodeOrAncestor)?.style,
         ...element.$element.style
-      },
+      }, ["shape", "color", "icon"]),
       navigateTo,
       ...children.length > 0 && { depth: nodeDepth(id) },
       children,
@@ -269,7 +269,7 @@ function layoutRelationshipDetails(data, scope) {
         in: sortedPorts(id, "in", inPorts),
         out: sortedPorts(id, "out", outPorts)
       }
-    };
+    });
   });
   return {
     bounds: {

package/dist/overlays/relationships-browser/RelationshipsBrowser.d.ts

@@ -1,49 +1,8 @@
+import { RelationshipsBrowserTypes } from './_types';
 import { RelationshipsBrowserActorRef } from './actor';
-import { FunctionComponent, CSSProperties, ReactNode } from 'react';
-import { Position } from '@xyflow/system';
-import { Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
+import { FunctionComponent } from 'react';
 export declare const edgeTypes: {
-    relationship: FunctionComponent<{
-        id: string;
-        selected?: boolean;
-        selectable?: boolean;
-        deletable?: boolean;
-        style?: CSSProperties;
-        animated?: boolean;
-        source: string;
-        target: string;
-        sourceX: number;
-        sourceY: number;
-        targetX: number;
-        targetY: number;
-        sourcePosition: Position;
-        targetPosition: Position;
-        label?: ReactNode;
-        labelStyle?: CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        sourceHandleId?: string | null;
-        targetHandleId?: string | null;
-        markerStart?: string;
-        markerEnd?: string;
-        pathOptions?: any;
-        interactionWidth?: number;
-        data: import("../../base").Base.EdgeData & {
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../../base").Base.Dimmed;
-            sourceFqn: Fqn;
-            targetFqn: Fqn;
-            relations: NonEmptyArray<RelationId>;
-            color: Color | undefined;
-            label: string | null;
-            navigateTo: ViewId | null;
-            line: RelationshipLineType;
-            existsInCurrentView: boolean;
-        };
-    }>;
+    relationship: FunctionComponent<RelationshipsBrowserTypes.EdgeProps>;
 };
 export type RelationshipsBrowserProps = {
     actorRef: RelationshipsBrowserActorRef;

package/dist/overlays/relationships-browser/RelationshipsBrowser.js

@@ -12,10 +12,11 @@ import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelations
 import { useRelationshipsView } from './layout.js';
 import { SelectElement } from './SelectElement.js';
 import { RelationshipEdge } from './custom/edgeTypes.js';
-import { EmptyNode, CompoundNode, ElementNode } from './custom/nodeTypes.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import { EmptyNode } from './custom/EmptyNode.js';
+import { CompoundNode, ElementNode } from './custom/nodeTypes.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const nodeTypes = {
   element: ElementNode,
@@ -64,16 +65,19 @@ const RelationshipsBrowserXYFlow = memo(() => {
       nodeTypes,
       edgeTypes,
       fitView: false,
-      onNodeClick: useCallbackRef((e, node) => {
+      onNodeClick: useCallbackRef((_e, node) => {
+        _e.stopPropagation();
         browser.send({ type: "xyflow.nodeClick", node });
       }),
-      onEdgeClick: useCallbackRef((e, edge) => {
+      onEdgeClick: useCallbackRef((_e, edge) => {
+        _e.stopPropagation();
         browser.send({ type: "xyflow.edgeClick", edge });
       }),
-      onPaneClick: useCallbackRef((e) => {
+      onPaneClick: useCallbackRef((_e) => {
+        _e.stopPropagation();
         browser.send({ type: "xyflow.paneClick" });
       }),
-      onDoubleClick: useCallbackRef((e) => {
+      onDoubleClick: useCallbackRef((_e) => {
         browser.send({ type: "xyflow.paneDblClick" });
       }),
       onViewportResize: useCallbackRef(() => {

package/dist/overlays/relationships-browser/SelectElement.js

@@ -2,13 +2,13 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { ancestorsFqn } from '@likec4/core';
 import { useTree, Group, Box, Popover, PopoverTarget, Button, Text, PopoverDropdown, ScrollAreaAutosize, Tree, ActionIcon, Tooltip, SegmentedControl } from '@mantine/core';
 import { memo, useRef, useEffect } from 'react';
+import { useLikeC4ElementsTree } from '../../hooks/useLikeC4ElementsTree.js';
+import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
 import * as SelectElement_css from './SelectElement.css.js';
 import { scrollArea } from './SelectElement.css.js';
-import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
-import { useLikeC4ElementsTree } from '../../likec4model/useLikeC4ElementsTree.js';
-import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const selector2 = (state) => {
   const subjectExistsInScope = state.context.layouted?.subjectExistsInScope ?? false;