@likec4/diagram 1.44.0 → 1.46.0

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

@@ -6,38 +6,44 @@ const controlPointsContainer = css({
   pointerEvents: "none",
   top: "0",
   left: "0",
-  mixBlendMode: "normal"
+  mixBlendMode: {
+    _dark: "screen",
+    _light: "multiply"
+  }
 });
 const controlPoint = css({
-  fill: `var(--likec4-palette-relation-stroke)`,
-  stroke: `var(--likec4-palette-relation-stroke)`,
-  fillOpacity: 0.75,
-  strokeWidth: 1,
+  fill: `[var(--xy-edge-stroke)]`,
+  stroke: `transparent`,
+  fillOpacity: 0.5,
+  strokeWidth: 10,
+  r: 4,
   cursor: "grab",
-  pointerEvents: "auto",
+  pointerEvents: "all",
   visibility: "hidden",
-  _hover: {
-    fillOpacity: 1,
-    stroke: "mantine.colors.primary.filledHover",
-    strokeWidth: 18,
-    transition: "stroke 100ms ease-out, stroke-width 100ms ease-out"
-  },
+  transitionDuration: "120ms",
+  transitionProperty: "visibility, fill, fill-opacity, r",
+  transitionTimingFunction: "inOut",
+  transitionDelay: "20ms",
   [`:where([data-likec4-selected='true'], [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: 12
-  }
-});
-const controlDragging = css({
-  cursor: "grabbing",
-  "& *": {
-    cursor: "grabbing !important"
+    transitionTimingFunction: "out",
+    transitionDelay: "0ms"
+  },
+  [`:where([data-likec4-selected='true']) &`]: {
+    r: 6
+  },
+  [`:is([data-likec4-hovered='true']) &`]: {
+    r: 8
+  },
+  _hover: {
+    fill: "mantine.colors.primary.filledHover",
+    r: 10,
+    transitionDuration: "100ms"
   },
-  "& .react-flow__edge-interaction": {
-    cursor: "grabbing !important"
+  _groupActive: {
+    cursor: "grabbing"
   }
 });
 
-export { controlDragging, controlPoint, controlPointsContainer };
+export { controlPoint, controlPointsContainer };

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

@@ -2,7 +2,7 @@ import { deepEqual } from 'fast-equals';
 import { useState } from 'react';
 import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
 import { useUpdateEffect } from '../../../hooks/useUpdateEffect.js';
-import { vector } from '../../../utils/vector.js';
+import { vector } from '@likec4/core/geometry';
 import { bezierControlPoints } from '../../../utils/xyflow.js';
 
 function useControlPoints({
@@ -19,8 +19,8 @@ function useControlPoints({
     const next = data.controlPoints ?? bezierControlPoints(data.points);
     setControlPoints((prev) => deepEqual(prev, next) ? prev : next);
   }, [
-    data.controlPoints?.map((p) => `${p.x},${p.y}`).join("|") ?? "",
-    data.points.map((p) => `${p[0]},${p[1]}`).join("|")
+    data.controlPoints?.map((p) => `${Math.round(p.x)},${Math.round(p.y)}`).join("|") ?? "",
+    data.points.map((p) => `${Math.round(p[0])},${Math.round(p[1])}`).join("|")
   ]);
   const insertControlPoint = useCallbackRef(({ x, y }) => {
     const sourceV = vector(sourceX, sourceY);
@@ -30,13 +30,13 @@ function useControlPoints({
       ...controlPoints.map(vector) || [],
       data.dir === "back" ? sourceV : targetV
     ];
-    const newPointV = vector(Math.round(x), Math.round(y));
+    const newPointV = vector(x, y).round();
     let insertionIndex = 0;
     let minDistance = Infinity;
     for (let i = 0; i < points.length - 1; i++) {
       const a = points[i], b = points[i + 1], fromCurrentToNext = b.subtract(a), fromCurrentToNew = newPointV.subtract(a), fromNextToNew = newPointV.subtract(b);
       if (fromCurrentToNext.dot(fromCurrentToNew) * fromCurrentToNext.dot(fromNextToNew) < 0) {
-        const distanceToEdge = Math.abs(fromCurrentToNext.cross(fromCurrentToNew).length() / fromCurrentToNext.length());
+        const distanceToEdge = Math.abs(fromCurrentToNext.cross(fromCurrentToNew)) / fromCurrentToNext.length();
         if (distanceToEdge < minDistance) {
           minDistance = distanceToEdge;
           insertionIndex = i;

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

@@ -3,10 +3,10 @@ import { line, curveCatmullRomOpen } from 'd3-shape';
 import { useCallback } from 'react';
 import { isTruthy, first, last } from 'remeda';
 import { useXYStore } from '../../../hooks/useXYFlow.js';
-import { extractMinimalInternalNode, getNodeIntersectionFromCenterToPoint, bezierPath, isEqualMinimalInternalNodes } from '../../../utils/xyflow.js';
+import { nodeToRect, getNodeIntersectionFromCenterToPoint, bezierPath, isEqualRects } from '../../../utils/xyflow.js';
 
 const curve = line().curve(curveCatmullRomOpen.alpha(0.7)).x((d) => Math.round(d.x)).y((d) => Math.round(d.y));
-const isSameNodes = (a, b) => isEqualMinimalInternalNodes(a.sourceNode, b.sourceNode) && isEqualMinimalInternalNodes(a.targetNode, b.targetNode);
+const isSameRects = (a, b) => isEqualRects(a.sourceNode, b.sourceNode) && isEqualRects(a.targetNode, b.targetNode);
 function useRelationshipEdgePath({
   props: {
     sourceX,
@@ -28,11 +28,11 @@ function useRelationshipEdgePath({
       const sourceNode2 = nonNullable(nodeLookup.get(source), `source node ${source} not found`);
       const targetNode2 = nonNullable(nodeLookup.get(target), `target node ${target} not found`);
       return {
-        sourceNode: extractMinimalInternalNode(sourceNode2),
-        targetNode: extractMinimalInternalNode(targetNode2)
+        sourceNode: nodeToRect(sourceNode2),
+        targetNode: nodeToRect(targetNode2)
       };
     }, [source, target]),
-    isSameNodes
+    isSameRects
   );
   const isModified = isTruthy(data.controlPoints) || isControlPointDragging;
   if (isModified) {

package/dist/likec4diagram/custom/nodes/ElementActions.js

@@ -5,8 +5,8 @@ import { hasAtLeast } from 'remeda';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import '@xstate/react';
 import { useDiagram } from '../../../hooks/safeContext.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
 import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
 
 const compareElementActionsProps = (a, b) => {

package/dist/likec4diagram/custom/nodes/NodeDrifts.d.ts

@@ -0,0 +1,6 @@
+import { Types } from '../../types';
+export type NodeDriftsProps = {
+    nodeProps: Types.NodeProps;
+    position?: 'top' | 'bottom';
+};
+export declare function NodeDrifts({ nodeProps: { data }, position, }: NodeDriftsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/likec4diagram/custom/nodes/{ElementNodeDrifts.js → NodeDrifts.js}

@@ -1,32 +1,31 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Box } from '@likec4/styles/jsx';
 import { Notification, Text } from '@mantine/core';
-import { NodeToolbar, Position } from '@xyflow/react';
+import { Position, NodeToolbar } from '@xyflow/react';
 
-function ElementNodeDrifts({ data }) {
+function NodeDrifts({
+  nodeProps: { data },
+  position = "bottom"
+}) {
   const drifts = data.drifts;
   if (!drifts || drifts.length === 0) {
     return null;
   }
+  const toolbarPosition = position === "top" ? Position.Top : Position.Bottom;
   return /* @__PURE__ */ jsx(
     Box,
     {
       className: "likec4-node-drifts",
       css: {
-        position: "absolute",
-        inset: "0",
-        pointerEvents: "none",
+        display: "contents",
         "& + .likec4-element-shape": {
           outlineColor: "likec4.compare.manual.outline",
-          outlineWidth: {
-            base: "2px",
-            _light: "4px"
-          },
-          outlineStyle: "solid",
-          outlineOffset: "1"
+          outlineWidth: "4px",
+          outlineStyle: "dashed",
+          outlineOffset: "1.5"
         }
       },
-      children: /* @__PURE__ */ jsx(NodeToolbar, { isVisible: data.hovered === true, align: "start", position: Position.Bottom, children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(NodeToolbar, { isVisible: data.hovered === true, align: "start", position: toolbarPosition, children: /* @__PURE__ */ jsx(
         Notification,
         {
           color: "orange",
@@ -43,4 +42,4 @@ function ElementNodeDrifts({ data }) {
   );
 }
 
-export { ElementNodeDrifts };
+export { NodeDrifts };

package/dist/likec4diagram/custom/nodes/SequenceActorNode.js

@@ -5,6 +5,7 @@ import { Handle, Position } from '@xyflow/react';
 import { isTruthy } from 'remeda';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { ElementActions } from './ElementActions.js';
+import { NodeDrifts } from './NodeDrifts.js';
 import { ElementDetailsButtonWithHandler } from './nodes.js';
 import { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
 import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
@@ -68,7 +69,7 @@ const ActorStepPort = ({
 };
 const hasModelFqn = (data) => isTruthy(data.modelFqn);
 function SequenceActorNode(props) {
-  const { enableElementDetails } = useEnabledFeatures();
+  const { enableElementDetails, enableCompareWithLatest } = useEnabledFeatures();
   const data = props.data;
   const {
     id,
@@ -105,6 +106,7 @@ function SequenceActorNode(props) {
       }
     ),
     /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+      enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
       /* @__PURE__ */ jsx(ElementShape, { ...props }),
       /* @__PURE__ */ jsx(ElementData, { ...props }),
       hasModelFqn(data) && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -128,7 +130,7 @@ function SequenceParallelArea(props) {
         borderWidth: 1,
         "--_color": {
           base: "var(--likec4-palette-stroke)",
-          _dark: "[color-mix(in srgb, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]"
+          _dark: "[color-mix(in oklab, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]"
         },
         borderColor: "[var(--_color)/30]",
         backgroundColor: "var(--likec4-palette-fill)/15",

package/dist/likec4diagram/custom/nodes/index.d.ts

@@ -2,6 +2,7 @@ export { CompoundActions } from './CompoundActions';
 export { DeploymentElementActions, ElementActions } from './ElementActions';
 export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode, } from './nodes';
 export { SequenceActorNode, SequenceParallelArea } from './SequenceActorNode';
+export { NodeDrifts, type NodeDriftsProps } from './NodeDrifts';
 export * from './CompoundActions';
 export * from './ElementActions';
 export * from './toolbar/CompoundToolbar';

package/dist/likec4diagram/custom/nodes/nodes.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { css } from '@likec4/styles/css';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import '@xstate/react';
 import 'fast-equals';
@@ -6,7 +7,7 @@ import 'react';
 import { useDiagram } from '../../../hooks/safeContext.js';
 import { CompoundActions } from './CompoundActions.js';
 import { DeploymentElementActions, ElementActions } from './ElementActions.js';
-import { ElementNodeDrifts } from './ElementNodeDrifts.js';
+import { NodeDrifts } from './NodeDrifts.js';
 import { CompoundDeploymentToolbar, CompoundElementToolbar } from './toolbar/CompoundToolbar.js';
 import { DeploymentElementToolbar, ElementToolbar } from './toolbar/ElementToolbar.js';
 import { CompoundNodeContainer } from '../../../base-primitives/compound/CompoundNodeContainer.js';
@@ -52,7 +53,7 @@ function CompoundDetailsButtonWithHandler(props) {
 function ElementNode(props) {
   const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-    enableCompareWithLatest && /* @__PURE__ */ jsx(ElementNodeDrifts, { ...props }),
+    enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
     /* @__PURE__ */ jsx(ElementData, { ...props }),
     enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
@@ -65,7 +66,7 @@ function ElementNode(props) {
 function DeploymentNode(props) {
   const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-    enableCompareWithLatest && /* @__PURE__ */ jsx(ElementNodeDrifts, { ...props }),
+    enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
     /* @__PURE__ */ jsx(ElementData, { ...props }),
     enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
@@ -75,31 +76,68 @@ function DeploymentNode(props) {
     /* @__PURE__ */ jsx(DefaultHandles, {})
   ] });
 }
+const compoundHasDrifts = css({
+  outlineColor: "likec4.compare.manual.outline",
+  outlineWidth: "4px",
+  outlineStyle: "dashed",
+  outlineOffset: "1.5"
+});
+const hasDrifts = (props) => {
+  return props.data.drifts && props.data.drifts.length > 0;
+};
 function CompoundElementNode(props) {
-  const { enableElementDetails, enableReadOnly } = useEnabledFeatures();
-  return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-    /* @__PURE__ */ jsx(CompoundActions, { ...props }),
-    enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
-    !enableReadOnly && /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] });
+  const { enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
+  const showDrifts = enableCompareWithLatest && hasDrifts(props);
+  return /* @__PURE__ */ jsxs(
+    CompoundNodeContainer,
+    {
+      className: showDrifts ? compoundHasDrifts : void 0,
+      nodeProps: props,
+      children: [
+        enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
+        /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+        /* @__PURE__ */ jsx(CompoundActions, { ...props }),
+        enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
+        !enableReadOnly && /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }),
+        /* @__PURE__ */ jsx(DefaultHandles, {})
+      ]
+    }
+  );
 }
 function CompoundDeploymentNode(props) {
-  const { enableElementDetails, enableReadOnly } = useEnabledFeatures();
-  return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-    /* @__PURE__ */ jsx(CompoundActions, { ...props }),
-    enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
-    !enableReadOnly && /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] });
+  const { enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
+  const showDrifts = enableCompareWithLatest && hasDrifts(props);
+  return /* @__PURE__ */ jsxs(
+    CompoundNodeContainer,
+    {
+      className: showDrifts ? compoundHasDrifts : void 0,
+      nodeProps: props,
+      children: [
+        enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
+        /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+        /* @__PURE__ */ jsx(CompoundActions, { ...props }),
+        enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
+        !enableReadOnly && /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }),
+        /* @__PURE__ */ jsx(DefaultHandles, {})
+      ]
+    }
+  );
 }
 function ViewGroupNode(props) {
-  return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] });
+  const { enableCompareWithLatest } = useEnabledFeatures();
+  const showDrifts = enableCompareWithLatest && hasDrifts(props);
+  return /* @__PURE__ */ jsxs(
+    CompoundNodeContainer,
+    {
+      className: showDrifts ? compoundHasDrifts : void 0,
+      nodeProps: props,
+      children: [
+        enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
+        /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+        /* @__PURE__ */ jsx(DefaultHandles, {})
+      ]
+    }
+  );
 }
 
 export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode };

package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.js

@@ -7,8 +7,8 @@ import { GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
 import { ColorButton } from './ColorButton.js';
 import { Toolbar } from './Toolbar.js';
 import { useHandlers } from './useHandlers.js';
-import IconSelector from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconCheck from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
+import IconSelector from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconCheck from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
 
 function ElementToolbar(props) {
   const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();

package/dist/likec4diagram/custom/nodes/toolbar/_shared.js

@@ -5,8 +5,8 @@ import 'fast-equals';
 import 'react';
 import { useDiagram } from '../../../../hooks/safeContext.js';
 import { useDiagramEventHandlers } from '../../../../context/DiagramEventHandlers.js';
-import IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-import IconTransform from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconTransform from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",

package/dist/likec4diagram/relationship-popover/RelationshipPopover.js

@@ -4,11 +4,11 @@ import { nameFromFqn } from '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
 import { VStack, styled, HStack, Box } from '@likec4/styles/jsx';
 import { bleed } from '@likec4/styles/patterns';
-import { Divider, ScrollAreaAutosize, Button, TooltipGroup, Tooltip as Tooltip$1, Text, ActionIcon } from '@mantine/core';
+import { Divider, ScrollAreaAutosize, Button, TooltipGroup, Tooltip as Tooltip$1, Text, ActionIcon, Notification } from '@mantine/core';
 import { useActorRef, useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
 import { memo, useEffect, useCallback, useRef, useState, useLayoutEffect, Fragment, forwardRef } from 'react';
-import { isEmpty, pipe, map, filter, isTruthy, partition, clamp } from 'remeda';
+import { isEmpty, pipe, map, filter, isTruthy, partition, clamp, entries } from 'remeda';
 import { Link } from '../../components/Link.js';
 import { PortalToContainer } from '../../components/PortalToContainer.js';
 import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
@@ -21,9 +21,10 @@ import { endpoint, title } from './styles.css.js';
 import { useDiagram } from '../../hooks/safeContext.js';
 import { useRootContainerRef } from '../../context/RootContainerContext.js';
 import { roundDpr } from '../../utils/roundDpr.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
 import { Markdown } from '../../base-primitives/Markdown.js';
 
 function selectDiagramContext(c) {
@@ -143,7 +144,7 @@ const RelationshipPopover = memo(() => {
   ) });
 });
 const getEdgeLabelElement = (edgeId, container) => {
-  return container?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? null;
+  return container?.querySelector(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? container?.querySelector(`.likec4-edge-middle-point[data-edge-id="${edgeId}"]`) ?? null;
 };
 const POPOVER_PADDING = 8;
 const RelationshipPopoverInternal = ({
@@ -157,7 +158,7 @@ const RelationshipPopoverInternal = ({
   onMouseLeave
 }) => {
   const ref = useRef(null);
-  const { enableNavigateTo, enableVscode } = useEnabledFeatures();
+  const { enableNavigateTo, enableVscode, enableCompareWithLatest } = useEnabledFeatures();
   const { onOpenSource } = useDiagramEventHandlers();
   const containerRef = useRootContainerRef();
   const [referenceEl, setReferenceEl] = useState(null);
@@ -178,24 +179,26 @@ const RelationshipPopoverInternal = ({
           offset(4),
           autoPlacement({
             crossAxis: true,
-            padding: POPOVER_PADDING,
+            // padding: POPOVER_PADDING,
             allowedPlacements: [
               "bottom-start",
+              "bottom-end",
+              "left-start",
               "top-start",
+              "top-end",
               "right-start",
               "right-end",
               "left-end"
             ]
           }),
           size({
-            padding: POPOVER_PADDING,
             apply({ availableHeight, availableWidth, elements }) {
               if (wasCanceled) {
                 return;
               }
               Object.assign(elements.floating.style, {
-                maxWidth: `${clamp(roundDpr(availableWidth), { min: 200, max: 400 })}px`,
-                maxHeight: `${clamp(roundDpr(availableHeight), { min: 0, max: 500 })}px`
+                maxWidth: `${clamp(roundDpr(availableWidth), { min: 220, max: 400 })}px`,
+                maxHeight: `${clamp(roundDpr(availableHeight), { min: 100, max: 500 })}px`
               });
             }
           }),
@@ -254,7 +257,8 @@ const RelationshipPopoverInternal = ({
       styles: {
         viewport: {
           overscrollBehavior: "contain",
-          minWidth: 180
+          minWidth: 200,
+          minHeight: 40
         }
       },
       className: cx(
@@ -281,6 +285,7 @@ const RelationshipPopoverInternal = ({
             paddingTop: "2"
           },
           children: [
+            enableCompareWithLatest && /* @__PURE__ */ jsx(EdgeDrifts, { diagramEdge }),
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -321,6 +326,25 @@ const RelationshipPopoverInternal = ({
     }
   );
 };
+const EdgeDrifts = ({ diagramEdge }) => {
+  const drifts = diagramEdge.drifts;
+  if (!drifts || drifts.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Notification,
+    {
+      color: "orange",
+      withBorder: false,
+      withCloseButton: false,
+      title: "Changes:",
+      children: drifts.map((drift) => /* @__PURE__ */ jsxs(Text, { mt: 2, size: "sm", lh: "xs", children: [
+        "- ",
+        drift
+      ] }, drift))
+    }
+  );
+};
 const Relationship = forwardRef(({
   viewId,
   relationship: r,
@@ -333,6 +357,65 @@ const Relationship = forwardRef(({
   const targetId = getEndpointId(r, "target", targetNode);
   const navigateTo = onNavigateTo && r.navigateTo?.id !== viewId ? r.navigateTo?.id : void 0;
   const links = r.links;
+  const metadataEntries = r.hasMetadata() ? entries(r.getMetadata()).sort(([a], [b]) => a.localeCompare(b)) : null;
+  const metadataTooltipLabel = metadataEntries && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          fontWeight: 600,
+          fontSize: "10px",
+          color: "#868e96",
+          marginBottom: "2px",
+          letterSpacing: "0.5px",
+          textTransform: "uppercase"
+        },
+        children: "Metadata"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          borderTop: "1px solid rgba(0, 0, 0, 0.1)",
+          paddingTop: "6px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "6px"
+        },
+        children: metadataEntries.map(([key, value]) => {
+          const displayValue = Array.isArray(value) ? value.join(", ") : value;
+          return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "12px", fontSize: "12px", lineHeight: "1.4" }, children: [
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                style: {
+                  fontWeight: 600,
+                  minWidth: "110px",
+                  color: "#495057"
+                },
+                children: [
+                  key,
+                  ":"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  color: "#212529",
+                  wordBreak: "break-word",
+                  flex: 1
+                },
+                children: displayValue
+              }
+            )
+          ] }, key);
+        })
+      }
+    )
+  ] });
   return /* @__PURE__ */ jsxs(
     VStack,
     {
@@ -388,7 +471,37 @@ const Relationship = forwardRef(({
             }
           ) })
         ] }) }),
-        /* @__PURE__ */ jsx(Box, { className: title, children: r.title || "untitled" }),
+        /* @__PURE__ */ jsxs(HStack, { gap: "xs", alignItems: "center", children: [
+          /* @__PURE__ */ jsx(Box, { className: title, children: r.title || "untitled" }),
+          metadataTooltipLabel && /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              label: metadataTooltipLabel,
+              w: 350,
+              position: "right",
+              offset: 10,
+              openDelay: 300,
+              withArrow: true,
+              bg: "white",
+              c: "dark",
+              withinPortal: true,
+              styles: {
+                tooltip: {
+                  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+                  border: "1px solid #dee2e6"
+                }
+              },
+              children: /* @__PURE__ */ jsx(Box, { display: "inline-flex", children: /* @__PURE__ */ jsx(
+                IconInfoCircle,
+                {
+                  size: 14,
+                  opacity: 0.5,
+                  style: { flexShrink: 0, cursor: "help" }
+                }
+              ) })
+            }
+          )
+        ] }),
         r.kind && /* @__PURE__ */ jsxs(HStack, { gap: "2", children: [
           /* @__PURE__ */ jsx(Label, { children: "kind" }),
           /* @__PURE__ */ jsx(Text, { size: "xs", className: css({ userSelect: "all" }), children: r.kind })
@@ -397,7 +510,7 @@ const Relationship = forwardRef(({
           /* @__PURE__ */ jsx(Label, { children: "technology" }),
           /* @__PURE__ */ jsx(Text, { size: "xs", className: css({ userSelect: "all" }), children: r.technology })
         ] }),
-        r.description.nonEmpty && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        r.summary.nonEmpty && /* @__PURE__ */ jsxs(Fragment$1, { children: [
           /* @__PURE__ */ jsx(Label, { children: "description" }),
           /* @__PURE__ */ jsx(
             Box,
@@ -411,7 +524,7 @@ const Relationship = forwardRef(({
                   _dark: "mantine.colors.dark[4]"
                 }
               },
-              children: /* @__PURE__ */ jsx(Markdown, { value: r.description, fontSize: "sm" })
+              children: /* @__PURE__ */ jsx(Markdown, { value: r.summary, fontSize: "sm", textScale: 0.875 })
             }
           )
         ] }),

package/dist/likec4diagram/relationship-popover/actor.d.ts

@@ -57,7 +57,7 @@ declare const _actorLogic: StateMachine<RelationshipPopoverActorContext, Relatio
         params: unknown;
     };
 }>, "open timeout" | "close timeout" | "long idle", "idle" | "opening" | {
-    active: "opened" | "hovered" | "closing";
+    active: "hovered" | "opened" | "closing";
 }, "opened", NonReducibleUnknown, NonReducibleUnknown, EventObject, MetaObject, {
     readonly id: "breadcrumbs";
     readonly context: () => {