@likec4/diagram 1.26.1 → 1.27.0

package/dist/likec4diagram/custom/edges/NotePopover.js

@@ -1,33 +1,25 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Popover, PopoverTarget, PopoverDropdown, Stack, ScrollAreaAutosize, Text, CloseButton, Group, Button } from "@mantine/core";
-import { useDebouncedEffect } from "@react-hookz/web";
-import { useState } from "react";
-import { isTruthy, isNonNull } from "remeda";
-import { useDiagramContext, useDiagram } from "../../../hooks/useDiagram.js";
-import { edgeNoteText, edgeNoteCloseButton } from "./NotePopover.css.js";
-import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
-import { stopPropagation } from "../../../utils/xyflow.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Popover, PopoverTarget, PopoverDropdown, Stack, ScrollAreaAutosize, Text, CloseButton, Group, Button } from '@mantine/core';
+import { useDebouncedEffect } from '@react-hookz/web';
+import { useState } from 'react';
+import { isTruthy, isNonNull } from 'remeda';
+import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
+import { edgeNoteText, edgeNoteCloseButton } from './NotePopover.css.js';
+import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
+import { stopPropagation } from '../../../utils/xyflow.js';
+
 const NotePopover = ({ notes, children }) => {
   const {
     isActive,
     isParallel,
     hasNext,
     hasPrevious
-  } = useDiagramContext((s) => {
-    var _a;
-    return {
-      isActive: isNonNull(s.activeWalkthrough),
-      isParallel: isTruthy((_a = s.activeWalkthrough) == null ? void 0 : _a.parallelPrefix),
-      hasNext: s.xyedges.findIndex((e) => {
-        var _a2;
-        return e.id === ((_a2 = s.activeWalkthrough) == null ? void 0 : _a2.stepId);
-      }) < s.xyedges.length - 1,
-      hasPrevious: s.xyedges.findIndex((e) => {
-        var _a2;
-        return e.id === ((_a2 = s.activeWalkthrough) == null ? void 0 : _a2.stepId);
-      }) > 0
-    };
-  });
+  } = useDiagramContext((s) => ({
+    isActive: isNonNull(s.activeWalkthrough),
+    isParallel: isTruthy(s.activeWalkthrough?.parallelPrefix),
+    hasNext: s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId) < s.xyedges.length - 1,
+    hasPrevious: s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId) > 0
+  }));
   const diagram = useDiagram();
   const [isOpened, setIsOpened] = useState(false);
   const portalProps = useMantinePortalProps();
@@ -95,6 +87,5 @@ const NotePopover = ({ notes, children }) => {
     }
   );
 };
-export {
-  NotePopover
-};
+
+export { NotePopover };

package/dist/likec4diagram/custom/edges/RelationshipEdge.d.ts

