@likec4/diagram 1.38.1 → 1.39.0

package/dist/LikeC4Diagram.props.d.ts

@@ -1,9 +1,16 @@
-import { Any, aux, DiagramEdge, DiagramNode, LayoutedView, ViewChange, WhereOperator } from '@likec4/core/types';
+import { DiagramEdge, DiagramNode, LayoutedView, ViewChange, WhereOperator } from '@likec4/core/types';
 import { ReactFlowProps as XYFlowProps } from '@xyflow/react';
 import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { SetRequired } from 'type-fest';
 import { ControlsCustomLayout } from './context/ControlsCustomLayout';
 import { CustomNodes } from './custom/customNodes';
+import type * as t from '@likec4/core/types';
+type Any = t.aux.Any;
+type ViewId<A> = t.aux.ViewId<A>;
+type Fqn<A> = t.aux.Fqn<A>;
+type RelationId = t.aux.RelationId;
+type DeploymentFqn<A> = t.aux.DeploymentFqn<A>;
+type StrictViewId<A> = t.aux.StrictViewId<A>;
 export type { CustomNodes, WhereOperator };
 export type DiagramNodeWithNavigate<A extends Any> = SetRequired<DiagramNode<A>, 'navigateTo'>;
 export type ElementIconRendererProps = {
@@ -15,7 +22,7 @@ export type ElementIconRendererProps = {
     className?: string;
 };
 export type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode;
-export type OnNavigateTo<A extends Any = Any> = (to: aux.ViewId<A>, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate<A>) => void;
+export type OnNavigateTo<A extends Any = Any> = (to: ViewId<A>, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate<A>) => void;
 export type OnNodeClick<A extends Any = Any> = (node: DiagramNode<A>, event: ReactMouseEvent) => void;
 export type OnEdgeClick<A extends Any = Any> = (edge: DiagramEdge<A>, event: ReactMouseEvent) => void;
 /**
@@ -221,18 +228,18 @@ export interface LikeC4DiagramProperties<A extends Any = Any> {
      */
     reactFlowProps?: OverrideReactFlowProps | undefined;
 }
