@likec4/diagram 1.30.0 → 1.32.0

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

@@ -621,6 +621,9 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<{
                             focusable?: boolean;
                             type: "relationship";
                             data: {
+                                hovered?: boolean;
+                                active?: boolean;
+                                dimmed?: Base.Dimmed;
                                 relationId: RelationId;
                                 color: Color | undefined;
                                 label: string | null;
@@ -628,9 +631,6 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<{
                                 description?: string | undefined | undefined;
                                 navigateTo: ViewId | null;
                                 line: RelationshipLineType;
-                                hovered?: boolean;
-                                active?: boolean;
-                                dimmed?: Base.Dimmed;
                             };
                         }[];
                         bounds: BBox;

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

@@ -7,7 +7,7 @@ import { MinZoom } from '../../base/const.js';
 import { updateEdges } from '../../base/updateEdges.js';
 import { updateNodes } from '../../base/updateNodes.js';
 import { layoutResultToXYFlow } from './layout-to-xyflow.js';
-import { Base } from '../../base/types.js';
+import { setDimmed, setHovered, setData } from '../../base/types.Base.js';
 
 function inputToSubject(input) {
   if ("edgeId" in input) {
@@ -161,12 +161,12 @@ const relationshipDetailsLogic = setup({
                 );
                 return context.xyedges.map((edge) => {
                   if (edge.id === event.edge.id) {
-                    return Base.setData(edge, {
+                    return setData(edge, {
                       hovered: true,
                       dimmed: false
                     });
                   }
-                  return hasDimmed && !edge.selected ? Base.setDimmed(edge, "immediate") : edge;
+                  return hasDimmed && !edge.selected ? setDimmed(edge, "immediate") : edge;
                 });
               }
             }),
@@ -180,7 +180,7 @@ const relationshipDetailsLogic = setup({
             assign({
               xyedges: ({ context, event }) => context.xyedges.map((edge) => {
                 if (edge.id === event.edge.id) {
-                  return Base.setHovered(edge, false);
+                  return setHovered(edge, false);
                 }
                 return edge;
               })
@@ -191,7 +191,7 @@ const relationshipDetailsLogic = setup({
         },
         "dim.nonhovered.edges": {
           actions: assign({
-            xyedges: ({ context }) => context.xyedges.map((edge) => Base.setDimmed(edge, edge.data.hovered !== true))
+            xyedges: ({ context }) => context.xyedges.map((edge) => setDimmed(edge, edge.data.hovered !== true))
           })
         },
         "undim.edges": {
@@ -200,10 +200,10 @@ const relationshipDetailsLogic = setup({
               const hasSelected = context.xyedges.some((edge) => edge.selected === true);
               if (hasSelected) {
                 return context.xyedges.map(
-                  (edge) => Base.setDimmed(edge, edge.selected !== true ? edge.data.dimmed || "immediate" : false)
+                  (edge) => setDimmed(edge, edge.selected !== true ? edge.data.dimmed || "immediate" : false)
                 );
               }
-              return context.xyedges.map(Base.setDimmed(false));
+              return context.xyedges.map(setDimmed(false));
             }
           })
         },

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

@@ -1,6 +1,6 @@
 import { hasAtLeast, invariant, isAncestor, sortParentsFirst } from '@likec4/core';
-import { treeFromElements } from '../../packages/core/src/compute-view/relationships-view/utils.js';
-import { findConnection } from '../../packages/core/src/model/connection/model/find.js';
+import { treeFromElements } from '@likec4/core/compute-view/relationships';
+import { modelConnection } from '@likec4/core/model';
 
 const finalize = (elements, explicits) => {
   if (elements.size > 2 && explicits.size !== elements.size) {
@@ -96,7 +96,7 @@ function computeRelationshipDetailsViewData({
   if (target) {
     addExplicit(target, "target");
   }
-  const [connection] = findConnection(source, target, "directed");
+  const [connection] = modelConnection.findConnection(source, target, "directed");
   if (!connection) {
     return {
       sources,

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

@@ -1,15 +1,16 @@
-import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+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';
-export declare const RelationshipEdge: NamedExoticComponent<{
+export declare const RelationshipEdge: FunctionComponent<{
     id: string;
     selected?: boolean;
     selectable?: boolean;
     deletable?: boolean;
     style?: CSSProperties;
+    animated?: boolean;
     source: string;
     target: string;
-    animated?: boolean;
     sourceX: number;
     sourceY: number;
     targetX: number;
@@ -28,11 +29,10 @@ export declare const RelationshipEdge: NamedExoticComponent<{
     markerEnd?: string;
     pathOptions?: any;
     interactionWidth?: number;
-    data: {
+    data: EdgeData & {
         hovered?: boolean;
         active?: boolean;
-        dimmed?: import("../../../base").Base.Dimmed;
-    } & {
+        dimmed?: Dimmed;
         relationId: RelationId;
         color: Color | undefined;
         label: string | null;
@@ -40,8 +40,5 @@ export declare const RelationshipEdge: NamedExoticComponent<{
         description?: string | undefined | undefined;
         navigateTo: ViewId | null;
         line: RelationshipLineType;
-        hovered?: boolean;
-        active?: boolean;
-        dimmed?: import("../../../base").Base.Dimmed;
     };
 }>;

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { getBezierPath } from '@xyflow/system';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { customEdge } from '../../../base/primitives/customEdge.js';
-import { useEnabledFeature } from '../../../context/DiagramFeatures.js';
+import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { EdgeContainer } from '../../../base/primitives/edge/EdgeContainer.js';
 import { EdgePath } from '../../../base/primitives/edge/EdgePath.js';
 import { EdgeLabelContainer } from '../../../base/primitives/edge/EdgeLabelContainer.js';
@@ -10,7 +10,7 @@ import { EdgeLabel } from '../../../base/primitives/edge/EdgeLabel.js';
 import { EdgeActionButton } from '../../../base/primitives/edge/EdgeActionButton.js';
 
 const RelationshipEdge = customEdge((props) => {
-  const { enableNavigateTo } = useEnabledFeature("NavigateTo");
+  const { enableNavigateTo } = useEnabledFeatures();
   const {
     sourceX,
     targetY,

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

@@ -1,36 +1,8 @@
 import { NodeProps } from '../../../base';
 import { RelationshipDetailsTypes } from '../_types';
-import { NamedExoticComponent } from 'react';
-import { ElementStyle, Color, ViewId, Fqn, IconUrl } from '@likec4/core';
-export declare const ElementNode: NamedExoticComponent<NodeProps<{
-    width: number;
-    height: number;
-    style: ElementStyle;
-    title: string;
-    technology: string | null;
-    description: string | null;
-    color: Color;
-    shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
-    navigateTo: ViewId<string> | null | undefined;
-    column: RelationshipDetailsTypes.Column;
-    fqn: Fqn;
-    icon: IconUrl;
-    ports: RelationshipDetailsTypes.Ports;
-    hovered?: boolean;
-    dimmed?: import("../../../base").Base.Dimmed;
-}>>;
-export declare const CompoundNode: NamedExoticComponent<NodeProps<{
-    style: ElementStyle;
-    title: string;
-    color: Color;
-    column: RelationshipDetailsTypes.Column;
-    fqn: Fqn;
-    depth: number;
-    icon?: IconUrl;
-    ports: RelationshipDetailsTypes.Ports;
-    hovered?: boolean;
-    dimmed?: import("../../../base").Base.Dimmed;
-}>>;
+import { MemoExoticComponent } from 'react';
+export declare const ElementNode: MemoExoticComponent<(props: NodeProps<RelationshipDetailsTypes.ElementNodeData, string>) => import("react/jsx-runtime").JSX.Element>;
+export declare const CompoundNode: MemoExoticComponent<(props: NodeProps<RelationshipDetailsTypes.CompoundNodeData, string>) => import("react/jsx-runtime").JSX.Element>;
 type ElementPortsProps = NodeProps<Pick<RelationshipDetailsTypes.ElementNodeData, 'ports' | 'height'>>;
 export declare const ElementPorts: ({ data: { ports, height: h } }: ElementPortsProps) => import("react/jsx-runtime").JSX.Element;
 type CompoundPortsProps = NodeProps<Pick<RelationshipDetailsTypes.CompoundNodeData, 'ports'>>;

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

@@ -2,6 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { ElementActions } from './ElementActions.js';
 import { Handle } from '@xyflow/react';
 import { Position } from '@xyflow/system';
+import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { customNode } from '../../../base/primitives/customNode.js';
 import { CompoundNodeContainer } from '../../../base/primitives/compound/CompoundNodeContainer.js';
@@ -9,6 +10,7 @@ import { CompoundTitle } from '../../../base/primitives/compound/CompoundTitle.j
 import { ElementNodeContainer } from '../../../base/primitives/element/ElementNodeContainer.js';
 import { ElementShape } from '../../../base/primitives/element/ElementShape.js';
 import { ElementTitle } from '../../../base/primitives/element/ElementTitle.js';
+import { ElementTags } from '../../../base/primitives/element/ElementTags.js';
 import { ElementDetailsButton } from '../../../base/primitives/element/ElementDetailsButton.js';
 
 const ElementDetailsButtonWithHandler = (props) => {
@@ -25,9 +27,11 @@ const ElementDetailsButtonWithHandler = (props) => {
   );
 };
 const ElementNode = customNode((props) => {
+  const { enableElementTags } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
     /* @__PURE__ */ jsx(ElementTitle, { ...props }),
+    enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
     /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
     /* @__PURE__ */ jsx(ElementPorts, { ...props })

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

@@ -3,6 +3,7 @@ import { RelationshipDetailsActorRef, RelationshipDetailsSnapshot, Events } from
 import { Context, ReactNode, CSSProperties } from 'react';
 import { GeneralHelpers, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
 import { EdgeMarkerType, HandleType } from '@xyflow/system';
+import { Dimmed } from '../../base/types.Base';
 export declare const RelationshipDetailsActorContext: Context<RelationshipDetailsActorRef | null>;
 export declare function useRelationshipDetailsActor(): RelationshipDetailsActorRef;
 export declare function useRelationshipDetailsState<T = unknown>(selector: (state: RelationshipDetailsSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
@@ -48,6 +49,9 @@ export declare function useRelationshipDetails(): {
             focusable?: boolean;
             type: "relationship";
             data: {
+                hovered?: boolean;
+                active?: boolean;
+                dimmed?: Dimmed;
                 relationId: RelationId;
                 color: Color | undefined;
                 label: string | null;
@@ -55,9 +59,6 @@ export declare function useRelationshipDetails(): {
                 description?: string | undefined | undefined;
                 navigateTo: ViewId | null;
                 line: RelationshipLineType;
-                hovered?: boolean;
-                active?: boolean;
-                dimmed?: import("../../base").Base.Dimmed;
             };
         }> & ViewportHelperFunctions & {
             viewportInitialized: boolean;
@@ -91,6 +92,9 @@ export declare function useRelationshipDetails(): {
                 focusable?: boolean;
                 type: "relationship";
                 data: {
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -98,9 +102,6 @@ export declare function useRelationshipDetails(): {
                     description?: string | undefined | undefined;
                     navigateTo: ViewId | null;
                     line: RelationshipLineType;
-                    hovered?: boolean;
-                    active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
                 };
             }>;
             setState: (partial: ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
@@ -131,6 +132,9 @@ export declare function useRelationshipDetails(): {
                 focusable?: boolean;
                 type: "relationship";
                 data: {
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -138,9 +142,6 @@ export declare function useRelationshipDetails(): {
                     description?: string | undefined | undefined;
                     navigateTo: ViewId | null;
                     line: RelationshipLineType;
-                    hovered?: boolean;
-                    active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
                 };
             }> | Partial< ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
                 id: string;
@@ -170,6 +171,9 @@ export declare function useRelationshipDetails(): {
                 focusable?: boolean;
                 type: "relationship";
                 data: {
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -177,9 +181,6 @@ export declare function useRelationshipDetails(): {
                     description?: string | undefined | undefined;
                     navigateTo: ViewId | null;
                     line: RelationshipLineType;
-                    hovered?: boolean;
-                    active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
                 };
             }>> | ((state: ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
                 id: string;
@@ -209,6 +210,9 @@ export declare function useRelationshipDetails(): {
                 focusable?: boolean;
                 type: "relationship";
                 data: {
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -216,9 +220,6 @@ export declare function useRelationshipDetails(): {
                     description?: string | undefined | undefined;
                     navigateTo: ViewId | null;
                     line: RelationshipLineType;
-                    hovered?: boolean;
-                    active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
                 };
             }>) => ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
                 id: string;
@@ -248,6 +249,9 @@ export declare function useRelationshipDetails(): {
                 focusable?: boolean;
                 type: "relationship";
                 data: {
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -255,9 +259,6 @@ export declare function useRelationshipDetails(): {
                     description?: string | undefined | undefined;
                     navigateTo: ViewId | null;
                     line: RelationshipLineType;
-                    hovered?: boolean;
-                    active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
                 };
             }> | Partial< ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
                 id: string;
@@ -287,6 +288,9 @@ export declare function useRelationshipDetails(): {
                 focusable?: boolean;
                 type: "relationship";
                 data: {
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -294,9 +298,6 @@ export declare function useRelationshipDetails(): {
                     description?: string | undefined | undefined;
                     navigateTo: ViewId | null;
                     line: RelationshipLineType;
-                    hovered?: boolean;
-                    active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
                 };
             }>>), replace?: boolean | undefined) => void;
             subscribe: (listener: (state: ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
@@ -327,6 +328,9 @@ export declare function useRelationshipDetails(): {
                 focusable?: boolean;
                 type: "relationship";
                 data: {
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -334,9 +338,6 @@ export declare function useRelationshipDetails(): {
                     description?: string | undefined | undefined;
                     navigateTo: ViewId | null;
                     line: RelationshipLineType;
-                    hovered?: boolean;
-                    active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
                 };
             }>, prevState: ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
                 id: string;
@@ -366,6 +367,9 @@ export declare function useRelationshipDetails(): {
                 focusable?: boolean;
                 type: "relationship";
                 data: {
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -373,9 +377,6 @@ export declare function useRelationshipDetails(): {
                     description?: string | undefined | undefined;
                     navigateTo: ViewId | null;
                     line: RelationshipLineType;
-                    hovered?: boolean;
-                    active?: boolean;
-                    dimmed?: import("../../base").Base.Dimmed;
                 };
             }>) => void) => () => void;
         } | null;

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

@@ -2,11 +2,11 @@ import { nonNullable } from '@likec4/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
-import { r as reactExports } from '../../_virtual/index.js';
+import { createContext, useMemo, useContext } from 'react';
 
-const RelationshipDetailsActorContext = reactExports.createContext(null);
+const RelationshipDetailsActorContext = createContext(null);
 function useRelationshipDetailsActor() {
-  return nonNullable(reactExports.useContext(RelationshipDetailsActorContext), "No RelationshipDetailsActorContext");
+  return nonNullable(useContext(RelationshipDetailsActorContext), "No RelationshipDetailsActorContext");
 }
 function useRelationshipDetailsState(selector, compare = shallowEqual) {
   const select = useCallbackRef(selector);
@@ -15,7 +15,7 @@ function useRelationshipDetailsState(selector, compare = shallowEqual) {
 }
 function useRelationshipDetails() {
   const actor = useRelationshipDetailsActor();
-  return reactExports.useMemo(() => ({
+  return useMemo(() => ({
     actor,
     get rootElementId() {
       return `relationship-details-${actor.sessionId.replaceAll(":", "_")}`;

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

@@ -93,6 +93,7 @@ function layoutResultToXYFlow(layout) {
               icon: node.icon ?? "none",
               ports: node.ports,
               style: node.style,
+              tags: node.tags,
               ...navigateTo
             }
           }

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

@@ -1,9 +1,8 @@
+import { treeFromElements } from '@likec4/core/compute-view/relationships';
 import dagre from '@dagrejs/dagre';
 import { invariant } from '@likec4/core';
+import { ifind, DefaultMap } from '@likec4/core/utils';
 import { pipe, filter, mapToObj, find, map, tap, reduce, sortBy, prop } from 'remeda';
-import { ifind } from '../../packages/core/src/utils/iterable/find.js';
-import DefaultMap from '../../_virtual/default-map.js';
-import { treeFromElements } from '../../packages/core/src/compute-view/relationships-view/utils.js';
 
 const Sizes = {
   dagre: {
@@ -237,11 +236,13 @@ function layoutRelationshipDetails(data, scope) {
     return {
       id,
       parent: parentId ?? null,
+      x: position.x,
+      y: position.y,
       position: [position.x, position.y],
       title: element.title,
       description: element.description,
       technology: element.technology,
-      tags: null,
+      tags: [...element.tags],
       links: null,
       color: inheritFromNodeOrAncestor?.color ?? element.color,
       shape: inheritFromNode?.shape ?? element.shape,

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

@@ -1,17 +1,18 @@
 import { RelationshipsBrowserActorRef } from './actor';
-import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
+import { EdgeData, Dimmed } from '../../base/types.Base';
 import { Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const edgeTypes: {
-    relationship: NamedExoticComponent<{
+    relationship: FunctionComponent<{
         id: string;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         style?: CSSProperties;
+        animated?: boolean;
         source: string;
         target: string;
-        animated?: boolean;
         sourceX: number;
         sourceY: number;
         targetX: number;
@@ -30,11 +31,10 @@ export declare const edgeTypes: {
         markerEnd?: string;
         pathOptions?: any;
         interactionWidth?: number;
-        data: {
+        data: EdgeData & {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: import("../../base").Base.Dimmed;
-        } & {
+            dimmed?: Dimmed;
             sourceFqn: Fqn;
             targetFqn: Fqn;
             relations: NonEmptyArray<RelationId>;
@@ -43,9 +43,6 @@ export declare const edgeTypes: {
             navigateTo: ViewId | null;
             line: RelationshipLineType;
             existsInCurrentView: boolean;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../../base").Base.Dimmed;
         };
     }>;
 };

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

@@ -6,7 +6,7 @@ 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';
-import { r as reactExports } from '../../_virtual/index.js';
+import { useRef, memo, useEffect } from 'react';
 import { BaseXYFlow } from '../../base/BaseXYFlow.js';
 import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
 import { useRelationshipsView } from './layout.js';
@@ -23,7 +23,7 @@ const edgeTypes = {
   relationship: RelationshipEdge
 };
 function RelationshipsBrowser({ actorRef }) {
-  const initialRef = reactExports.useRef(null);
+  const initialRef = useRef(null);
   if (initialRef.current == null) {
     initialRef.current = {
       initialNodes: [],
@@ -38,7 +38,7 @@ const selector = (state) => ({
   edges: state.context.xyedges
 });
 const selectorEq = (a, b) => a.isActive === b.isActive && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges);
-const RelationshipsBrowserXYFlow = reactExports.memo(() => {
+const RelationshipsBrowserXYFlow = memo(() => {
   const browser = useRelationshipsBrowser();
   const {
     isActive,
@@ -108,7 +108,7 @@ const selector2 = (state) => ({
   scope: state.context.scope,
   closeable: state.context.closeable
 });
-const RelationshipsBrowserInner = reactExports.memo(() => {
+const RelationshipsBrowserInner = memo(() => {
   const browser = useRelationshipsBrowser();
   const {
     subjectId,
@@ -118,24 +118,24 @@ const RelationshipsBrowserInner = reactExports.memo(() => {
   } = useRelationshipsBrowserState(selector2);
   const store = useStoreApi();
   const instance = useReactFlow();
-  reactExports.useEffect(() => {
+  useEffect(() => {
     if (instance.viewportInitialized) {
       browser.send({ type: "xyflow.init", instance, store });
     }
   }, [store, instance.viewportInitialized, browser]);
   const layouted = useRelationshipsView(subjectId, viewId, scope);
   const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId);
-  reactExports.useEffect(() => {
+  useEffect(() => {
     if (historySubjectId !== subjectId) {
       historyOps.set(subjectId);
     }
   }, [subjectId]);
-  reactExports.useEffect(() => {
+  useEffect(() => {
     if (historySubjectId !== subjectId) {
       browser.navigateTo(historySubjectId);
     }
   }, [historySubjectId, browser]);
-  reactExports.useEffect(() => {
+  useEffect(() => {
     browser.updateView(layouted);
   }, [layouted, browser]);
   const hasStepBack = current > 0;

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

@@ -2,7 +2,7 @@ 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 { r as reactExports } from '../../_virtual/index.js';
+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';
@@ -22,7 +22,7 @@ const selector2 = (state) => {
 };
 const setHoveredNode = () => {
 };
-const SelectElement = reactExports.memo(() => {
+const SelectElement = memo(() => {
   const browser = useRelationshipsBrowser();
   const {
     subjectId,
@@ -32,16 +32,16 @@ const SelectElement = reactExports.memo(() => {
     enableSelectSubject,
     enableChangeScope
   } = useRelationshipsBrowserState(selector2);
-  const root = reactExports.useRef(null);
-  const viewport = reactExports.useRef(null);
-  const model = useLikeC4Model(true);
+  const root = useRef(null);
+  const viewport = useRef(null);
+  const model = useLikeC4Model();
   const subject = model.findElement(subjectId);
   const data = useLikeC4ElementsTree(scope === "view" && viewId ? viewId : void 0);
   const tree = useTree({
     multiple: false
   });
   tree.setHoveredNode = setHoveredNode;
-  reactExports.useEffect(() => {
+  useEffect(() => {
     ancestorsFqn(subjectId).reverse().forEach((id) => {
       tree.expand(id);
     });

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

@@ -1,4 +1,5 @@
-import { Color, DiagramNode, Fqn, IconUrl, NonEmptyArray, RelationId, RelationshipLineType, ViewId } from '@likec4/core';
+import { Color, DiagramNode, Fqn, IconUrl, NonEmptyArray, RelationId, RelationshipLineType, ViewId } from '@likec4/core/types';
+import { Simplify } from 'type-fest';
 import { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types';
 export declare namespace RelationshipsBrowserTypes {
     type Column = 'incomers' | 'subjects' | 'outgoers';
@@ -9,14 +10,14 @@ export declare namespace RelationshipsBrowserTypes {
         in: string[];
         out: string[];
     };
-    type ElementNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'style' | 'width' | 'height' | 'navigateTo'>> & {
+    type ElementNodeData = Simplify<Base.NodeData & NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'style' | 'width' | 'height' | 'tags' | 'navigateTo'>> & {
         column: Column;
         fqn: Fqn;
         icon: string | null;
         ports: Ports;
         existsInCurrentView: boolean;
     }>;
-    type CompoundNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'color' | 'shape' | 'style'>> & {
+    type CompoundNodeData = Simplify<Base.NodeData & NonOptional<Pick<DiagramNode, 'title' | 'color' | 'shape' | 'style'>> & {
         column: Column;
         fqn: Fqn;
         depth: number;
@@ -26,13 +27,13 @@ export declare namespace RelationshipsBrowserTypes {
     }>;
     type ElementNode = ReactFlowNode<ElementNodeData, 'element'>;
     type CompoundNode = ReactFlowNode<CompoundNodeData, 'compound'>;
-    type EmptyNodeData = Base.NodeData<{
+    type EmptyNodeData = Base.NodeData & {
         column: Column;
-    }>;
+    };
     type EmptyNode = ReactFlowNode<EmptyNodeData, 'empty'>;
     type Node = ElementNode | CompoundNode | EmptyNode;
     type NodeData = Node['data'];
-    type EdgeData = Base.EdgeData<{
+    type EdgeData = Simplify<Base.EdgeData & {
         sourceFqn: Fqn;
         targetFqn: Fqn;
         relations: NonEmptyArray<RelationId>;