@likec4/diagram 1.32.2 → 1.33.0

package/dist/overlays/element-details/ElementDetailsCard.js

@@ -1,12 +1,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
-import { RemoveScroll, Card, Group, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Box, Stack, Divider as Divider$1, Code, UnstyledButton, ThemeIcon } from '@mantine/core';
+import { RemoveScroll, Card, Group, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Box, Stack, Divider as Divider$1, ScrollAreaAutosize, UnstyledButton, ThemeIcon } from '@mantine/core';
 import { useViewportSize, useSessionStorage } from '@mantine/hooks';
 import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
-import { IconExternalLink, IconFileSymlink, IconZoomScan, IconStack2 } from '@tabler/icons-react';
 import { useDragControls, useMotionValue, m } from 'motion/react';
 import { useState, useCallback, useRef } from 'react';
-import { pipe, map, partition, only, clamp, isNullish } from 'remeda';
+import { pipe, map, partition, only, clamp, isNullish, entries } from 'remeda';
 import { ElementTag } from '../../base/primitives/element/ElementTags.js';
 import { Link } from '../../components/Link.js';
 import { useDiagram } from '../../hooks/useDiagram.js';
@@ -18,7 +17,12 @@ import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
 import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
 import { IconRenderer } from '../../context/IconRenderer.js';
 import { stopPropagation } from '../../utils/xyflow.js';
+import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
 import { IfEnabled, DiagramFeatures } from '../../context/DiagramFeatures.js';