-export type OpenSourceParams<A extends aux.Any = aux.Any> = {
-    element: aux.Fqn<A>;
+export type OpenSourceParams<A extends Any = Any> = {
+    element: Fqn<A>;
     property?: string;
 } | {
-    relation: aux.RelationId;
+    relation: RelationId;
 } | {
-    deployment: aux.DeploymentFqn<A>;
+    deployment: DeploymentFqn<A>;
     property?: string;
 } | {
-    view: aux.StrictViewId<A>;
+    view: StrictViewId<A>;
 };
-export interface LikeC4DiagramEventHandlers<A extends aux.Any = aux.Any> {
+export interface LikeC4DiagramEventHandlers<A extends Any = Any> {
     onChange?: OnChange | null | undefined;
     onNavigateTo?: OnNavigateTo<A> | null | undefined;
     onNodeClick?: OnNodeClick<A> | null | undefined;

package/dist/base/BaseXYFlow.js

@@ -9,7 +9,7 @@ import { roundDpr } from '../utils/roundDpr.js';
 import { stopPropagation } from '../utils/xyflow.js';
 import { Background } from './Background.js';
 import { MinZoom, MaxZoom } from './const.js';
-import { setHovered } from './types.Base.js';
+import { Base } from './types.js';
 
 const BaseXYFlow = ({
   nodes,
@@ -104,7 +104,7 @@ const BaseXYFlow = ({
           onNodesChange([{
             id: node.id,
             type: "replace",
-            item: setHovered(node, true)
+            item: Base.setHovered(node, true)
           }]);
         }
       }),
@@ -117,7 +117,7 @@ const BaseXYFlow = ({
           onNodesChange([{
             id: node.id,
             type: "replace",
-            item: setHovered(node, false)
+            item: Base.setHovered(node, false)
           }]);
         }
       }),
@@ -130,7 +130,7 @@ const BaseXYFlow = ({
           onEdgesChange([{
             id: edge.id,
             type: "replace",
-            item: setHovered(edge, true)
+            item: Base.setHovered(edge, true)
           }]);
         }
       }),
@@ -143,7 +143,7 @@ const BaseXYFlow = ({
           onEdgesChange([{
             id: edge.id,
             type: "replace",
-            item: setHovered(edge, false)
+            item: Base.setHovered(edge, false)
           }]);
         }
       }),

package/dist/base/index.d.ts

@@ -1,3 +1,2 @@
 export { BaseXYFlow, type BaseXYFlowProps } from './BaseXYFlow';
-export { type EdgeProps, type NodeProps, type NonOptional, type ReactFlowEdge, type ReactFlowNode, } from './types';
-export * as Base from './types.Base';
+export { Base, type EdgeProps, type NodeProps, type NonOptional, type ReactFlowEdge, type ReactFlowNode, } from './types';

package/dist/base/primitives/MarkdownBlock.js

@@ -25,7 +25,8 @@ const MarkdownBlock = forwardRef(({
       ...props,
       className: cx(
         markdownBlock({
-          uselikec4palette
+          uselikec4palette,
+          value: value.isMarkdown ? "markdown" : "plaintext"
         }),
         className
       ),

package/dist/base/primitives/customEdge.d.ts

@@ -1,4 +1,4 @@
 import { FunctionComponent } from 'react';
-import { Base, EdgeProps } from '../types';
-export declare const edgePropsEqual: <P extends Record<string, unknown> = Base.EdgeData>(prev: EdgeProps<P>, next: EdgeProps<P>) => boolean;
-export declare function customEdge<P extends Record<string, unknown> = Base.EdgeData>(Edge: FunctionComponent<EdgeProps<P>>): FunctionComponent<EdgeProps<P>>;
+import { EdgeProps } from '../types';
+export declare const edgePropsEqual: <P extends EdgeProps<any>>(prev: P, next: P) => boolean;
+export declare function customEdge<P extends Record<string, unknown> = {}>(Edge: FunctionComponent<EdgeProps<P>>): FunctionComponent<EdgeProps<P>>;

package/dist/base/primitives/element/ElementTitle.js

@@ -56,7 +56,7 @@ function ElementTitle({ id, data, iconSize }) {
               children: data.technology
             }
           ),
-          data.description?.nonEmpty && (data.description.isMarkdown ? /* @__PURE__ */ jsx(
+          data.description?.nonEmpty && /* @__PURE__ */ jsx(
             MarkdownBlock,
             {
               className: cx(classes.description, "likec4-element-description"),
@@ -66,15 +66,7 @@ function ElementTitle({ id, data, iconSize }) {
               maxHeight: data.description.isMarkdown ? "8rem" : void 0,
               lineClamp: isSmOrXs ? 3 : 5
             }
-          ) : /* @__PURE__ */ jsx(
-            Text,
-            {
-              component: "div",
-              className: cx(classes.description, "likec4-element-description"),
-              lineClamp: isSmOrXs ? 3 : 5,
-              children: data.description.text
-            }
-          ))
+          )
         ] })
       ]
     }

package/dist/base/types.d.ts

@@ -1,6 +1,63 @@
-import { Edge as RFEdge, EdgeProps as ReactFlowEdgeProps, Node as RFNode, NodeProps as ReactFlowNodeProps } from '@xyflow/react';
 import { OptionalKeysOf, SetRequired, Simplify } from 'type-fest';
