@likec4/diagram 1.46.4 → 1.48.0

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

@@ -7,6 +7,7 @@ import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { ElementActions } from './ElementActions.js';
 import { NodeDrifts } from './NodeDrifts.js';
 import { ElementDetailsButtonWithHandler } from './nodes.js';
+import { ElementToolbar } from './toolbar/ElementToolbar.js';
 import { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
 import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
 import { ElementData } from '../../../base-primitives/element/ElementData.js';
@@ -67,9 +68,9 @@ const ActorStepPort = ({
     )
   ] });
 };
-const hasModelFqn = (data) => isTruthy(data.modelFqn);
+const hasModelFqn = (node) => "modelFqn" in node.data && isTruthy(node.data.modelFqn);
 function SequenceActorNode(props) {
-  const { enableElementDetails, enableCompareWithLatest } = useEnabledFeatures();
+  const { enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
   const data = props.data;
   const {
     id,
@@ -109,9 +110,10 @@ function SequenceActorNode(props) {
       enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
       /* @__PURE__ */ jsx(ElementShape, { ...props }),
       /* @__PURE__ */ jsx(ElementData, { ...props }),
-      hasModelFqn(data) && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(ElementActions, { ...props, data }),
-        enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { id, data })
+      hasModelFqn(props) && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ElementActions, { ...props }),
+        enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { id, data }),
+        !enableReadOnly && /* @__PURE__ */ jsx(ElementToolbar, { ...props })
       ] })
     ] }),
     ports.map((p) => /* @__PURE__ */ jsx(ActorStepPort, { port: p, data: props.data }, p.id))

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

@@ -5,6 +5,7 @@ import '@xstate/react';
 import 'fast-equals';
 import 'react';
 import { useDiagram } from '../../../hooks/safeContext.js';
+import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
 import { CompoundActions } from './CompoundActions.js';
 import { DeploymentElementActions, ElementActions } from './ElementActions.js';
 import { NodeDrifts } from './NodeDrifts.js';
@@ -17,9 +18,27 @@ import { CompoundDetailsButton } from '../../../base-primitives/compound/Compoun
 import { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
 import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
 import { ElementData } from '../../../base-primitives/element/ElementData.js';
-import { ElementTags } from '../../../base-primitives/element/ElementTags.js';
 import { ElementDetailsButton } from '../../../base-primitives/element/ElementDetailsButton.js';
+import { ElementTags as ElementTags$1 } from '../../../base-primitives/element/ElementTags.js';
 
+function ElementTags(props) {
+  const diagram = useDiagram();
+  return /* @__PURE__ */ jsx(
+    ElementTags$1,
+    {
+      onTagClick: useCallbackRef((tag) => {
+        diagram.openSearch(tag);
+      }),
+      onTagMouseEnter: useCallbackRef((tag) => {
+        diagram.send({ type: "tag.highlight", tag });
+      }),
+      onTagMouseLeave: useCallbackRef((_tag) => {
+        diagram.send({ type: "tag.unhighlight" });
+      }),
+      ...props
+    }
+  );
+}
 function ElementDetailsButtonWithHandler(props) {
   const diagram = useDiagram();
   const fqn = props.data.modelFqn;
@@ -60,7 +79,7 @@ function ElementNode(props) {
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
     enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     !enableReadOnly && /* @__PURE__ */ jsx(ElementToolbar, { ...props }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
+    /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
   ] });
 }
 function DeploymentNode(props) {
@@ -73,7 +92,7 @@ function DeploymentNode(props) {
     /* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
     enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     !enableReadOnly && /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
+    /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
   ] });
 }
 const compoundHasDrifts = css({
@@ -99,7 +118,7 @@ function CompoundElementNode(props) {
         /* @__PURE__ */ jsx(CompoundActions, { ...props }),
         enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
         !enableReadOnly && /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }),
-        /* @__PURE__ */ jsx(DefaultHandles, {})
+        /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
       ]
     }
   );
@@ -118,7 +137,7 @@ function CompoundDeploymentNode(props) {
         /* @__PURE__ */ jsx(CompoundActions, { ...props }),
         enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
         !enableReadOnly && /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }),
