@likec4/diagram 1.43.0 → 1.45.0

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

@@ -1,4 +1,4 @@
-import { Queue, nonNullable, RichText } from '@likec4/core';
+import { Queue, nonNullable } from '@likec4/core';
 import { hasAtLeast } from 'remeda';
 import { ZIndexes } from '../../base/const.js';
 
@@ -36,8 +36,6 @@ function layoutResultToXYFlow(layout) {
     const base = {
       id,
       draggable: false,
-      selectable: true,
-      focusable: true,
       deletable: false,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
@@ -86,7 +84,7 @@ function layoutResultToXYFlow(layout) {
               fqn,
               title: node.title,
               technology: node.technology,
-              description: RichText.from(node.description),
+              description: node.description ?? null,
               height: node.height,
               width: node.width,
               color: node.color,
@@ -131,7 +129,7 @@ function layoutResultToXYFlow(layout) {
         color,
         navigateTo,
         line,
-        description: RichText.from(description),
+        description: description ?? null,
         ...technology && { technology }
       }
     });

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

@@ -1,4 +1,4 @@
-import { AnyAux, DiagramEdge, DiagramNode, DiagramView, Fqn, RelationId, RichTextOrEmpty } from '@likec4/core/types';
+import { AnyAux, DiagramEdge, DiagramNode, DiagramView, Fqn, MarkdownOrString, RelationId } from '@likec4/core/types';
 import { LikeC4ViewModel } from '@likec4/core/model';
 import { Except } from 'type-fest';
 import { RelationshipDetailsTypes } from './_types';
@@ -10,7 +10,7 @@ export type LayoutResult = {
 };
 export declare namespace LayoutResult {
     type Node = Except<DiagramNode, 'modelRef' | 'description' | 'deploymentRef' | 'inEdges' | 'outEdges'> & {
-        description: RichTextOrEmpty;
+        description: MarkdownOrString | null;
         modelRef: Fqn;
         column: RelationshipDetailsTypes.Column;
         ports: RelationshipDetailsTypes.Ports;
@@ -19,7 +19,7 @@ export declare namespace LayoutResult {
         relationId: RelationId;
         sourceHandle: string;
         targetHandle: string;
-        description: RichTextOrEmpty;
+        description: MarkdownOrString | null;
     };
 }
 export declare function layoutRelationshipDetails(data: RelationshipDetailsViewData, scope: LikeC4ViewModel<AnyAux> | null): LayoutResult;

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

@@ -1,5 +1,5 @@
 import { treeFromElements } from '@likec4/core/compute-view/relationships';
-import { exact } from '@likec4/core/types';
+import { exact, preferSummary } from '@likec4/core/types';
 import dagre from '@dagrejs/dagre';
 import { ifind, DefaultMap, invariant } from '@likec4/core/utils';
 import { pipe, filter, mapToObj, omit, find, map, tap, reduce, sortBy, prop } from 'remeda';
@@ -239,7 +239,7 @@ function layoutRelationshipDetails(data, scope) {
       x: position.x,
       y: position.y,
       title: element.title,
-      description: element.summary,
+      description: preferSummary(element.$element) ?? null,
       technology: element.technology,
       tags: [...element.tags],
       links: null,
@@ -288,7 +288,7 @@ function layoutRelationshipDetails(data, scope) {
       const { name, source, target, relationship, sourceHandle, targetHandle } = find(edges, (e2) => e2.name === ename);
       const label = relationship.title ?? "untitled";
       const navigateTo = relationship.navigateTo?.id ?? null;
-      const description = relationship.description ?? null;
+      const description = preferSummary(relationship.$relationship) ?? null;
       const technology = relationship.technology ?? null;
       acc.push({
         id: name,
@@ -298,8 +298,8 @@ function layoutRelationshipDetails(data, scope) {
         targetHandle,
         label,
         color: relationship.color,
+        description,
         ...navigateTo && { navigateTo },
-        ...description && { description },
         ...technology && { technology },
         points: edge.points.map((p) => [p.x, p.y]),
         line: relationship.line,

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

@@ -1,22 +1,23 @@
 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 { useStateHistory } from '@mantine/hooks';
 import { useRafEffect } from '@react-hookz/web';
 import { ReactFlowProvider, useStoreApi, useReactFlow, Panel } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
 import { LayoutGroup, AnimatePresence, m } from 'motion/react';
 import { useRef, memo, useEffect } from 'react';
 import { BaseXYFlow } from '../../base/BaseXYFlow.js';
+import { useCallbackRef } from '../../hooks/useCallbackRef.js';
 import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
 import { useRelationshipsView } from './layout.js';
 import { SelectElement } from './SelectElement.js';
 import { RelationshipEdge } from './custom/edgeTypes.js';
 import { EmptyNode } from './custom/EmptyNode.js';
 import { CompoundNode, ElementNode } from './custom/nodeTypes.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const nodeTypes = {
   element: ElementNode,
@@ -103,6 +104,7 @@ const RelationshipsBrowserXYFlow = memo(() => {
         browser.send({ type: "xyflow.selectionChange", ...params });
       }),
       nodesDraggable: false,
+      nodesSelectable: true,
       pannable: true,
       zoomable: true,
       children: /* @__PURE__ */ jsx(RelationshipsBrowserInner, {})

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

@@ -7,8 +7,8 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
 import * as SelectElement_css from './SelectElement.css.js';
 import { scrollArea } from './SelectElement.css.js';
-import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+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 IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.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, ExclusiveUnion, Fqn, IconUrl, NonEmptyArray, RelationId, RelationshipArrowType, RelationshipLineType, RichTextOrEmpty, ViewId } from '@likec4/core/types';
+import { Color, DiagramNode, ExclusiveUnion, Fqn, IconUrl, NonEmptyArray, RelationId, RelationshipArrowType, RelationshipLineType, ViewId } from '@likec4/core/types';
 import { FunctionComponent } from 'react';
 import { Simplify } from 'type-fest';
 import { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseNode, BaseNodeData, BaseNodeProps, NonOptional } from '../../base/types';
@@ -11,13 +11,12 @@ export declare namespace RelationshipsBrowserTypes {
         in: string[];
         out: string[];
     };
-    type ElementNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'color' | 'shape' | 'style' | 'width' | 'height' | 'tags' | 'navigateTo'>> & {
+    type ElementNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'color' | 'shape' | 'style' | 'width' | 'height' | 'tags' | 'navigateTo'>> & {
         column: Column;
         fqn: Fqn;
         icon: string | null;
         ports: Ports;
         existsInCurrentView: boolean;
-        description: RichTextOrEmpty;
     }>;
     type CompoundNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'style'>> & {
         column: Column;