-import * as Base from './types.Base';
+import type * as RF from '@xyflow/react';
+type RFNode<NodeData extends Record<string, unknown> = Record<string, unknown>, NodeType extends string | undefined = string | undefined> = RF.Node<NodeData, NodeType>;
+type RFEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>, EdgeType extends string | undefined = string | undefined> = RF.Edge<EdgeData, EdgeType>;
+type ReactFlowNodeProps<NodeData extends Record<string, unknown> = Record<string, unknown>, NodeType extends string | undefined = string | undefined> = RF.NodeProps<RFNode<NodeData, NodeType>>;
+type ReactFlowEdgeProps<EdgeData extends Record<string, unknown> = Record<string, unknown>, EdgeType extends string | undefined = string | undefined> = RF.EdgeProps<RFEdge<EdgeData, EdgeType>>;
+export declare namespace Base {
+    export type Dimmed = 'immediate' | boolean;
+    export type NodeData = {
+        /**
+         * Whether the cursor is hovering over the node
+         */
+        hovered?: boolean;
+        /**
+         * Whether the node is dimmed
+         * 'immediate' means that the node is dimmed without delay
+         */
+        dimmed?: Dimmed;
+    };
+    export type Node = RFNode<NodeData>;
+    export type NodeProps = ReactFlowNodeProps<RFNode<NodeData, any>>;
+    export type EdgeData = {
+        /**
+         * Whether the cursor is hovering over the edge
+         */
+        hovered?: boolean;
+        /**
+         * Whether the edge is active (animated and highlighted)
+         */
+        active?: boolean;
+        /**
+         * Whether the edge is dimmed
+         * 'immediate' means that the edge is dimmed without delay
+         */
+        dimmed?: Dimmed;
+    };
+    export type Edge = Simplify<Omit<RFEdge, 'data'> & {
+        data: EdgeData;
+    }>;
+    type WithDimmed = {
+        data: {
+            dimmed?: Dimmed;
+        };
+    };
+    type WithHovered = {
+        data: {
+            hovered?: boolean;
+        };
+    };
+    export function setDimmed<T extends WithDimmed>(value: T, dimmed: 'immediate' | boolean): T;
+    export function setDimmed(dimmed: 'immediate' | boolean): <T extends WithDimmed>(value: T) => T;
+    export function setHovered<T extends WithHovered>(value: T, hovered: boolean): T;
+    export function setHovered(hovered: boolean): <T extends WithHovered>(value: T) => T;
+    type WithData<D> = {
+        data: D;
+    };
+    export function setData<E extends WithData<any>>(value: E, state: Partial<E['data']>): E;
+    export function setData<E extends WithData<any>>(state: Partial<E['data']>): (value: E) => E;
+    export {};
+}
 /**
  * To cooperate with `exactOptionalPropertyTypes` in `tsconfig.json`
  *
@@ -26,11 +83,11 @@ export type NonOptional<T extends object, Keys extends OptionalKeysOf<T> = Optio
 /**
  * ReactFlow Custom Node properties with BaseNodeData at least
  */
-export type NodeProps<T extends Record<string, unknown> = {}, NodeType extends string = string> = Simplify<ReactFlowNodeProps<RFNode<Base.NodeData & T, NodeType>>>;
+export type NodeProps<T extends Record<string, unknown> = {}, NodeType extends string = string> = Simplify<ReactFlowNodeProps<Base.NodeData & T, NodeType>>;
 /**
  * ReactFlow Custom Edge properties with BaseEdgeData at least
  */
-export type EdgeProps<T extends Record<string, unknown> = {}, EdgeType extends string = string> = SetRequired<Simplify<ReactFlowEdgeProps<RFEdge<Base.EdgeData & T, EdgeType>>>, 'data'>;
+export type EdgeProps<T extends Record<string, unknown> = {}, EdgeType extends string = string> = SetRequired<Simplify<ReactFlowEdgeProps<Base.EdgeData & T, EdgeType>>, 'data'>;
 export type ReactFlowNode<Data extends Record<string, unknown>, NodeType extends string> = SetRequired<RFNode<Data, NodeType>, 'type' | 'initialWidth' | 'initialHeight'>;
 export type ReactFlowEdge<Data extends Record<string, unknown>, EdgeType extends string> = SetRequired<RFEdge<Data, EdgeType>, 'type' | 'data'>;
-export * as Base from './types.Base';
+export {};

package/dist/base/types.js

@@ -0,0 +1,54 @@
+import { hasSubObject } from 'remeda';
+
+var Base;
+((Base2) => {
+  const _setDimmed = (v, dimmed) => (v.data.dimmed ?? false) === dimmed ? v : {
+    ...v,
+    data: {
+      ...v.data,
+      dimmed
+    }
+  };
+  function setDimmed(arg1, arg2) {
+    if (arg2 !== void 0) {
+      return _setDimmed(arg1, arg2);
+    }
+    return (v) => _setDimmed(v, arg1);
+  }
+  Base2.setDimmed = setDimmed;
+  const _setHovered = (v, hovered) => (v.data.hovered ?? false) === hovered ? v : {
+    ...v,
+    data: {
+      ...v.data,
+      hovered
+    }
+  };
+  function setHovered(arg1, arg2) {
+    if (arg2 !== void 0) {
+      return _setHovered(arg1, arg2);
+    }
+    return (v) => _setHovered(v, arg1);
+  }
+  Base2.setHovered = setHovered;
+  function _setData(value, state) {
+    if (hasSubObject(value.data, state)) {
+      return value;
+    }
+    return {
+      ...value,
+      data: {
+        ...value.data,
+        ...state
+      }
+    };
+  }
+  function setData(arg1, arg2) {
+    if (arg2 !== void 0) {
+      return _setData(arg1, arg2);
+    }
+    return (edge) => _setData(edge, arg1);
+  }
+  Base2.setData = setData;
+})(Base || (Base = {}));
+
+export { Base };