-        /* @__PURE__ */ jsx(DefaultHandles, {})
+        /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
       ]
     }
   );
@@ -134,7 +153,7 @@ function ViewGroupNode(props) {
       children: [
         enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
         /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-        /* @__PURE__ */ jsx(DefaultHandles, {})
+        /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
       ]
     }
   );

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

@@ -1,5 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Popover, PopoverTarget, Button, ColorSwatch, PopoverDropdown, Space, Divider, Stack, TooltipGroup, Flex, Tooltip, CheckIcon, rem, Slider } from '@mantine/core';
+import { Flex } from '@likec4/styles/jsx';
+import { Popover, PopoverTarget, Button, ColorSwatch, PopoverDropdown, Space, Divider, Stack, TooltipGroup, Tooltip, CheckIcon, rem, Slider } from '@mantine/core';
 import { useUpdateEffect } from '@react-hookz/web';
 import { useState } from 'react';
 import { keys } from 'remeda';
@@ -19,16 +20,16 @@ function ColorButton({
     Popover,
     {
       clickOutsideEvents: ["pointerdown", "mousedown", "click"],
-      position: "right-end",
+      position: "top-start",
       offset: 2,
       withinPortal: false,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Button, { variant: "subtle", color: "gray", size: "compact-xs", px: 3, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Button, { variant: "subtle", color: "gray", size: "xs", px: 6, children: /* @__PURE__ */ jsx(
           ColorSwatch,
           {
             color: theme.colors[elementColor].elements.fill,
-            size: 14,
+            size: 16,
             withShadow: true,
             style: { color: "#fff", cursor: "pointer" }
           }
@@ -78,7 +79,7 @@ function ColorSwatches({
   };
   const otherColors = keys(theme.colors).filter((color) => !SemanticColors.includes(color));
   return /* @__PURE__ */ jsx(Stack, { gap: 2, onMouseLeave: () => onColorPreview(null), children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 1e3, closeDelay: 300, children: [
-    /* @__PURE__ */ jsx(Flex, { maw: 120, gap: "6", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: SemanticColors.map((color) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Flex, { maxW: "120px", gap: "1.5", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: SemanticColors.map((color) => /* @__PURE__ */ jsx(
       Tooltip,
       {
         label: color,
@@ -106,8 +107,8 @@ function ColorSwatches({
       Flex,
       {
         mt: "sm",
-        maw: 110,
-        gap: "6",
+        maxW: "110px",
+        gap: "1.5",
         justify: "flex-start",
         align: "flex-start",
         direction: "row",

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

@@ -1,8 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Box, SegmentedControl } from '@mantine/core';
-import { useState, useEffect } from 'react';
 import { useEnabledFeatures } from '../../../../context/DiagramFeatures.js';
-import { GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
+import { BorderStyleOption, GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
 import { ColorButton } from './ColorButton.js';
 import { Toolbar } from './Toolbar.js';
 import { useHandlers } from './useHandlers.js';
@@ -89,40 +87,5 @@ function CompoundDeploymentToolbar(props) {
     }
   );
 }
-function BorderStyleOption({
-  elementBorderStyle = "dashed",
-  onChange
-}) {
-  const [value, setValue] = useState(elementBorderStyle);
-  useEffect(() => {
-    setValue(elementBorderStyle);
-  }, [elementBorderStyle]);
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-    SegmentedControl,
-    {
-      size: "xs",
-      fullWidth: true,
-      withItemsBorders: false,
-      value,
-      onChange: (v) => {
-        const border = v;
-        setValue(border);
-        onChange({ border });
-      },
-      styles: {
-        label: {
-          paddingTop: "0.5",
-          paddingBottom: "0.5"
-        }
-      },
-      data: [
-        { label: "Solid", value: "solid" },
-        { label: "Dashed", value: "dashed" },
-        { label: "Dotted", value: "dotted" },
-        { label: "None", value: "none" }
-      ]
-    }
-  ) });
-}
 
 export { CompoundDeploymentToolbar, CompoundElementToolbar };

package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.d.ts

@@ -1,3 +1,8 @@
+import { Fqn } from '@likec4/core/types';
 import { Types } from '../../../types';
-export declare function ElementToolbar(props: Types.NodeProps<'element'>): import("react/jsx-runtime").JSX.Element;
+export declare function ElementToolbar(props: Types.NodeProps<'element' | 'seq-actor'> & {
+    data: {
+        modelFqn: Fqn;
+    };
+}): import("react/jsx-runtime").JSX.Element;
 export declare function DeploymentElementToolbar(props: Types.NodeProps<'deployment'>): import("react/jsx-runtime").JSX.Element;

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

@@ -3,19 +3,20 @@ import { ElementShapes } from '@likec4/core/styles';
 import { Menu, MenuTarget, Button, MenuDropdown, MenuItem } from '@mantine/core';
 import { useEnabledFeatures } from '../../../../context/DiagramFeatures.js';
 import { stopPropagation } from '../../../../utils/xyflow.js';
-import { GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
+import { BorderStyleOption, 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.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconCheck from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
+import IconSelector from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconCheck from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
 
 function ElementToolbar(props) {
   const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();
   const {
     data: {
       shape,
-      modelFqn
+      modelFqn,
+      style
     }
   } = props;
   const { elementColor, onColorPreview, onChange } = useHandlers(modelFqn, props);
@@ -26,6 +27,14 @@ function ElementToolbar(props) {
       title: modelFqn,
       align: "start",
       children: [
+        /* @__PURE__ */ jsx(
+          ColorButton,
+          {
+            elementColor,
+            onColorPreview,
+            onChange
+          }
+        ),
         /* @__PURE__ */ jsx(
           ElementShapeButton,
           {
@@ -34,12 +43,10 @@ function ElementToolbar(props) {
           }
         ),
         /* @__PURE__ */ jsx(
-          ColorButton,
+          BorderStyleOption,
           {
-            elementColor,
-            onColorPreview,
-            onChange,
-            position: "right-end"
+            elementBorderStyle: style?.border ?? "none",
+            onChange
           }
         ),
         enableVscode && /* @__PURE__ */ jsx(GoToSourceButton, { elementId: modelFqn }),
@@ -54,7 +61,8 @@ function DeploymentElementToolbar(props) {
     data: {
       shape,
       deploymentFqn,
-      modelFqn
+      modelFqn,
+      style
     }
   } = props;
   const { elementColor, onColorPreview, onChange } = useHandlers(deploymentFqn, props);
@@ -65,6 +73,14 @@ function DeploymentElementToolbar(props) {
       title: deploymentFqn,
       align: "start",
       children: [
+        /* @__PURE__ */ jsx(
+          ColorButton,
+          {
+            elementColor,
+            onColorPreview,
+            onChange
+          }
+        ),
         /* @__PURE__ */ jsx(
           ElementShapeButton,
           {
@@ -73,12 +89,10 @@ function DeploymentElementToolbar(props) {
           }
         ),
         /* @__PURE__ */ jsx(
-          ColorButton,
+          BorderStyleOption,
           {
-            elementColor,
-            onColorPreview,
-            onChange,
-            position: "right-end"
+            elementBorderStyle: style?.border ?? "none",
+            onChange
           }
         ),
         enableVscode && /* @__PURE__ */ jsx(GoToSourceButton, { deploymentId: deploymentFqn }),
@@ -105,7 +119,7 @@ function ElementShapeButton({
       offset: 2,
       styles: {
         item: {
-          padding: "calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-xs)"
+          padding: "calc(var(--spacing-xs) / 1.5) var(--spacing-xs)"
         }
       },
       withinPortal: false,
@@ -115,7 +129,9 @@ function ElementShapeButton({
           {
             variant: "light",
             color: "gray",
-            size: "compact-xs",
+            size: "xs",
+            fz: "xxs",
+            px: "xs",
             rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 12 }),
             children: elementShape
           }
@@ -128,8 +144,8 @@ function ElementShapeButton({
             children: ElementShapes.map((shape) => /* @__PURE__ */ jsx(
               MenuItem,
               {
-                fz: 12,
-                fw: 500,
+                fz: "xs",
+                fw: "500",
                 value: shape,
                 rightSection: elementShape === shape ? /* @__PURE__ */ jsx(IconCheck, { size: 12 }) : void 0,
                 onClick: (e) => {

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

@@ -1,14 +1,18 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { Paper, Stack, Box, Text, Group } from '@mantine/core';
+import { VStack, Box, HStack } from '@likec4/styles/jsx';
+import { Paper, Text } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { NodeToolbar } from '@xyflow/react';
 import { useDiagramContext } from '../../../../hooks/useDiagram.js';
 import { stopPropagation } from '../../../../utils/xyflow.js';
 import { toolbarTitle } from './styles.css.js';
 
+const selectSelectedNodesCount = (context) => {
+  return context.xynodes.filter((x) => x.selected).length;
+};
 const useSelectedNodesCount = () => {
-  return useDiagramContext((s) => s.xynodes.filter((x) => x.selected).length);
+  return useDiagramContext(selectSelectedNodesCount);
 };
 function Toolbar({ title, children, nodeProps, ...props }) {
   const selectedNodesCount = useSelectedNodesCount();
@@ -56,9 +60,9 @@ function Toolbar({ title, children, nodeProps, ...props }) {
           onClick: stopPropagation,
           onDoubleClick: stopPropagation,
           withBorder: true,
-          children: /* @__PURE__ */ jsxs(Stack, { gap: "6px", children: [
-            /* @__PURE__ */ jsx(Box, { px: "4px", children: /* @__PURE__ */ jsx(Text, { className: toolbarTitle, children: title }) }),
-            /* @__PURE__ */ jsx(Group, { gap: 4, children })
+          children: /* @__PURE__ */ jsxs(VStack, { gap: "2", children: [
+            /* @__PURE__ */ jsx(Box, { px: "1", children: /* @__PURE__ */ jsx(Text, { className: toolbarTitle, children: title }) }),
+            /* @__PURE__ */ jsx(HStack, { gap: "1", children })
           ] })
         }
       )

package/dist/likec4diagram/custom/nodes/toolbar/_shared.d.ts

@@ -1,5 +1,6 @@
-import { DeploymentFqn, Fqn } from '@likec4/core/types';
+import { BorderStyle, DeploymentFqn, Fqn } from '@likec4/core/types';
 import { MergeExclusive } from 'type-fest';
+import { OnStyleChange } from './types';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { TooltipProps } from '@mantine/core';
 export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & {
@@ -14,3 +15,7 @@ export declare function GoToSourceButton(props: MergeExclusive<{
 }, {
     deploymentId: DeploymentFqn;
 }>): import("react/jsx-runtime").JSX.Element | null;
+export declare function BorderStyleOption({ elementBorderStyle, onChange, }: {
+    elementBorderStyle: BorderStyle | undefined;
+    onChange: OnStyleChange;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,12 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
-import { Tooltip as Tooltip$1, ActionIcon } from '@mantine/core';
+import { SegmentedControl, Tooltip as Tooltip$1, ActionIcon } from '@mantine/core';
+import { useState, useEffect } from 'react';
 import '@xstate/react';
 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.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-import IconTransform from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconTransform from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",
@@ -23,7 +23,7 @@ function BrowseRelationshipsButton({ fqn }) {
   return /* @__PURE__ */ jsx(Tooltip, { label: "Browse relationships", children: /* @__PURE__ */ jsx(
     ActionIcon,
     {
-      size: "sm",
+      size: "md",
       variant: "subtle",
       color: "gray",
       onClick: (e) => {
@@ -35,8 +35,8 @@ function BrowseRelationshipsButton({ fqn }) {
         {
           stroke: 2,
           style: {
-            width: "72%",
-            height: "72%"
+            width: "65%",
+            height: "65%"
           }
         }
       )
@@ -49,7 +49,7 @@ function GoToSourceButton(props) {
   return /* @__PURE__ */ jsx(Tooltip, { label: "Open source", children: /* @__PURE__ */ jsx(
     ActionIcon,
     {
-      size: "sm",
+      size: "md",
       variant: "subtle",
       color: "gray",
       onClick: (e) => {
@@ -64,9 +64,45 @@ function GoToSourceButton(props) {
           });
         }
       },
-      children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "70%" } })
+      children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "65%" } })
     }
   ) });
 }
+function BorderStyleOption({
+  elementBorderStyle = "none",
+  onChange
+}) {
+  const [value, setValue] = useState(elementBorderStyle);
+  useEffect(() => {
+    setValue(elementBorderStyle);
+  }, [elementBorderStyle]);
+  return /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      size: "xs",
+      fz: "xxs",
+      fullWidth: true,
+      withItemsBorders: false,
+      value,
+      onChange: (v) => {
+        const border = v;
+        setValue(border);
+        onChange({ border });
+      },
+      styles: {
+        label: {
+          paddingTop: 2,
+          paddingBottom: 2
+        }
+      },
+      data: [
+        { label: "Solid", value: "solid" },
+        { label: "Dashed", value: "dashed" },
+        { label: "Dotted", value: "dotted" },
+        { label: "None", value: "none" }
+      ]
+    }
+  );
+}
 
-export { BrowseRelationshipsButton, GoToSourceButton, Tooltip };
+export { BorderStyleOption, BrowseRelationshipsButton, GoToSourceButton, Tooltip };

package/dist/likec4diagram/custom/nodes/toolbar/styles.css.js

@@ -2,8 +2,8 @@ import { css } from '@likec4/styles/css';
 
 const toolbarTitle = css({
   color: "mantine.colors.dimmed",
-  fontSize: "10px",
-  fontWeight: 600,
+  fontSize: "xxs",
+  fontWeight: "bold",
   maxWidth: "220px",
   cursor: "default",
   userSelect: "all",

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

@@ -2,9 +2,9 @@ import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { autoUpdate, computePosition, offset, autoPlacement, size, hide } from '@floating-ui/dom';
 import { nameFromFqn } from '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
-import { VStack, styled, HStack, Box } from '@likec4/styles/jsx';
+import { VStack, styled, HStack, Box, Txt } from '@likec4/styles/jsx';
 import { bleed } from '@likec4/styles/patterns';
-import { Divider, ScrollAreaAutosize, Button, TooltipGroup, Tooltip as Tooltip$1, Text, ActionIcon, Notification } from '@mantine/core';
+import { Divider, ScrollAreaAutosize, Button, TooltipGroup, Tooltip as Tooltip$1, ActionIcon, Text, 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';
@@ -17,14 +17,14 @@ import { useDiagramContext, useOnDiagramEvent } from '../../hooks/useDiagram.js'
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { findDiagramEdge, findDiagramNode } from '../state/utils.js';
 import { RelationshipPopoverActorLogic } from './actor.js';
-import { endpoint, title } from './styles.css.js';
+import { Endpoint, RelationshipTitle } from './components.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.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
 import { Markdown } from '../../base-primitives/Markdown.js';
 
 function selectDiagramContext(c) {
@@ -294,7 +294,7 @@ const RelationshipPopoverInternal = ({
                 size: "compact-xs",
                 style: {
                   alignSelf: "flex-start",
-                  fontWeight: 500,
+                  fontWeight: "medium",
                   ["--button-fz"]: "var(--font-sizes-xxs)"
                 },
                 onClick: (e) => {
@@ -338,7 +338,7 @@ const EdgeDrifts = ({ diagramEdge }) => {
       withBorder: false,
       withCloseButton: false,
       title: "Changes:",
-      children: drifts.map((drift) => /* @__PURE__ */ jsxs(Text, { mt: 2, size: "sm", lh: "xs", children: [
+      children: drifts.map((drift) => /* @__PURE__ */ jsxs(Txt, { mt: "1", size: "xs", children: [
         "- ",
         drift
       ] }, drift))
@@ -363,7 +363,7 @@ const Relationship = forwardRef(({
       "div",
       {
         style: {
-          fontWeight: 600,
+          fontWeight: "bold",
           fontSize: "10px",
           color: "#868e96",
           marginBottom: "2px",
@@ -390,7 +390,7 @@ const Relationship = forwardRef(({
               "span",
               {
                 style: {
-                  fontWeight: 600,
+                  fontWeight: "bold",
                   minWidth: "110px",
                   color: "#495057"
                 },
@@ -436,9 +436,9 @@ const Relationship = forwardRef(({
       }),
       children: [
         /* @__PURE__ */ jsx(HStack, { gap: "0.5", children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 200, children: [
-          /* @__PURE__ */ jsx(Tooltip, { label: sourceId.full, offset: 2, position: "top-start", children: /* @__PURE__ */ jsx(Text, { component: "div", "data-likec4-color": sourceNode.color, className: endpoint, children: sourceId.short }) }),
+          /* @__PURE__ */ jsx(Tooltip, { label: sourceId.full, offset: 2, position: "top-start", children: /* @__PURE__ */ jsx(Endpoint, { likec4color: sourceNode.color, children: sourceId.short }) }),
           /* @__PURE__ */ jsx(IconArrowRight, { stroke: 2.5, size: "11px", opacity: 0.65 }),
-          /* @__PURE__ */ jsx(Tooltip, { label: targetId.full, offset: 2, position: "top-start", children: /* @__PURE__ */ jsx(Text, { component: "div", "data-likec4-color": targetNode.color, className: endpoint, children: targetId.short }) }),
+          /* @__PURE__ */ jsx(Tooltip, { label: targetId.full, offset: 2, position: "top-start", children: /* @__PURE__ */ jsx(Endpoint, { likec4color: targetNode.color, children: targetId.short }) }),
           navigateTo && /* @__PURE__ */ jsx(Tooltip, { label: "Open dynamic view", children: /* @__PURE__ */ jsx(
             ActionIcon,
             {
@@ -472,7 +472,7 @@ const Relationship = forwardRef(({
           ) })
         ] }) }),
         /* @__PURE__ */ jsxs(HStack, { gap: "xs", alignItems: "center", children: [
-          /* @__PURE__ */ jsx(Box, { className: title, children: r.title || "untitled" }),
+          /* @__PURE__ */ jsx(RelationshipTitle, { children: r.title || "untitled" }),
           metadataTooltipLabel && /* @__PURE__ */ jsx(
             Tooltip,
             {
@@ -540,7 +540,7 @@ const Label = styled("div", {
   base: {
     display: "block",
     fontSize: "xxs",
-    fontWeight: 500,
+    fontWeight: "medium",
     userSelect: "none",
     lineHeight: "sm",
     color: "mantine.colors.dimmed"

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

@@ -0,0 +1,7 @@
+import { Color } from '@likec4/core/types';
+import { PropsWithChildren } from 'react';
+import { StyledComponent } from '@likec4/styles';
+export declare const Endpoint: ({ children, likec4color }: PropsWithChildren<{
+    likec4color: Color;
+}>) => import("react/jsx-runtime").JSX.Element;
+export declare const RelationshipTitle: StyledComponent<"div", {}>;

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

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { styled } from '@likec4/styles/jsx';
+import { txt } from '@likec4/styles/patterns';
+
+const Endpoint = ({ children, likec4color }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-likec4-color": likec4color,
+      className: txt({
+        size: "xxs",
+        fontWeight: "medium",
+        whiteSpace: "nowrap",
+        paddingX: "1",
+        paddingY: "0.5",
+        rounded: "xs",
+        background: {
+          _light: "var(--likec4-palette-fill)/90",
+          _dark: "var(--likec4-palette-fill)/60"
+        },
+        color: {
+          _light: "var(--likec4-palette-hiContrast)",
+          _dark: "var(--likec4-palette-loContrast)"
+        }
+      }),
+      children
+    }
+  );
+};
+const RelationshipTitle = styled("div", {
+  base: {
+    whiteSpaceCollapse: "preserve-breaks",
+    fontSize: "sm",
+    lineHeight: "sm",
+    userSelect: "all"
+  }
+});
+
+export { Endpoint, RelationshipTitle };