@@ -1,16 +1,16 @@
-import { EdgeId, NonEmptyArray, Point, Color, ViewId, RelationshipArrowType, RelationshipLineType, BBox } from '@likec4/core';
+import { EdgeId, NonEmptyArray, Point, Color, BBox, RelationshipLineType, RelationshipArrowType, ViewId } from '@likec4/core';
 import { XYPosition } from '@xyflow/react';
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
 export declare const RelationshipEdge: NamedExoticComponent<{
-    source: string;
-    target: string;
-    style?: CSSProperties;
     id: string;
     selected?: boolean;
-    animated?: boolean;
-    deletable?: boolean;
     selectable?: boolean;
+    deletable?: boolean;
+    style?: CSSProperties;
+    source: string;
+    target: string;
+    animated?: boolean;
     sourceX: number;
     sourceY: number;
     targetX: number;
@@ -39,13 +39,13 @@ export declare const RelationshipEdge: NamedExoticComponent<{
         points: NonEmptyArray<Point>;
         technology: string | undefined;
         color: Color | undefined;
-        navigateTo: ViewId<string> | undefined;
+        labelBBox: BBox | null | undefined;
         dir: "forward" | "back" | "both" | undefined;
+        line: RelationshipLineType | undefined;
         head: RelationshipArrowType | undefined;
         tail: RelationshipArrowType | undefined;
-        line: RelationshipLineType | undefined;
+        navigateTo: ViewId<string> | undefined;
         notes: string | undefined;
-        labelBBox: BBox | null | undefined;
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
         hovered?: boolean;

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -1,39 +1,39 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { nonNullable, isStepEdgeId } from "@likec4/core";
-import { useDebouncedEffect } from "@react-hookz/web";
-import { EdgeLabelRenderer } from "@xyflow/react";
-import clsx from "clsx";
-import { line, curveCatmullRomOpen } from "d3-shape";
-import { useState, useRef, useEffect } from "react";
-import { isTruthy, first, last } from "remeda";
-import { useDiagram } from "../../../hooks/useDiagram.js";
-import { VectorImpl, vector } from "../../../utils/vector.js";
-import { isSamePoint, bezierControlPoints, bezierPath } from "../../../utils/xyflow.js";
-import { controlPointsContainer, controlPoint, controlDragging } from "./edges.css.js";
-import { NotePopover } from "./NotePopover.js";
-import { RelationshipsDropdownMenu } from "./RelationshipsDropdownMenu.js";
-import { getNodeIntersectionFromCenterToPoint } from "./utils.js";
-import { customEdge } from "../../../base/primitives/customEdge.js";
-import { useLooseReducedGraphics } from "../../../context/ReduceGraphics.js";
-import { useXYStoreApi, useXYFlow, useXYInternalNode } from "../../../hooks/useXYFlow.js";
-import { useEnabledFeature } from "../../../context/DiagramFeatures.js";
-import { EdgeContainer } from "../../../base/primitives/edge/EdgeContainer.js";
-import { EdgePath } from "../../../base/primitives/edge/EdgePath.js";
-import { EdgeLabel } from "../../../base/primitives/edge/EdgeLabel.js";
-import { EdgeActionButton } from "../../../base/primitives/edge/EdgeActionButton.js";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { nonNullable } from '@likec4/core';
+import { useDebouncedEffect } from '@react-hookz/web';
+import { EdgeLabelRenderer } from '@xyflow/react';
+import clsx from 'clsx';
+import { line, curveCatmullRomOpen } from 'd3-shape';
+import { useState, useRef, useEffect } from 'react';
+import { isTruthy, first, last } from 'remeda';
+import { ZIndexes } from '../../../base/const.js';
+import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
+import { useDiagram, useDiagramActorSnapshot } from '../../../hooks/useDiagram.js';
+import { useXYStoreApi, useXYFlow, useXYInternalNode } from '../../../hooks/useXYFlow.js';
+import { VectorImpl, vector } from '../../../utils/vector.js';
+import { isSamePoint, bezierControlPoints, bezierPath } from '../../../utils/xyflow.js';
+import { controlDragging, controlPointsContainer, controlPoint } from './edges.css.js';
+import { NotePopover } from './NotePopover.js';
+import { RelationshipsDropdownMenu } from './RelationshipsDropdownMenu.js';
+import { getNodeIntersectionFromCenterToPoint } from './utils.js';
+import { customEdge } from '../../../base/primitives/customEdge.js';
+import { useIsPanning } from '../../../context/ReduceGraphics.js';
+import { EdgeLabel } from '../../../base/primitives/edge/EdgeLabel.js';
+import { EdgeActionButton } from '../../../base/primitives/edge/EdgeActionButton.js';
+import { EdgeContainer } from '../../../base/primitives/edge/EdgeContainer.js';
+import { EdgePath } from '../../../base/primitives/edge/EdgePath.js';
+import { EdgeLabelContainer } from '../../../base/primitives/edge/EdgeLabelContainer.js';
+
 const curve = line().curve(curveCatmullRomOpen).x((d) => d.x).y((d) => d.y);
+const selectActiveStepId = (s) => s.context.activeWalkthrough?.stepId ?? null;
 const RelationshipEdge = customEdge((props) => {
-  var _a;
-  const isReducedGraphicsMode = useLooseReducedGraphics();
+  const isPanning = useIsPanning();
   const [isControlPointDragging, setIsControlPointDragging] = useState(false);
   const xyflowStore = useXYStoreApi();
   const xyflow = useXYFlow();
   const diagram = useDiagram();
-  const { enableNavigateTo, enableEdgeEditing, enableRelationshipDetails } = useEnabledFeature(
-    "NavigateTo",
-    "EdgeEditing",
-    "RelationshipDetails"
-  );
+  const activeWalkthroughStep = useDiagramActorSnapshot(selectActiveStepId);
+  const { enableNavigateTo, enableEdgeEditing, enableRelationshipDetails } = useEnabledFeatures();
   const {
     id,
     source,
@@ -52,7 +52,8 @@ const RelationshipEdge = customEdge((props) => {
       labelBBox,
       labelXY,
       ...data
-    }
+    },
+    style = {}
   } = props;
   const navigateTo = enableNavigateTo ? data.navigateTo : void 0;
   const sourceNode = nonNullable(useXYInternalNode(source), `source node ${source} not found`);
@@ -81,10 +82,10 @@ const RelationshipEdge = customEdge((props) => {
   } else {
     edgePath = bezierPath(points);
   }
-  let labelX = (labelBBox == null ? void 0 : labelBBox.x) ?? 0, labelY = (labelBBox == null ? void 0 : labelBBox.y) ?? 0;
+  let labelX = labelBBox?.x ?? 0, labelY = labelBBox?.y ?? 0;
   const [labelPos, setLabelPos] = useState({
-    x: (labelXY == null ? void 0 : labelXY.x) ?? labelX,
-    y: (labelXY == null ? void 0 : labelXY.y) ?? labelY
+    x: labelXY?.x ?? labelX,
+    y: labelXY?.y ?? labelY
   });
   const svgPathRef = useRef(null);
   useEffect(() => {
@@ -213,7 +214,6 @@ const RelationshipEdge = customEdge((props) => {
       return;
     }
     xyflow.updateEdgeData(id, (edge) => {
-      var _a2;
       const points2 = [
         new VectorImpl(sourceX, sourceY),
         ...controlPoints.map(vector) || [],
@@ -236,77 +236,93 @@ const RelationshipEdge = customEdge((props) => {
           }
         }
       }
-      const newControlPoints = ((_a2 = edge.data.controlPoints) == null ? void 0 : _a2.slice()) || [];
+      const newControlPoints = edge.data.controlPoints?.slice() || [];
       newControlPoints.splice(insertionIndex, 0, newPoint);
       return { controlPoints: newControlPoints };
     });
     diagram.scheduleSaveManualLayout();
     e.stopPropagation();
   };
-  let renderLabel;
-  if (!isControlPointDragging) {
+  let zIndex = ZIndexes.Edge;
+  if (hovered || active) {
+    zIndex = ZIndexes.Element + 1;
+  }
+  let edgeLabel = /* @__PURE__ */ jsx(EdgeLabel, { edgeProps: props, children: !isControlPointDragging && navigateTo && /* @__PURE__ */ jsx(
+    EdgeActionButton,
+    {
+      ...props,
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.navigateTo(navigateTo);
+      }
+    }
+  ) });
+  if (!isControlPointDragging && !isPanning) {
     const notes = props.data.notes;
-    if (notes && isStepEdgeId(props.id) && ((_a = diagram.getContext().activeWalkthrough) == null ? void 0 : _a.stepId) === props.id) {
-      renderLabel = (props2) => /* @__PURE__ */ jsx(NotePopover, { notes, children: /* @__PURE__ */ jsx("div", { ...props2 }) });
-    } else if (enableRelationshipDetails && (!isReducedGraphicsMode || hovered || selected || active)) {
-      renderLabel = (props2) => /* @__PURE__ */ jsx(
+    if (notes && activeWalkthroughStep === props.id) {
+      edgeLabel = /* @__PURE__ */ jsx(NotePopover, { notes, children: edgeLabel });
+    } else if (enableRelationshipDetails) {
+      edgeLabel = /* @__PURE__ */ jsx(
         RelationshipsDropdownMenu,
         {
           disabled: !!dimmed,
           source,
           target,
           edgeId,
-          children: /* @__PURE__ */ jsx("div", { ...props2 })
+          children: edgeLabel
         }
       );
     }
   }
-  return /* @__PURE__ */ jsxs(EdgeContainer, { ...props, className: clsx(isControlPointDragging && controlDragging), children: [
-    /* @__PURE__ */ jsx(EdgePath, { ...props, svgPath: edgePath, ref: svgPathRef, onEdgePointerDown }),
-    /* @__PURE__ */ jsx(
-      EdgeLabel,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(EdgeContainer, { ...props, className: clsx(isControlPointDragging && controlDragging), children: [
+      /* @__PURE__ */ jsx(EdgePath, { ...props, svgPath: edgePath, ref: svgPathRef, onEdgePointerDown }),
+      /* @__PURE__ */ jsx(
+        EdgeLabelContainer,
+        {
+          edgeProps: props,
+          labelPosition: {
+            x: labelX,
+            y: labelY,
+            translate: isModified ? "translate(-50%, 0)" : void 0
+          },
+          children: edgeLabel
+        }
+      )
+    ] }),
+    enableEdgeEditing && controlPoints.length > 0 && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
+      EdgeContainer,
       {
-        edgeProps: props,
-        labelPosition: {
-          x: labelX,
-          y: labelY,
-          translate: isModified ? "translate(-50%, 0)" : void 0
+        component: "svg",
+        className: controlPointsContainer,
+        ...props,
+        style: {
+          ...style,
+          zIndex
         },
-        ...renderLabel && { renderRoot: renderLabel },
-        children: !isControlPointDragging && navigateTo && /* @__PURE__ */ jsx(
-          EdgeActionButton,
+        children: /* @__PURE__ */ jsx(
+          "g",
           {
-            ...props,
-            onClick: (e) => {
+            onContextMenu: (e) => {
+              e.preventDefault();
               e.stopPropagation();
-              diagram.navigateTo(navigateTo);
-            }
+            },
+            children: controlPoints.map((p, i) => /* @__PURE__ */ jsx(
+              "circle",
+              {
+                onPointerDown: (e) => onControlPointerDown(i, e),
+                className: clsx("nodrag nopan", controlPoint),
+                cx: Math.round(p.x),
+                cy: Math.round(p.y),
+                r: 3
+              },
+              i
+            ))
           }
         )
       }
-    ),
-    enableEdgeEditing && controlPoints.length > 0 && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(EdgeContainer, { component: "svg", className: controlPointsContainer, ...props, children: /* @__PURE__ */ jsx(
-      "g",
-      {
-        onContextMenu: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        },
-        children: controlPoints.map((p, i) => /* @__PURE__ */ jsx(
-          "circle",
-          {
-            onPointerDown: (e) => onControlPointerDown(i, e),
-            className: clsx("nodrag nopan", controlPoint),
-            cx: Math.round(p.x),
-            cy: Math.round(p.y),
-            r: 3
-          },
-          i
-        ))
-      }
-    ) }) })
+    ) })
   ] });
 });
-export {
-  RelationshipEdge
-};
+
+export { RelationshipEdge };

package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.css.d.ts

@@ -2,3 +2,4 @@ export declare const menuDropdown: string;
 export declare const menuItemRelationship: string;
 export declare const endpoint: string;
 export declare const title: string;
+export declare const arrowFromTo: string;

package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.css.js

@@ -1,11 +1,38 @@
-/* empty css                                             */
-var menuDropdown = "_1g39cqs0";
-var menuItemRelationship = "_1g39cqs1";
-var endpoint = "_1g39cqs2";
-var title = "_1g39cqs3";
-export {
-  endpoint,
-  menuDropdown,
-  menuItemRelationship,
-  title
-};
+import { css } from '@likec4/styles/css';
+
+const menuDropdown = css({
+  overflowY: "scroll",
+  minWidth: "250px",
+  maxWidth: "min(90vw, 500px)"
+});
+const menuItemRelationship = css({
+  gap: 4
+});
+const endpoint = css({
+  display: "block",
+  fontSize: "xxs",
+  fontWeight: 500,
+  whiteSpace: "nowrap",
+  padding: "2px 4px",
+  borderRadius: 2,
+  background: `likec4.palette.fill/30`,
+  lineHeight: "[1.11]",
+  mixBlendMode: "hard-light",
+  color: {
+    _light: `[color-mix(in srgb, {colors.likec4.palette.stroke}, {colors.likec4.mixColor} 60%)]`,
+    _dark: "likec4.palette.loContrast"
+  }
+  // _dark: {
+  //   background: `likec4.palette.fill/60`,
+  // },
+});
+const title = css({
+  whiteSpaceCollapse: "preserve-breaks",
+  fontSize: "xs"
+});
+css({
+  whiteSpaceCollapse: "preserve-breaks",
+  fontSize: "xs"
+});
+
+export { endpoint, menuDropdown, menuItemRelationship, title };

package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.d.ts

@@ -1,13 +1,13 @@
 import { EdgeId } from '@likec4/core';
-import { PropsWithChildren, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { PropsWithChildren, ForwardRefExoticComponent, RefAttributes, MemoExoticComponent } from 'react';
 import { TooltipProps } from '@mantine/core';
 export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & {
     component?: any;
     renderRoot?: (props: Record<string, any>) => React.ReactNode;
 }>;
-export declare function RelationshipsDropdownMenu({ edgeId, source, target, disabled, children, }: PropsWithChildren<{
+export declare const RelationshipsDropdownMenu: MemoExoticComponent<({ edgeId, source, target, disabled, children, }: PropsWithChildren<{
     edgeId: EdgeId;
     source: string;
     target: string;
     disabled?: boolean | undefined;
-}>): import("react/jsx-runtime").JSX.Element;
+}>) => import("react/jsx-runtime").JSX.Element>;

package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.js

@@ -1,18 +1,19 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { DiagramNode, nameFromFqn } from "@likec4/core";
-import { Menu, MenuTarget, MenuDropdown, MenuLabel, MenuDivider, Box, ActionIcon, MenuItem, Stack, Group, Text, TooltipGroup, Space, Tooltip as Tooltip$1 } from "@mantine/core";
-import { IconInfoCircle, IconArrowRight, IconZoomScan, IconFileSymlink } from "@tabler/icons-react";
-import clsx from "clsx";
-import { useCallback, Fragment as Fragment$1, forwardRef } from "react";
-import { pipe, map, filter, isTruthy, partition } from "remeda";
-import { Link } from "../../../components/Link.js";
-import { useDiagramContext, useDiagram } from "../../../hooks/useDiagram.js";
-import { findDiagramNode, findDiagramEdge } from "../../../state/utils.js";
-import { menuDropdown, endpoint, title, menuItemRelationship } from "./RelationshipsDropdownMenu.css.js";
-import { useLikeC4Model } from "../../../likec4model/useLikeC4Model.js";
-import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
-import { useEnabledFeature, IfEnabled } from "../../../context/DiagramFeatures.js";
-import { useDiagramEventHandlers } from "../../../context/DiagramEventHandlers.js";
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { DiagramNode, nameFromFqn } from '@likec4/core';
+import { cx, css } from '@likec4/styles/css';
+import { Menu, MenuTarget, MenuDropdown, MenuLabel, MenuDivider, Box, ActionIcon, MenuItem, Stack, Group, Text, TooltipGroup, Space, Tooltip as Tooltip$1 } from '@mantine/core';
+import { IconInfoCircle, IconArrowRight, IconZoomScan, IconFileSymlink } from '@tabler/icons-react';
+import { memo, useCallback, Fragment as Fragment$1, forwardRef } from 'react';
+import { pipe, map, filter, isTruthy, partition } from 'remeda';
+import { Link } from '../../../components/Link.js';
+import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
+import { findDiagramNode, findDiagramEdge } from '../../../state/utils.js';
+import { menuDropdown, endpoint, title, menuItemRelationship } from './RelationshipsDropdownMenu.css.js';
+import { useLikeC4Model } from '../../../likec4model/useLikeC4Model.js';
+import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
+import { useEnabledFeature, IfEnabled } from '../../../context/DiagramFeatures.js';
+import { useDiagramEventHandlers } from '../../../context/DiagramEventHandlers.js';
+
 const stopPropagation = (e) => e.stopPropagation();
 const Tooltip = Tooltip$1.withProps({
   color: "gray",
@@ -24,13 +25,13 @@ const Tooltip = Tooltip$1.withProps({
   offset: 8,
   withinPortal: false
 });
-function RelationshipsDropdownMenu({
+const RelationshipsDropdownMenu = memo(({
   edgeId,
   source,
   target,
   disabled = false,
   children
-}) {
+}) => {
   const { diagramEdge, sourceNode, targetNode } = useDiagramContext((ctx) => ({
     diagramEdge: findDiagramEdge(ctx, edgeId),
     sourceNode: findDiagramNode(ctx, source),
@@ -128,7 +129,7 @@ function RelationshipsDropdownMenu({
       ]
     }
   );
-}
+});
 const Relationship = forwardRef(({
   className,
   relationship: r,
@@ -137,26 +138,25 @@ const Relationship = forwardRef(({
   targetNode,
   ...props
 }, ref) => {
-  var _a, _b;
   const diagram = useDiagram();
   const { enableNavigateTo } = useEnabledFeature("NavigateTo");
   const { onOpenSource } = useDiagramEventHandlers();
   const viewId = diagram.currentView.id;
   const sourceId = getShortId(r, r.source.id, sourceNode);
   const targetId = getShortId(r, r.target.id, targetNode);
-  const navigateTo = enableNavigateTo && ((_a = r.navigateTo) == null ? void 0 : _a.id) !== viewId ? (_b = r.navigateTo) == null ? void 0 : _b.id : void 0;
+  const navigateTo = enableNavigateTo && r.navigateTo?.id !== viewId ? r.navigateTo?.id : void 0;
   const links = r.links;
-  return /* @__PURE__ */ jsxs(Stack, { ref, className: clsx(menuItemRelationship, className), ...props, children: [
+  return /* @__PURE__ */ jsxs(Stack, { ref, className: cx(menuItemRelationship, className), ...props, children: [
     /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
-      /* @__PURE__ */ jsx(Text, { component: "div", className: endpoint, "data-likec4-color": sourceNode.color, children: sourceId }),
-      /* @__PURE__ */ jsx(IconArrowRight, { stroke: 2.5, size: 11 }),
-      /* @__PURE__ */ jsx(Text, { component: "div", className: endpoint, "data-likec4-color": targetNode.color, children: targetId }),
+      /* @__PURE__ */ jsx(Text, { component: "div", className: cx(css({ likec4Palette: sourceNode.color }), endpoint), children: sourceId }),
+      /* @__PURE__ */ jsx(IconArrowRight, { stroke: 2.5, size: "11px", opacity: 0.65 }),
+      /* @__PURE__ */ jsx(Text, { component: "div", className: cx(css({ likec4Palette: targetNode.color }), endpoint), children: targetId }),
       (navigateTo || !!onOpenSource) && /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 100, children: [
         /* @__PURE__ */ jsx(Space, { w: "xs" }),
         navigateTo && /* @__PURE__ */ jsx(Tooltip, { label: "Open dynamic view", children: /* @__PURE__ */ jsx(
           ActionIcon,
           {
-            className: clsx("nodrag nopan"),
+            className: cx("nodrag nopan"),
             size: "sm",
             radius: "sm",
             variant: "default",
@@ -172,7 +172,7 @@ const Relationship = forwardRef(({
         /* @__PURE__ */ jsx(IfEnabled, { feature: "Vscode", children: /* @__PURE__ */ jsx(Tooltip, { label: "Open source", children: /* @__PURE__ */ jsx(
           ActionIcon,
           {
-            className: clsx("nodrag nopan"),
+            className: cx("nodrag nopan"),
             size: "sm",
             radius: "sm",
             variant: "default",
@@ -204,7 +204,5 @@ function getShortId(r, actualEndpointId, diagramNode) {
   const diagramNodeId = r.isDeploymentRelation() ? diagramNode.id : DiagramNode.modelRef(diagramNode) || "";
   return nameFromFqn(diagramNodeId) + actualEndpointId.slice(diagramNodeId.length);
 }
-export {
-  RelationshipsDropdownMenu,
-  Tooltip
-};
+
+export { RelationshipsDropdownMenu, Tooltip };

package/dist/likec4diagram/custom/edges/edges.css.js

@@ -1,9 +1,44 @@
-/* empty css                         */
-var controlPointsContainer = "_1fw3wl00";
-var controlPoint = "_1fw3wl01";
-var controlDragging = "_1fw3wl02";
-export {
-  controlDragging,
-  controlPoint,
-  controlPointsContainer
-};
+import { css } from '@likec4/styles/css';
+
+const isSelected = ".react-flow__edge.selected";
+const controlPointsContainer = css({
+  overflow: "visible",
+  position: "absolute",
+  pointerEvents: "none",
+  top: 0,
+  left: 0,
+  mixBlendMode: "normal"
+});
+const controlPoint = css({
+  fill: `likec4.relation.stroke`,
+  stroke: `likec4.relation.stroke`,
+  fillOpacity: 0.75,
+  strokeWidth: 1,
+  cursor: "grab",
+  pointerEvents: "auto",
+  visibility: "hidden",
+  _hover: {
+    fillOpacity: 1,
+    stroke: "mantine.colors.primary.filledHover",
+    strokeWidth: 10,
+    transition: "stroke 100ms ease-out, stroke-width 100ms ease-out"
+  },
+  [`:where(${isSelected}, [data-likec4-hovered='true']) &`]: {
+    visibility: "visible",
+    transition: "fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out",
+    transitionDelay: "50ms",
+    fillOpacity: 1,
+    strokeWidth: 5
+  }
+});
+const controlDragging = css({
+  cursor: "grabbing",
+  "& *": {
+    cursor: "grabbing !important"
+  },
+  "& .react-flow__edge-interaction": {
+    cursor: "grabbing !important"
+  }
+});
+
+export { controlDragging, controlPoint, controlPointsContainer };

package/dist/likec4diagram/custom/edges/utils.js

@@ -1,6 +1,7 @@
-import "@xyflow/react";
-import { getNodeDimensions } from "@xyflow/system";
-import { VectorImpl, vector } from "../../../utils/vector.js";
+import '@xyflow/react';
+import { getNodeDimensions } from '@xyflow/system';
+import { VectorImpl, vector } from '../../../utils/vector.js';
+
 function getNodeCenter(node) {
   const { width, height } = getNodeDimensions(node);
   const { x, y } = node.internals.positionAbsolute;
@@ -18,7 +19,5 @@ function getNodeIntersectionFromCenterToPoint(intersectionNode, target, nodeMarg
   const scale = Math.min(Math.abs(xScale), Math.abs(yScale));
   return vector(v).mul(scale).add(nodeCenter);
 }
-export {
-  getNodeCenter,
-  getNodeIntersectionFromCenterToPoint
-};
+
+export { getNodeCenter, getNodeIntersectionFromCenterToPoint };