package/dist/bundle/LikeC4View.d.ts

@@ -1,3 +1,3 @@
-import { Any, UnknownLayouted } from '@likec4/core/types';
 import { LikeC4ViewProps } from './LikeC4View.props';
-export declare function LikeC4View<A extends Any = UnknownLayouted>({ viewId, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;
+import type * as t from '@likec4/core/types';
+export declare function LikeC4View<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/bundle/LikeC4View.props.d.ts

@@ -1,11 +1,12 @@
-import { Any, aux, WhereOperator } from '@likec4/core/types';
+import { WhereOperator } from '@likec4/core/types';
 import { CSSProperties } from 'react';
 import { CustomNodes, ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit, ViewPadding } from '../LikeC4Diagram.props';
-export interface LikeC4ViewProps<A extends Any> {
+import type * as t from '@likec4/core/types';
+export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
     /**
      * View to display.
      */
-    viewId: aux.ViewId<A>;
+    viewId: t.aux.ViewId<A>;
     /**
      * Enable/disable panning
      * @default false

package/dist/bundle/ReactLikeC4.d.ts

@@ -1,8 +1,8 @@
-import { Any, aux, UnknownLayouted } from '@likec4/core/types';
 import { CSSProperties } from 'react';
 import { LikeC4DiagramProps } from '../LikeC4Diagram';
-export type ReactLikeC4Props<A extends Any> = Omit<LikeC4DiagramProps<A>, 'view'> & {
-    viewId: aux.ViewId<A>;
+import type * as t from '@likec4/core/types';
+export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = Omit<LikeC4DiagramProps<A>, 'view'> & {
+    viewId: t.aux.ViewId<A>;
     /**
      * Keep aspect ratio of the diagram
      * Disable if you need to manage the viewport (use className)
@@ -27,7 +27,7 @@ export type ReactLikeC4Props<A extends Any> = Omit<LikeC4DiagramProps<A>, 'view'
     /** Function to generate nonce attribute added to all generated `<style />` tags */
     styleNonce?: string | (() => string) | undefined;
 };
-export declare function ReactLikeC4<A extends Any = UnknownLayouted>({ viewId, ...props }: ReactLikeC4Props<A>): import("react/jsx-runtime").JSX.Element;
+export declare function ReactLikeC4<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, ...props }: ReactLikeC4Props<A>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ReactLikeC4 {
     var displayName: string;
 }

package/dist/custom/customNodes.d.ts

@@ -1,8 +1,9 @@
 import { NodeModel } from '@likec4/core/model';
-import { Any } from '@likec4/core/types';
+import { aux } from '@likec4/core/types';
 import { FunctionComponent } from 'react';
 import { NodeProps } from '../base/types';
 import { Types } from '../likec4diagram/types';
+type Any = aux.Any;
 type CustomDiagramNodeProps = {
     nodeProps: NodeProps<Types.NodeData, string>;
     nodeModel: NodeModel;

package/dist/hooks/useXYFlow.d.ts

@@ -2,8 +2,7 @@ import { ReactFlowInstance, ReactFlowState, InternalNode } from '@xyflow/react';
 import { Types } from '../likec4diagram/types';
 import { EdgeMarkerType, HandleType, XYPosition } from '@xyflow/system';
 import { ReactNode, CSSProperties, AriaRole, SVGAttributes } from 'react';
-import { Dimmed } from '../base/types.Base';
-import { EdgeId, NonEmptyArray, Point, Color, RelationshipLineType, RelationshipArrowType, BBox, ViewId, MarkdownOrString } from '@likec4/core';
+import { EdgeId, NonEmptyArray, Point, Color, RelationshipLineType, RelationshipArrowType, BBox, ViewId, RichTextOrEmpty } from '@likec4/core';
 export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
     id: string;
     source: string;
@@ -31,12 +30,12 @@ export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
     reconnectable?: boolean | HandleType;
     focusable?: boolean;
     ariaRole?: AriaRole;
-    domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
+    domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
     type: "relationship";
     data: {
         hovered?: boolean;
         active?: boolean;
-        dimmed?: Dimmed;
+        dimmed?: import("../base").Base.Dimmed;
         id: EdgeId;
         label: string | null;
         points: NonEmptyArray<Point>;
@@ -48,7 +47,7 @@ export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
         head: RelationshipArrowType | undefined;
         labelBBox: BBox | null | undefined;
         navigateTo: ViewId<string> | null | undefined;
-        notes: MarkdownOrString | undefined;
+        notes: RichTextOrEmpty;
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
     };
@@ -84,12 +83,12 @@ export declare const useXYStoreApi: () => {
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
         ariaRole?: AriaRole;
-        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
+        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
         type: "relationship";
         data: {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: Dimmed;
+            dimmed?: import("../base").Base.Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
@@ -101,7 +100,7 @@ export declare const useXYStoreApi: () => {
             head: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
-            notes: MarkdownOrString | undefined;
+            notes: RichTextOrEmpty;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
         };
@@ -133,12 +132,12 @@ export declare const useXYStoreApi: () => {
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
         ariaRole?: AriaRole;
-        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
+        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
         type: "relationship";
         data: {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: Dimmed;
+            dimmed?: import("../base").Base.Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
@@ -150,7 +149,7 @@ export declare const useXYStoreApi: () => {
             head: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
-            notes: MarkdownOrString | undefined;
+            notes: RichTextOrEmpty;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
         };
@@ -181,12 +180,12 @@ export declare const useXYStoreApi: () => {
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
         ariaRole?: AriaRole;
-        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
+        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
         type: "relationship";
         data: {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: Dimmed;
+            dimmed?: import("../base").Base.Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
@@ -198,7 +197,7 @@ export declare const useXYStoreApi: () => {
             head: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
-            notes: MarkdownOrString | undefined;
+            notes: RichTextOrEmpty;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
         };
@@ -229,12 +228,12 @@ export declare const useXYStoreApi: () => {
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
         ariaRole?: AriaRole;
-        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
+        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
         type: "relationship";
         data: {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: Dimmed;
+            dimmed?: import("../base").Base.Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
@@ -246,7 +245,7 @@ export declare const useXYStoreApi: () => {
             head: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
-            notes: MarkdownOrString | undefined;
+            notes: RichTextOrEmpty;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
         };
@@ -277,12 +276,12 @@ export declare const useXYStoreApi: () => {
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
         ariaRole?: AriaRole;
-        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
+        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
         type: "relationship";
         data: {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: Dimmed;
+            dimmed?: import("../base").Base.Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
@@ -294,7 +293,7 @@ export declare const useXYStoreApi: () => {
             head: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
-            notes: MarkdownOrString | undefined;
+            notes: RichTextOrEmpty;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
         };
@@ -325,12 +324,12 @@ export declare const useXYStoreApi: () => {
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
         ariaRole?: AriaRole;
-        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
+        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
         type: "relationship";
         data: {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: Dimmed;
+            dimmed?: import("../base").Base.Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
@@ -342,7 +341,7 @@ export declare const useXYStoreApi: () => {
             head: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
-            notes: MarkdownOrString | undefined;
+            notes: RichTextOrEmpty;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
         };
@@ -374,12 +373,12 @@ export declare const useXYStoreApi: () => {
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
         ariaRole?: AriaRole;
-        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
+        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
         type: "relationship";
         data: {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: Dimmed;
+            dimmed?: import("../base").Base.Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
@@ -391,7 +390,7 @@ export declare const useXYStoreApi: () => {
             head: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
-            notes: MarkdownOrString | undefined;
+            notes: RichTextOrEmpty;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
         };
@@ -422,12 +421,12 @@ export declare const useXYStoreApi: () => {
         reconnectable?: boolean | HandleType;
         focusable?: boolean;
         ariaRole?: AriaRole;
-        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label">;
+        domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
         type: "relationship";
         data: {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: Dimmed;
+            dimmed?: import("../base").Base.Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
@@ -439,7 +438,7 @@ export declare const useXYStoreApi: () => {
             head: RelationshipArrowType | undefined;
             labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | null | undefined;
-            notes: MarkdownOrString | undefined;
+            notes: RichTextOrEmpty;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
         };

package/dist/likec4diagram/custom/edges/RelationshipEdge.d.ts

@@ -1,8 +1,7 @@
-import { EdgeId, NonEmptyArray, Point, Color, RelationshipLineType, RelationshipArrowType, BBox, ViewId, MarkdownOrString } from '@likec4/core';
+import { EdgeId, NonEmptyArray, Point, Color, RelationshipLineType, RelationshipArrowType, BBox, ViewId, RichTextOrEmpty } from '@likec4/core';
 import { XYPosition } from '@xyflow/react';
 import { FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
-import { EdgeData, Dimmed } from '../../../base/types.Base';
 export declare const RelationshipEdge: FunctionComponent<{
     id: string;
     selected?: boolean;
@@ -30,10 +29,10 @@ export declare const RelationshipEdge: FunctionComponent<{
     markerEnd?: string;
     pathOptions?: any;
     interactionWidth?: number;
-    data: EdgeData & {
+    data: import("../../../base").Base.EdgeData & {
         hovered?: boolean;
         active?: boolean;
-        dimmed?: Dimmed;
+        dimmed?: import("../../../base").Base.Dimmed;
         id: EdgeId;
         label: string | null;
         points: NonEmptyArray<Point>;
@@ -45,7 +44,7 @@ export declare const RelationshipEdge: FunctionComponent<{
         head: RelationshipArrowType | undefined;
         labelBBox: BBox | null | undefined;
         navigateTo: ViewId<string> | null | undefined;
-        notes: MarkdownOrString | undefined;
+        notes: RichTextOrEmpty;
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
     };

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

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
-import { hasAtLeast } from '@likec4/core';
 import { useMemo } from 'react';
+import { hasAtLeast } from 'remeda';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';

package/dist/likec4diagram/types.d.ts

@@ -73,7 +73,8 @@ export declare namespace Types {
     type ViewGroupNode = ReactFlowNode<ViewGroupNodeData, 'view-group'>;
     type Node = ElementNode | DeploymentElementNode | CompoundElementNode | CompoundDeploymentNode | ViewGroupNode;
     type NodeData = Node['data'];
-    type RelationshipEdgeData = Simplify<Base.EdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'labelBBox' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'notes'>> & {
+    type RelationshipEdgeData = Simplify<Base.EdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'labelBBox' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo'>> & {
+        notes: RichTextOrEmpty;
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
     }>;

package/dist/likec4diagram/useViewToNodesEdges.js

@@ -204,7 +204,7 @@ function viewToNodesEdge(opts) {
         id: edge.id,
         label: edge.label,
         technology: edge.technology,
-        notes: edge.notes,
+        notes: RichText.from(edge.notes),
         navigateTo: edge.navigateTo,
         controlPoints: edge.controlPoints ?? null,
         labelBBox: edge.labelBBox ?? null,

package/dist/likec4model/LikeC4ModelContext.d.ts

@@ -1,7 +1,10 @@
 import { LikeC4Model, LikeC4ViewModel } from '@likec4/core/model';
-import { aux, DiagramView } from '@likec4/core/types';
+import { DiagramView } from '@likec4/core/types';
 import { PropsWithChildren, Context } from 'react';
+import type * as t from '@likec4/core/types';
+type UnknownLayouted = t.aux.UnknownLayouted;
 export declare const LikeC4ModelContext: Context<LikeC4Model<any> | null>;
-export type CurrentViewModel = LikeC4ViewModel<aux.UnknownLayouted, DiagramView<aux.UnknownLayouted>>;
+export type CurrentViewModel = LikeC4ViewModel<UnknownLayouted, DiagramView<UnknownLayouted>>;
 export declare const CurrentViewModelContext: Context<CurrentViewModel | null>;
 export declare function EnsureCurrentViewModel({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/likec4model/useLikeC4ElementsTree.js

@@ -1,4 +1,4 @@
-import { compareNatural } from '@likec4/core';
+import { compareNatural } from '@likec4/core/utils';
 import { useMemo } from 'react';
 import { useLikeC4Model } from './useLikeC4Model.js';