@likec4/diagram 1.32.1 → 1.33.0

package/dist/overlays/relationships-browser/custom/nodeTypes.d.ts

@@ -2,7 +2,7 @@ import { NodeProps } from '../../../base';
 import { RelationshipsBrowserTypes } from '../_types';
 import { MemoExoticComponent } from 'react';
 import { Dimmed } from '../../../base/types.Base';
-import { ElementStyle, Color, Any, ViewId, Fqn, IconUrl } from '@likec4/core';
+import { ElementStyle, Color, Any, ViewId, Fqn, RichTextOrEmpty, IconUrl } from '@likec4/core';
 import { Tags } from '@likec4/core/types/aux';
 export declare const ElementNode: MemoExoticComponent<(props: NodeProps<{
     hovered?: boolean;
@@ -15,13 +15,13 @@ export declare const ElementNode: MemoExoticComponent<(props: NodeProps<{
     shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
     tags: Tags<Any>;
     technology: string | null | undefined;
-    description: string | null | undefined;
     navigateTo: ViewId<string> | null | undefined;
     column: RelationshipsBrowserTypes.Column;
     fqn: Fqn;
     icon: string | null;
     ports: RelationshipsBrowserTypes.Ports;
     existsInCurrentView: boolean;
+    description: RichTextOrEmpty;
 }, string>) => import("react/jsx-runtime").JSX.Element>;
 export declare const CompoundNode: MemoExoticComponent<(props: NodeProps<{
     hovered?: boolean;

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

@@ -1,5 +1,5 @@
 import { RelationshipsViewData } from '@likec4/core/compute-view/relationships';
-import { DiagramEdge, DiagramNode, DiagramView, ElementKind, Fqn, ViewId } from '@likec4/core/types';
+import { DiagramEdge, DiagramNode, DiagramView, ElementKind, Fqn, RichTextOrEmpty, ViewId } from '@likec4/core/types';
 import { LikeC4ViewModel } from '@likec4/core/model';
 import { RelationshipsBrowserTypes } from './_types';
 export type LayoutRelationshipsViewResult = {
@@ -11,12 +11,13 @@ export type LayoutRelationshipsViewResult = {
 };
 export declare namespace LayoutRelationshipsViewResult {
     const Empty: ElementKind;
-    type Node = Omit<DiagramNode, 'deploymentRef' | 'inEdges' | 'outEdges'> & {
+    type Node = Omit<DiagramNode, 'deploymentRef' | 'description' | 'inEdges' | 'outEdges'> & {
+        description: RichTextOrEmpty;
         column: RelationshipsBrowserTypes.Column;
         ports: RelationshipsBrowserTypes.Ports;
         existsInCurrentView: boolean;
     };
-    type Edge = DiagramEdge & {
+    type Edge = Omit<DiagramEdge, 'description'> & {
         sourceFqn: Fqn;
         targetFqn: Fqn;
         sourceHandle: string;

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

@@ -1,7 +1,7 @@
 import { computeRelationshipsView, treeFromElements } from '@likec4/core/compute-view/relationships';
 import { useMemo } from 'react';
 import dagre from '@dagrejs/dagre';
-import { toArray, invariant, ifind, nonNullable, DefaultMap } from '@likec4/core';
+import { toArray, invariant, RichText, ifind, nonNullable, DefaultMap } from '@likec4/core';
 import { pipe, concat, map, groupBy, prop, forEachObj, filter, mapToObj, find, only, unique, tap, reduce, sortBy } from 'remeda';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
 
@@ -329,7 +329,7 @@ function layoutRelationshipsView(data, scope) {
         y: position.y,
         position: [position.x, position.y],
         title: "empty node",
-        description: null,
+        description: RichText.EMPTY,
         technology: null,
         tags: [],
         links: [],
@@ -373,7 +373,7 @@ function layoutRelationshipsView(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/search/components/ElementsColumn.js

@@ -3,7 +3,6 @@ import { ifilter, sortParentsFirst, isAncestor, nameFromFqn } from '@likec4/core
 import { cx } from '@likec4/styles/css';
 import { useTree, Tree, ActionIcon, UnstyledButton, Box, Group, Highlight, Tooltip, Text } from '@mantine/core';
 import { useCallbackRef } from '@mantine/hooks';
-import { IconChevronRight } from '@tabler/icons-react';
 import * as m from 'motion/react-m';
 import { memo, useMemo, useEffect } from 'react';
 import { isEmpty, pipe, reduce, only, first } from 'remeda';
@@ -16,6 +15,7 @@ import { focusable, buttonsva } from './_shared.css.js';
 import { treeSubtree, treeLabel, treeRoot, treeNode, elementIcon, elementExpandIcon, elementTitleAndId, elementId, elementViewsCount } from './ElementsColumn.css.js';
 import { stopAndPrevent, moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
 import { NothingFound } from './ViewsColum.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 btn = buttonsva();
 const ElementsColumn = memo(() => {
@@ -224,7 +224,7 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: btn.description, lineClamp: 1, children: element.description || "No description" })
+            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: btn.description, lineClamp: 1, children: element.description.text || "No description" })
           ] }),
           /* @__PURE__ */ jsx(Text, { component: "div", className: cx(elementViewsCount, btn.descriptionColor), fz: "xs", children: views.length === 0 ? "No views" : /* @__PURE__ */ jsxs(Fragment, { children: [
             views.length,

package/dist/search/components/PickView.js

@@ -1,12 +1,12 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { FocusTrap, Group, Title, ActionIcon, ScrollAreaAutosize, Stack } from '@mantine/core';
 import { useWindowEvent } from '@mantine/hooks';
-import { IconX } from '@tabler/icons-react';
 import * as m from 'motion/react-m';
 import { useSearchActor } from '../hooks.js';
 import { pickviewBackdrop, pickview, pickviewGroup } from './styles.css.js';
 import { ViewButton } from './ViewsColum.js';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.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';
 
 function PickView({ elementFqn }) {
   const searchActorRef = useSearchActor();

package/dist/search/components/SearchByTags.js

@@ -2,12 +2,12 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { css } from '@likec4/styles/css';
 import { HStack } from '@likec4/styles/jsx';
 import { Button } from '@mantine/core';
-import { IconX } from '@tabler/icons-react';
 import { useRef } from 'react';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
 import { useUpdateSearch, useNormalizedSearch } from '../hooks.js';
 import { focusToFirstFoundElement, moveFocusToSearchInput } from './utils.js';
 import { ElementTag } from '../../base/primitives/element/ElementTags.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';
 
 function SearchByTags() {
   const ref = useRef(null);

package/dist/search/components/SearchInput.js

@@ -1,13 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCombobox, ComboboxOption, Text, Combobox, ComboboxTarget, Input, rem, ComboboxDropdown, ComboboxOptions, ScrollAreaAutosize, ComboboxEmpty } from '@mantine/core';
 import { useFocusWithin, useWindowEvent, useMergedRef } from '@mantine/hooks';
-import { IconSearch } from '@tabler/icons-react';
 import { memo, useRef } from 'react';
 import { keys } from 'remeda';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
 import { useSearchActor, useSearch } from '../hooks.js';
 import { input } from './styles.css.js';
 import { moveFocusToSearchInput, stopAndPrevent, focusToFirstFoundElement } from './utils.js';
+import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
 
 function startingWithKind(search) {
   return search.match(/^(k|ki|kin|kind|kind:)$/) != null;

package/dist/search/components/ViewsColum.js

@@ -2,7 +2,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
 import { Stack, VisuallyHidden, UnstyledButton, createScopedKeydownHandler, ThemeIcon, Group, Highlight, Badge } from '@mantine/core';
-import { IconStack2, IconZoomScan } from '@tabler/icons-react';
 import * as m from 'motion/react-m';
 import { memo, useRef } from 'react';
 import { first } from 'remeda';
@@ -13,6 +12,8 @@ import { useNormalizedSearch, useSearchActor } from '../hooks.js';
 import { emptyBoX, buttonsva, focusable } from './_shared.css.js';
 import { moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
 import { viewButton } from './ViewsColumn.css.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';
+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 NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" });
 const ViewsColumn = memo(() => {
@@ -122,11 +123,11 @@ function ViewButton({ className, view, loop = false, search, ...props }) {
           /* @__PURE__ */ jsx(
             Highlight,
             {
-              highlight: view.$view.description ? search : "",
+              highlight: view.description.nonEmpty ? search : "",
               component: "div",
               className: btn.description,
               lineClamp: 1,
-              children: view.$view.description || "No description"
+              children: view.description.text || "No description"
             }
           )
         ] })

package/dist/state/DiagramActorProvider.js

@@ -10,7 +10,15 @@ import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges.js';
 import { diagramMachine } from './diagram-machine.js';
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor.js';
 
-const selectToggledFeatures = (state) => state.context.toggledFeatures;
+const selectToggledFeatures = (state) => {
+  if (state.context.features.enableReadOnly) {
+    return {
+      ...state.context.toggledFeatures,
+      enableReadOnly: true
+    };
+  }
+  return state.context.toggledFeatures;
+};
 function DiagramActorProvider({
   view,
   zoomable,

package/dist/state/diagram-machine.js

@@ -302,7 +302,7 @@ const _diagramMachine = setup({
           if (n.data.tags?.includes(event.tag)) {
             return setDimmed(n, false);
           }
-          return setDimmed(n, "immediate");
+          return setDimmed(n, true);
         })
       };
     }),