+import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import { MarkdownBlock } from '../../base/primitives/MarkdownBlock.js';
+import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
 
 const Divider = Divider$1.withProps({
   mb: 8,
@@ -255,7 +259,23 @@ function ElementDetailsCard({
               /* @__PURE__ */ jsxs(Group, { align: "baseline", gap: "sm", wrap: "nowrap", children: [
                 /* @__PURE__ */ jsxs("div", { children: [
                   /* @__PURE__ */ jsx(SmallLabel, { children: "kind" }),
-                  /* @__PURE__ */ jsx(Badge, { radius: "sm", size: "sm", fw: 600, color: "gray", children: elementModel.kind })
+                  /* @__PURE__ */ jsx(
+                    Badge,
+                    {
+                      radius: "sm",
+                      size: "sm",
+                      fw: 600,
+                      color: "gray",
+                      style: {
+                        cursor: "pointer"
+                      },
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        diagram.openSearch(`kind:${elementModel.kind}`);
+                      },
+                      children: elementModel.kind
+                    }
+                  )
                 ] }),
                 /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
                   /* @__PURE__ */ jsx(SmallLabel, { children: "tags" }),
@@ -304,6 +324,9 @@ function ElementDetailsCard({
                           radius: "sm",
                           onClick: (e) => {
                             e.stopPropagation();
+                            diagram.openSource({
+                              element: elementModel.id
+                            });
                           },
                           children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "62%" } })
                         }
@@ -340,8 +363,17 @@ function ElementDetailsCard({
                 },
                 children: [
                   /* @__PURE__ */ jsx(TabsList, { children: TABS.map((tab) => /* @__PURE__ */ jsx(TabsTab, { value: tab, children: tab }, tab)) }),
-                  /* @__PURE__ */ jsx(TabsPanel, { value: "Properties", children: /* @__PURE__ */ jsx(ScrollArea, { scrollbars: "y", type: "auto", children: /* @__PURE__ */ jsxs(Box, { className: propertiesGrid, pt: "xs", children: [
-                    /* @__PURE__ */ jsx(ElementProperty, { title: "description", emptyValue: "no description", children: elementModel.description }),
+                  /* @__PURE__ */ jsx(TabsPanel, { value: "Properties", children: /* @__PURE__ */ jsx(ScrollArea, { scrollbars: "y", type: "scroll", offsetScrollbars: true, children: /* @__PURE__ */ jsxs(Box, { className: propertiesGrid, pt: "xs", children: [
+                    /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(PropertyLabel, { children: "description" }),
+                      /* @__PURE__ */ jsx(
+                        MarkdownBlock,
+                        {
+                          value: elementModel.description,
+                          emptyText: "no description"
+                        }
+                      )
+                    ] }),
                     elementModel.technology && /* @__PURE__ */ jsx(ElementProperty, { title: "technology", children: elementModel.technology }),
                     elementModel.links.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
                       /* @__PURE__ */ jsx(PropertyLabel, { children: "links" }),
@@ -417,10 +449,7 @@ const ViewButton = ({
 }) => {
   return /* @__PURE__ */ jsx(UnstyledButton, { className: viewButton, onClick: (e) => onNavigateTo(view.id, e), children: /* @__PURE__ */ jsxs(Group, { gap: 6, align: "start", wrap: "nowrap", children: [
     /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", children: view._type === "deployment" ? /* @__PURE__ */ jsx(IconStack2, { stroke: 1.8 }) : /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8 }) }),
-    /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Text, { component: "div", className: viewButtonTitle, lineClamp: 1, children: view.title || "untitled" }),
-      view.description && /* @__PURE__ */ jsx(Text, { component: "div", mt: 2, fz: "xs", c: "dimmed", lh: 1.4, lineClamp: 1, children: view.description })
-    ] })
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { component: "div", className: viewButtonTitle, lineClamp: 1, children: view.title || "untitled" }) })
   ] }) });
 };
 function ElementProperty({
@@ -440,6 +469,7 @@ function ElementProperty({
         fz: "md",
         style: {
           whiteSpace: "preserve-breaks",
+          userSelect: "all",
           ...style
         },
         ...props,
@@ -449,11 +479,96 @@ function ElementProperty({
   ] });
 }
 function ElementMetata({
-  value
+  value: metadata
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(PropertyLabel, { children: "metadata" }),
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Code, { block: true, children: JSON.stringify(value, null, 2) }) })
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: css({
+          flex: 1,
+          display: "grid",
+          gridTemplateColumns: "min-content 1fr",
+          gridAutoRows: "min-content max-content",
+          gap: `[4px 4px]`,
+          alignItems: "baseline",
+          justifyItems: "stretch",
+          paddingRight: "2xs"
+        }),
+        children: entries(metadata).map(([key, value]) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(
+              "group",
+              css({
+                display: "contents"
+              })
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: css({
+                    fontSize: "sm",
+                    fontWeight: 500,
+                    justifySelf: "end",
+                    whiteSpace: "nowrap"
+                  }),
+                  children: [
+                    key,
+                    ":"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: css({}),
+                  children: /* @__PURE__ */ jsx(
+                    ScrollAreaAutosize,
+                    {
+                      type: "auto",
+                      mah: 200,
+                      overscrollBehavior: "none",
+                      className: css({
+                        transitionProperty: "all",
+                        transitionDuration: "fast",
+                        transitionTimingFunction: "inOut",
+                        rounded: "sm",
+                        color: "mantine.colors.gray[8]",
+                        _dark: {
+                          color: "mantine.colors.dark[1]"
+                        },
+                        _groupHover: {
+                          transitionTimingFunction: "out",
+                          color: "mantine.colors.defaultColor",
+                          background: "mantine.colors.defaultHover"
+                        }
+                      }),
+                      children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: css({
+                            fontSize: "sm",
+                            padding: "2xs",
+                            whiteSpace: "pre",
+                            fontFamily: "[var(--mantine-font-family-monospace)]",
+                            userSelect: "all"
+                          }),
+                          children: value
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          key
+        ))
+      }
+    )
   ] });
 }
 

package/dist/overlays/element-details/TabPanelDeployments.js

@@ -1,11 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useTree, Alert, Tree, Box, rem, Button, Group, Text, ThemeIcon, Menu } from '@mantine/core';
-import { IconInfoCircle, IconTarget, IconZoomScan } from '@tabler/icons-react';
 import { memo, useMemo, useEffect } from 'react';
 import { useDiagram } from '../../hooks/useDiagram.js';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
 import { treeNodeLabel, treeNode, nodeLabel, instanceLabel } from './TabPanelDeployments.css.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconTarget from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTarget.js';
 import { stopPropagation } from '../../utils/xyflow.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 const DeploymentNodeRenderer = ({
   node

package/dist/overlays/element-details/TabPanelRelationships.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { nameFromFqn } from '@likec4/core';
 import { Stack, Group, Box, ThemeIcon, Text, Tooltip as Tooltip$1, ActionIcon, Paper } from '@mantine/core';
-import { IconArrowRight, IconInfoCircle, IconExternalLink } from '@tabler/icons-react';
 import { useSelector } from '@xstate/react';
 import { useState } from 'react';
 import { unique } from 'remeda';
@@ -9,6 +8,9 @@ import { useOverlaysActorRef } from '../../hooks/useOverlaysActor.js';
 import { RelationshipsBrowser } from '../relationships-browser/RelationshipsBrowser.js';
 import { useElementDetailsActorRef } from './actorContext.js';
 import { fqn, xyflow, relationshipStat } from './TabPanelRelationships.css.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",

package/dist/overlays/element-details/TabPanelStructure.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTree, Alert, Anchor, Tree, Box, Text, Pill } from '@mantine/core';
-import { IconInfoCircle } from '@tabler/icons-react';
 import { useMemo, useEffect } from 'react';
 import { treeNodeLabel, elementLabel } from './TabPanelStructure.css.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
 
 const ElementLabel = ({
   element

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

@@ -2,7 +2,7 @@ import { RelationshipDetailsActorRef } from './actor';
 import { FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
 import { EdgeData, Dimmed } from '../../base/types.Base';
-import { RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
+import { RelationId, Color, ViewId, RelationshipLineType, RichTextOrEmpty } from '@likec4/core';
 export declare const edgeTypes: {
     relationship: FunctionComponent<{
         id: string;
@@ -39,9 +39,9 @@ export declare const edgeTypes: {
             color: Color | undefined;
             label: string | null;
             technology?: string | undefined | undefined;
-            description?: string | undefined | undefined;
             navigateTo: ViewId | null;
             line: RelationshipLineType;
+            description: RichTextOrEmpty;
         };
     }>;
 };

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

@@ -3,7 +3,6 @@ import { invariant, nonNullable, isAncestor } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
 import { ActionIcon, Group } from '@mantine/core';
 import { useCallbackRef, useStateHistory } from '@mantine/hooks';
-import { IconX, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
 import { useSelector } from '@xstate/react';
 import { ReactFlowProvider, Panel, useStoreApi, useReactFlow } from '@xyflow/react';
 import { deepEqual } from 'fast-equals';
@@ -18,6 +17,9 @@ import { layoutRelationshipDetails } from './layout.js';
 import { SelectEdge } from './SelectEdge.js';
 import { RelationshipEdge } from './custom/edgeTypes.js';
 import { CompoundNode, ElementNode } from './custom/nodeTypes.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const nodeTypes = {
   element: ElementNode,

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

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown, ScrollAreaAutosize } from '@mantine/core';
-import { IconArrowRight, IconSelector } from '@tabler/icons-react';
 import { useRef } from 'react';
 import { useRelationshipDetails } from './hooks.js';
 import { edgeSource, edgeTarget, scrollArea, edgeGrid, edgeRow, edgeArrow, edgeLabel } from './SelectEdge.css.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
 
 const SelectEdge = ({
   edge,

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

@@ -1,4 +1,4 @@
-import { Color, DiagramNode, Fqn, IconUrl, RelationId, RelationshipLineType, ViewId } from '@likec4/core/types';
+import { Color, DiagramNode, Fqn, IconUrl, RelationId, RelationshipLineType, RichTextOrEmpty, ViewId } from '@likec4/core/types';
 import { Simplify } from 'type-fest';
 import { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types';
 export declare namespace RelationshipDetailsTypes {
@@ -10,11 +10,12 @@ export declare namespace RelationshipDetailsTypes {
         in: string[];
         out: string[];
     };
-    type ElementNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'height' | 'navigateTo' | 'style' | 'tags'>> & {
+    type ElementNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'color' | 'shape' | 'width' | 'height' | 'navigateTo' | 'style' | 'tags'>> & {
         column: Column;
         fqn: Fqn;
         icon: IconUrl;
         ports: Ports;
+        description: RichTextOrEmpty;
     };
     type CompoundNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'title' | 'color' | 'style'>> & {
         column: Column;
@@ -32,9 +33,9 @@ export declare namespace RelationshipDetailsTypes {
         color: Color | undefined;
         label: string | null;
         technology?: string | undefined;
-        description?: string | undefined;
         navigateTo: ViewId | null;
         line: RelationshipLineType;
+        description: RichTextOrEmpty;
     }>;
     type Edge = ReactFlowEdge<EdgeData, 'relationship'>;
 }

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

@@ -1,4 +1,4 @@
-import { BBox, EdgeId, ExclusiveUnion, Fqn, ViewId, RelationId, Color, RelationshipLineType } from '@likec4/core';
+import { BBox, EdgeId, ExclusiveUnion, Fqn, ViewId, RelationId, Color, RelationshipLineType, RichTextOrEmpty } from '@likec4/core';
 import { EdgeChange, NodeChange, ReactFlowInstance, useStoreApi } from '@xyflow/react';
 import { ActorLogicFrom, ActorRefFromLogic, SnapshotFrom, StateMachine, Values, NonReducibleUnknown, EventObject, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, CancelAction } from 'xstate';
 import { Base } from '../../base';
@@ -628,9 +628,9 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<{
                                 color: Color | undefined;
                                 label: string | null;
                                 technology?: string | undefined | undefined;
-                                description?: string | undefined | undefined;
                                 navigateTo: ViewId | null;
                                 line: RelationshipLineType;
+                                description: RichTextOrEmpty;
                             };
                         }[];
                         bounds: BBox;

package/dist/overlays/relationship-details/custom/ElementActions.js

@@ -1,9 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import { IconZoomScan, IconTransform, IconFileSymlink } from '@tabler/icons-react';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useCurrentViewId } from '../../../hooks/useCurrentViewId.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { ElementActionButtons } from '../../../base/primitives/element/ElementActionButtons.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const ElementActions = (props) => {
   const { enableNavigateTo, enableVscode } = useEnabledFeatures();

package/dist/overlays/relationship-details/custom/edgeTypes.d.ts

@@ -1,7 +1,7 @@
 import { FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
 import { EdgeData, Dimmed } from '../../../base/types.Base';
-import { RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
+import { RelationId, Color, ViewId, RelationshipLineType, RichTextOrEmpty } from '@likec4/core';
 export declare const RelationshipEdge: FunctionComponent<{
     id: string;
     selected?: boolean;
@@ -37,8 +37,8 @@ export declare const RelationshipEdge: FunctionComponent<{
         color: Color | undefined;
         label: string | null;
         technology?: string | undefined | undefined;
-        description?: string | undefined | undefined;
         navigateTo: ViewId | null;
         line: RelationshipLineType;
+        description: RichTextOrEmpty;
     };
 }>;

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

@@ -1,4 +1,4 @@
-import { EdgeId, Fqn, ViewId, RelationId, Color, RelationshipLineType, BBox } from '@likec4/core';
+import { EdgeId, Fqn, ViewId, RelationId, Color, RelationshipLineType, RichTextOrEmpty, BBox } from '@likec4/core';
 import { RelationshipDetailsActorRef, RelationshipDetailsSnapshot, Events } from './actor';
 import { Context, ReactNode, CSSProperties } from 'react';
 import { GeneralHelpers, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
@@ -56,9 +56,9 @@ export declare function useRelationshipDetails(): {
                 color: Color | undefined;
                 label: string | null;
                 technology?: string | undefined | undefined;
-                description?: string | undefined | undefined;
                 navigateTo: ViewId | null;
                 line: RelationshipLineType;
+                description: RichTextOrEmpty;
             };
         }> & ViewportHelperFunctions & {
             viewportInitialized: boolean;
@@ -99,9 +99,9 @@ export declare function useRelationshipDetails(): {
                     color: Color | undefined;
                     label: string | null;
                     technology?: string | undefined | undefined;
-                    description?: string | undefined | undefined;
                     navigateTo: ViewId | null;
                     line: RelationshipLineType;
+                    description: RichTextOrEmpty;
                 };
             }>;
             setState: (partial: ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
@@ -139,9 +139,9 @@ export declare function useRelationshipDetails(): {
                     color: Color | undefined;
                     label: string | null;
                     technology?: string | undefined | undefined;
-                    description?: string | undefined | undefined;
                     navigateTo: ViewId | null;
                     line: RelationshipLineType;
+                    description: RichTextOrEmpty;
                 };
             }> | Partial< ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
                 id: string;
@@ -178,9 +178,9 @@ export declare function useRelationshipDetails(): {
                     color: Color | undefined;
                     label: string | null;
                     technology?: string | undefined | undefined;
-                    description?: string | undefined | undefined;
                     navigateTo: ViewId | null;
                     line: RelationshipLineType;
+                    description: RichTextOrEmpty;
                 };
             }>> | ((state: ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
                 id: string;
@@ -217,9 +217,9 @@ export declare function useRelationshipDetails(): {
                     color: Color | undefined;
                     label: string | null;
                     technology?: string | undefined | undefined;
-                    description?: string | undefined | undefined;
                     navigateTo: ViewId | null;
                     line: RelationshipLineType;
+                    description: RichTextOrEmpty;
                 };
             }>) => ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
                 id: string;
@@ -256,9 +256,9 @@ export declare function useRelationshipDetails(): {
                     color: Color | undefined;
                     label: string | null;
                     technology?: string | undefined | undefined;
-                    description?: string | undefined | undefined;
                     navigateTo: ViewId | null;
                     line: RelationshipLineType;
+                    description: RichTextOrEmpty;
                 };
             }> | Partial< ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
                 id: string;
@@ -295,9 +295,9 @@ export declare function useRelationshipDetails(): {
                     color: Color | undefined;
                     label: string | null;
                     technology?: string | undefined | undefined;
-                    description?: string | undefined | undefined;
                     navigateTo: ViewId | null;
                     line: RelationshipLineType;
+                    description: RichTextOrEmpty;
                 };
             }>>), replace?: boolean | undefined) => void;
             subscribe: (listener: (state: ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
@@ -335,9 +335,9 @@ export declare function useRelationshipDetails(): {
                     color: Color | undefined;
                     label: string | null;
                     technology?: string | undefined | undefined;
-                    description?: string | undefined | undefined;
                     navigateTo: ViewId | null;
                     line: RelationshipLineType;
+                    description: RichTextOrEmpty;
                 };
             }>, prevState: ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
                 id: string;
@@ -374,9 +374,9 @@ export declare function useRelationshipDetails(): {
                     color: Color | undefined;
                     label: string | null;
                     technology?: string | undefined | undefined;
-                    description?: string | undefined | undefined;
                     navigateTo: ViewId | null;
                     line: RelationshipLineType;
+                    description: RichTextOrEmpty;
                 };
             }>) => void) => () => void;
         } | null;

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

@@ -1,4 +1,4 @@
-import { Queue, nonNullable } from '@likec4/core';
+import { Queue, nonNullable, RichText } from '@likec4/core';
 import { hasAtLeast } from 'remeda';
 import { ZIndexes } from '../../base/const.js';
 
@@ -85,7 +85,7 @@ function layoutResultToXYFlow(layout) {
               fqn,
               title: node.title,
               technology: node.technology,
-              description: node.description,
+              description: RichText.from(node.description),
               height: node.height,
               width: node.width,
               color: node.color,
@@ -131,8 +131,8 @@ function layoutResultToXYFlow(layout) {
         color,
         navigateTo,
         line,
-        ...technology && { technology },
-        ...description && { description }
+        description: RichText.from(description),
+        ...technology && { technology }
       }
     });
   }

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

@@ -1,4 +1,4 @@
-import { DiagramEdge, DiagramNode, DiagramView, Fqn, RelationId } from '@likec4/core/types';
+import { DiagramEdge, DiagramNode, DiagramView, Fqn, RelationId, RichTextOrEmpty } from '@likec4/core/types';
 import { AnyAux, LikeC4ViewModel } from '@likec4/core/model';
 import { RelationshipDetailsTypes } from './_types';
 import { RelationshipDetailsViewData } from './compute';
@@ -8,15 +8,17 @@ export type LayoutResult = {
     bounds: DiagramView['bounds'];
 };
 export declare namespace LayoutResult {
-    type Node = Omit<DiagramNode, 'modelRef' | 'deploymentRef' | 'inEdges' | 'outEdges'> & {
+    type Node = Omit<DiagramNode, 'modelRef' | 'description' | 'deploymentRef' | 'inEdges' | 'outEdges'> & {
+        description: RichTextOrEmpty;
         modelRef: Fqn;
         column: RelationshipDetailsTypes.Column;
         ports: RelationshipDetailsTypes.Ports;
     };
-    type Edge = Omit<DiagramEdge, 'relations'> & {
+    type Edge = Omit<DiagramEdge, 'relations' | 'description'> & {
         relationId: RelationId;
         sourceHandle: string;
         targetHandle: string;
+        description: RichTextOrEmpty;
     };
 }
 export declare function layoutRelationshipDetails(data: RelationshipDetailsViewData, scope: LikeC4ViewModel<AnyAux> | null): LayoutResult;

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

@@ -1,6 +1,6 @@
 import { treeFromElements } from '@likec4/core/compute-view/relationships';
 import dagre from '@dagrejs/dagre';
-import { invariant } from '@likec4/core';
+import { RichText, invariant } from '@likec4/core';
 import { ifind, DefaultMap } from '@likec4/core/utils';
 import { pipe, filter, mapToObj, find, map, tap, reduce, sortBy, prop } from 'remeda';
 
@@ -240,7 +240,7 @@ function layoutRelationshipDetails(data, scope) {
       y: position.y,
       position: [position.x, position.y],
       title: element.title,
-      description: element.description,
+      description: RichText.from(element.description),
       technology: element.technology,
       tags: [...element.tags],
       links: null,

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

@@ -2,7 +2,6 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { ActionIcon, Group } from '@mantine/core';
 import { useCallbackRef, useStateHistory } from '@mantine/hooks';
-import { IconX, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
 import { ReactFlowProvider, useStoreApi, useReactFlow, Panel } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
 import { LayoutGroup, AnimatePresence, m } from 'motion/react';
@@ -13,6 +12,9 @@ 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.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const nodeTypes = {
   element: ElementNode,

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

@@ -1,13 +1,14 @@
 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 { IconSelector, IconChevronRight } from '@tabler/icons-react';
 import { memo, useRef, useEffect } from 'react';
 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.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const selector2 = (state) => {
   const subjectExistsInScope = state.context.layouted?.subjectExistsInScope ?? false;

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

@@ -1,4 +1,4 @@
-import { Color, DiagramNode, Fqn, IconUrl, NonEmptyArray, RelationId, RelationshipLineType, ViewId } from '@likec4/core/types';
+import { Color, DiagramNode, Fqn, IconUrl, NonEmptyArray, RelationId, RelationshipLineType, RichTextOrEmpty, ViewId } from '@likec4/core/types';
 import { Simplify } from 'type-fest';
 import { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types';
 export declare namespace RelationshipsBrowserTypes {
@@ -10,12 +10,13 @@ export declare namespace RelationshipsBrowserTypes {
         in: string[];
         out: string[];
     };
-    type ElementNodeData = Simplify<Base.NodeData & NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'style' | 'width' | 'height' | 'tags' | 'navigateTo'>> & {
+    type ElementNodeData = Simplify<Base.NodeData & NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'color' | 'shape' | 'style' | 'width' | 'height' | 'tags' | 'navigateTo'>> & {
         column: Column;
         fqn: Fqn;
         icon: string | null;
         ports: Ports;
         existsInCurrentView: boolean;
+        description: RichTextOrEmpty;
     }>;
     type CompoundNodeData = Simplify<Base.NodeData & NonOptional<Pick<DiagramNode, 'title' | 'color' | 'shape' | 'style'>> & {
         column: Column;

package/dist/overlays/relationships-browser/custom/ElementActions.js

@@ -1,10 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
-import { IconZoomScan, IconTransform, IconFileSymlink } from '@tabler/icons-react';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useCurrentViewId } from '../../../hooks/useCurrentViewId.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from '../hooks.js';
 import { ElementActionButtons } from '../../../base/primitives/element/ElementActionButtons.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const ElementActions = (props) => {
   const { enableNavigateTo, enableVscode } = useEnabledFeatures();