@likec4/diagram 1.40.0 → 1.42.0

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

@@ -1,7 +1,7 @@
 import { setup, assign, sendTo, stopChild, spawnChild } from 'xstate';
 import { relationshipsBrowserLogic } from '../relationships-browser/actor.js';
 
-const elementDetailsLogic = setup({
+const _elementDetailsLogic = setup({
   types: {
     context: {},
     input: {},
@@ -61,5 +61,6 @@ const elementDetailsLogic = setup({
   //   xynodes: [],
   // }),
 });
+const elementDetailsLogic = _elementDetailsLogic;
 
 export { elementDetailsLogic };

package/dist/overlays/overlay/Overlay.js

@@ -1,13 +1,16 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
+import { overlay } from '@likec4/styles/recipes';
 import { RemoveScroll } from '@mantine/core';
 import { useFocusTrap, useMergedRef } from '@mantine/hooks';
 import { useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
 import { useReducedMotionConfig, m } from 'motion/react';
 import { forwardRef, useState, useRef, useLayoutEffect } from 'react';
-import { overlay, backdropOpacity, backdropBlur, level } from './Overlay.css.js';
 import { stopPropagation } from '../../utils/xyflow.js';
 
+const backdropBlur = "--_blur";
+const backdropOpacity = "--_opacity";
+const cssVarLevel = "--_level";
 const Overlay = forwardRef(({
   onClose,
   className,
@@ -44,7 +47,7 @@ const Overlay = forwardRef(({
   useTimeoutEffect(() => {
     setOpened(true);
   }, openDelay > 0 ? openDelay : void 0);
-  const styles = overlay({
+  const overlayRecipe = overlay({
     fullscreen,
     withBackdrop
   });
@@ -63,13 +66,14 @@ const Overlay = forwardRef(({
       className: cx(
         classes?.dialog,
         className,
-        styles.dialog,
+        overlayRecipe,
+        // styles.dialog,
         fullscreen && RemoveScroll.classNames.fullWidth
       ),
       layout: true,
       style: {
         // @ts-ignore
-        [level]: overlayLevel
+        [cssVarLevel]: overlayLevel
       },
       ...motionNotReduced ? {
         initial: {
@@ -130,8 +134,7 @@ const Overlay = forwardRef(({
         {
           className: cx(
             classes?.body,
-            styles.body,
-            "overlay-body"
+            "likec4-overlay-body"
           ),
           children: opened && /* @__PURE__ */ jsx(Fragment, { children })
         }

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

@@ -1,48 +1,8 @@
+import { RelationshipDetailsTypes } from './_types';
 import { RelationshipDetailsActorRef } from './actor';
-import { FunctionComponent, CSSProperties, ReactNode } from 'react';
-import { Position } from '@xyflow/system';
-import { RelationId, Color, ViewId, RelationshipLineType, RichTextOrEmpty } from '@likec4/core';
+import { FunctionComponent } from 'react';
 export declare const edgeTypes: {
-    relationship: FunctionComponent<{
-        id: string;
-        selected?: boolean;
-        selectable?: boolean;
-        deletable?: boolean;
-        style?: CSSProperties;
-        animated?: boolean;
-        source: string;
-        target: string;
-        sourceX: number;
-        sourceY: number;
-        targetX: number;
-        targetY: number;
-        sourcePosition: Position;
-        targetPosition: Position;
-        label?: ReactNode;
-        labelStyle?: CSSProperties;
-        labelShowBg?: boolean;
-        labelBgStyle?: CSSProperties;
-        labelBgPadding?: [number, number];
-        labelBgBorderRadius?: number;
-        sourceHandleId?: string | null;
-        targetHandleId?: string | null;
-        markerStart?: string;
-        markerEnd?: string;
-        pathOptions?: any;
-        interactionWidth?: number;
-        data: import("../../base").Base.EdgeData & {
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../../base").Base.Dimmed;
-            relationId: RelationId;
-            color: Color | undefined;
-            label: string | null;
-            technology?: string | undefined | undefined;
-            navigateTo: ViewId | null;
-            line: RelationshipLineType;
-            description: RichTextOrEmpty;
-        };
-    }>;
+    relationship: FunctionComponent<RelationshipDetailsTypes.EdgeProps>;
 };
 export type RelationshipDetailsProps = {
     actorRef: RelationshipDetailsActorRef;

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

@@ -10,16 +10,16 @@ import { LayoutGroup, AnimatePresence, m } from 'motion/react';
 import { useRef, memo, useMemo, useEffect } from 'react';
 import { isTruthy, find } from 'remeda';
 import { BaseXYFlow } from '../../base/BaseXYFlow.js';
-import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { computeEdgeDetailsViewData, computeRelationshipDetailsViewData } from './compute.js';
 import { RelationshipDetailsActorContext, useRelationshipDetails, useRelationshipDetailsState, useRelationshipDetailsActor } from './hooks.js';
 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.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_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.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';
 
 const nodeTypes = {
   element: ElementNode,
@@ -125,10 +125,10 @@ const RelationshipDetailsInner = memo(() => {
         e.stopPropagation();
         browser.send({ type: "xyflow.edgeClick", edge });
       }),
-      onPaneClick: useCallbackRef((e) => {
+      onPaneClick: useCallbackRef(() => {
         browser.send({ type: "xyflow.paneClick" });
       }),
-      onDoubleClick: useCallbackRef((e) => {
+      onDoubleClick: useCallbackRef(() => {
         browser.send({ type: "xyflow.paneDblClick" });
       }),
       onViewportResize: useCallbackRef(() => {

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

@@ -3,8 +3,8 @@ import { Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown,
 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.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.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';
 
 const SelectEdge = ({
   edge,

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

@@ -1,6 +1,7 @@
-import { Color, DiagramNode, Fqn, IconUrl, RelationId, RelationshipLineType, RichTextOrEmpty, ViewId } from '@likec4/core/types';
+import { Color, DiagramNode, ExclusiveUnion, Fqn, IconUrl, RelationId, RelationshipArrowType, RelationshipLineType, RichTextOrEmpty, ViewId } from '@likec4/core/types';
+import { FunctionComponent } from 'react';
 import { Simplify } from 'type-fest';
-import { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types';
+import { BaseEdge, BaseEdgeData, BaseEdgeProps, BaseNode, BaseNodeData, BaseNodeProps, NonOptional } from '../../base/types';
 export declare namespace RelationshipDetailsTypes {
     type Column = 'sources' | 'targets';
     /**
@@ -10,32 +11,48 @@ export declare namespace RelationshipDetailsTypes {
         in: string[];
         out: string[];
     };
-    type ElementNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'color' | 'shape' | 'width' | 'height' | 'navigateTo' | 'style' | 'tags'>> & {
+    type ElementNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | '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'>> & {
+    }>;
+    type CompoundNodeData = Simplify<BaseNodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'style'>> & {
         column: Column;
         fqn: Fqn;
         depth: number;
         icon?: IconUrl;
         ports: Ports;
+    }>;
+    type ElementNode = BaseNode<ElementNodeData, 'element'>;
+    type CompoundNode = BaseNode<CompoundNodeData, 'compound'>;
+    type AnyNode = ElementNode | CompoundNode;
+    type NodeType = AnyNode['type'];
+    type Node<T extends NodeType = NodeType> = Extract<AnyNode, {
+        type: T;
+    }>;
+    type NodeProps<T extends NodeType = NodeType> = BaseNodeProps<Node<T>>;
+    type NodeData = ExclusiveUnion<{
+        ElementNodeData: ElementNodeData;
+        CompoundNodeData: CompoundNodeData;
+    }>;
+    type NodeRenderer<T extends NodeType = NodeType> = FunctionComponent<NodeProps<T>>;
+    type NodeRenderers = {
+        element: NodeRenderer<'element'>;
+        compound: NodeRenderer<'compound'>;
     };
-    type ElementNode = ReactFlowNode<ElementNodeData, 'element'>;
-    type CompoundNode = ReactFlowNode<CompoundNodeData, 'compound'>;
-    type Node = ElementNode | CompoundNode;
-    type NodeData = Node['data'];
-    type EdgeData = Simplify<Base.EdgeData & {
+    type EdgeData = Simplify<BaseEdgeData & {
         relationId: RelationId;
-        color: Color | undefined;
+        color: Color;
         label: string | null;
         technology?: string | undefined;
         navigateTo: ViewId | null;
         line: RelationshipLineType;
+        head?: RelationshipArrowType;
+        tail?: RelationshipArrowType;
         description: RichTextOrEmpty;
     }>;
-    type Edge = ReactFlowEdge<EdgeData, 'relationship'>;
+    type Edge = BaseEdge<EdgeData, 'relationship'>;
+    type EdgeProps = BaseEdgeProps<Edge>;
 }

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

@@ -1,13 +1,13 @@
-import { BBox, EdgeId, ExclusiveUnion, Fqn, ViewId, RelationId, Color, RelationshipLineType, RichTextOrEmpty } from '@likec4/core';
-import { EdgeChange, NodeChange, ReactFlowInstance, useStoreApi } from '@xyflow/react';
+import { BBox, EdgeId, ExclusiveUnion, Fqn, ViewId } from '@likec4/core';
+import { EdgeChange, NodeChange, ReactFlowInstance, ReactFlowState } 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';
 import { RelationshipDetailsTypes } from './_types';
 import { LayoutResult } from './layout';
-import { EdgeMarkerType, HandleType } from '@xyflow/system';
-import { ReactNode, CSSProperties, AriaRole, SVGAttributes } from 'react';
-type XYFLowInstance = ReactFlowInstance<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>;
-type XYStoreApi = ReturnType<typeof useStoreApi<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>>;
+type XYFLowInstance = ReactFlowInstance<RelationshipDetailsTypes.AnyNode, RelationshipDetailsTypes.Edge>;
+type XYStoreState = ReactFlowState<RelationshipDetailsTypes.AnyNode, RelationshipDetailsTypes.Edge>;
+type XYStoreApi = {
+    getState: () => XYStoreState;
+};
 export type Input = ExclusiveUnion<{
     Edge: {
         edgeId: EdgeId;
@@ -99,7 +99,7 @@ export type Events = {
 } | {
     type: 'close';
 };
-export declare const relationshipDetailsLogic: StateMachine<Readonly<{
+declare const _relationshipDetailsLogic: StateMachine<Readonly<{
     subject: Subject;
     viewId: ViewId;
     xyflow: XYFLowInstance | null;
@@ -141,8 +141,8 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<{
         params: unknown;
     };
 }>, never, "ready" | "closed" | "isReady" | "initializing", string, {
-    source?: never;
     target?: never;
+    source?: never;
     edgeId: EdgeId;
     viewId: ViewId;
 } | {
@@ -163,8 +163,8 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<{
             } & { [K in RequiredLogicInput<TLogic>]: unknown; }], IsNotNever<RequiredLogicInput<TLogic>>>): ActorRefFromLogic<TLogic>;
         };
         input: {
-            source?: never;
             target?: never;
+            source?: never;
             edgeId: EdgeId;
             viewId: ViewId;
         } | {
@@ -593,48 +593,7 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<{
                             xyflow: boolean;
                         };
                         xynodes: RelationshipDetailsTypes.Node[];
-                        xyedges: {
-                            id: string;
-                            source: string;
-                            target: string;
-                            sourceHandle?: string | null;
-                            targetHandle?: string | null;
-                            animated?: boolean;
-                            hidden?: boolean;
-                            deletable?: boolean;
-                            selectable?: boolean;
-                            selected?: boolean;
-                            markerStart?: EdgeMarkerType;
-                            markerEnd?: EdgeMarkerType;
-                            zIndex?: number;
-                            ariaLabel?: string;
-                            interactionWidth?: number;
-                            label?: ReactNode;
-                            labelStyle?: CSSProperties;
-                            labelShowBg?: boolean;
-                            labelBgStyle?: CSSProperties;
-                            labelBgPadding?: [number, number];
-                            labelBgBorderRadius?: number;
-                            style?: CSSProperties;
-                            className?: string;
-                            reconnectable?: boolean | HandleType;
-                            focusable?: boolean;
-                            ariaRole?: AriaRole;
-                            domAttributes?: Omit< SVGAttributes<SVGGElement>, "id" | "style" | "className" | "role" | "aria-label" | "dangerouslySetInnerHTML">;
-                            type: "relationship";
-                            data: {
-                                hovered?: boolean;
-                                active?: boolean;
-                                dimmed?: Base.Dimmed;
-                                relationId: RelationId;
-                                color: Color | undefined;
-                                label: string | null;
-                                technology?: string | undefined | undefined;
-                                navigateTo: ViewId | null;
-                                line: RelationshipLineType;
-                                description: RichTextOrEmpty;
-                            };
-                        }[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
                         bounds: BBox;
                     }>;
                     event: {
@@ -685,9 +644,10 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<{
         };
     };
 }>;
-export interface RelationshipDetailsLogic extends ActorLogicFrom<typeof relationshipDetailsLogic> {
+export interface RelationshipDetailsLogic extends ActorLogicFrom<typeof _relationshipDetailsLogic> {
 }
+export declare const relationshipDetailsLogic: RelationshipDetailsLogic;
 export interface RelationshipDetailsActorRef extends ActorRefFromLogic<RelationshipDetailsLogic> {
 }
-export type RelationshipDetailsSnapshot = SnapshotFrom<RelationshipDetailsActorRef>;
+export type RelationshipDetailsSnapshot = SnapshotFrom<RelationshipDetailsLogic>;
 export {};

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

@@ -21,7 +21,7 @@ function inputToSubject(input) {
     target: input.target
   };
 }
-const relationshipDetailsLogic = setup({
+const _relationshipDetailsLogic = setup({
   types: {
     context: {},
     input: {},
@@ -39,14 +39,14 @@ const relationshipDetailsLogic = setup({
       if (bounds) {
         const { width, height } = xystore.getState();
         const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, 0.1);
-        xyflow.setViewport(viewport, duration > 0 ? { duration } : void 0);
+        xyflow.setViewport(viewport, duration > 0 ? { duration } : void 0).catch(console.error);
       } else {
         xyflow.fitView({
           minZoom: MinZoom,
           maxZoom,
           padding: 0.1,
           ...duration > 0 && { duration }
-        });
+        }).catch(console.error);
       }
     },
     "xyflow:updateNodeInternals": ({ context }) => {
@@ -285,5 +285,6 @@ const relationshipDetailsLogic = setup({
     }
   }
 });
+const relationshipDetailsLogic = _relationshipDetailsLogic;
 
 export { relationshipDetailsLogic };

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

@@ -1,5 +1,6 @@
 import { EdgeId, NonEmptyReadonlyArray } from '@likec4/core';
-import { AnyAux, ElementModel, LikeC4ViewModel, RelationshipModel } from '@likec4/core/model';
+import { ElementModel, LikeC4ViewModel, RelationshipModel } from '@likec4/core/model';
+import { AnyAux } from '@likec4/core/types';
 export interface RelationshipDetailsViewData {
     sources: ReadonlySet<ElementModel>;
     relationships: ReadonlySet<RelationshipModel>;

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

@@ -1,5 +1,2 @@
-import { NodeProps } from '../../../base/types';
 import { RelationshipDetailsTypes as Types } from '../_types';
-type ElementActionsProps = NodeProps<Types.ElementNodeData>;
-export declare const ElementActions: (props: ElementActionsProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const ElementActions: (props: Types.NodeProps<"element">) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,10 +2,10 @@ import { jsx } from 'react/jsx-runtime';
 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.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/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,43 +1,3 @@
-import { FunctionComponent, CSSProperties, ReactNode } from 'react';
-import { Position } from '@xyflow/system';
-import { RelationId, Color, ViewId, RelationshipLineType, RichTextOrEmpty } from '@likec4/core';
-export declare const RelationshipEdge: FunctionComponent<{
-    id: string;
-    selected?: boolean;
-    selectable?: boolean;
-    deletable?: boolean;
-    style?: CSSProperties;
-    animated?: boolean;
-    source: string;
-    target: string;
-    sourceX: number;
-    sourceY: number;
-    targetX: number;
-    targetY: number;
-    sourcePosition: Position;
-    targetPosition: Position;
-    label?: ReactNode;
-    labelStyle?: CSSProperties;
-    labelShowBg?: boolean;
-    labelBgStyle?: CSSProperties;
-    labelBgPadding?: [number, number];
-    labelBgBorderRadius?: number;
-    sourceHandleId?: string | null;
-    targetHandleId?: string | null;
-    markerStart?: string;
-    markerEnd?: string;
-    pathOptions?: any;
-    interactionWidth?: number;
-    data: import("../../../base").Base.EdgeData & {
-        hovered?: boolean;
-        active?: boolean;
-        dimmed?: import("../../../base").Base.Dimmed;
-        relationId: RelationId;
-        color: Color | undefined;
-        label: string | null;
-        technology?: string | undefined | undefined;
-        navigateTo: ViewId | null;
-        line: RelationshipLineType;
-        description: RichTextOrEmpty;
-    };
-}>;
+import { RelationshipDetailsTypes } from '../_types';
+import { FunctionComponent } from 'react';
+export declare const RelationshipEdge: FunctionComponent<RelationshipDetailsTypes.EdgeProps>;

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

@@ -1,19 +1,17 @@
 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 { memoEdge } from '../../../base-primitives/memoEdge.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';
-import { EdgeLabel } from '../../../base/primitives/edge/EdgeLabel.js';
-import { EdgeActionButton } from '../../../base/primitives/edge/EdgeActionButton.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';
+import { EdgeLabel } from '../../../base-primitives/edge/EdgeLabel.js';
+import { EdgeActionButton } from '../../../base-primitives/edge/EdgeActionButton.js';
 
-const RelationshipEdge = customEdge((props) => {
+const RelationshipEdge = memoEdge((props) => {
   const { enableNavigateTo } = useEnabledFeatures();
   const {
-    sourceX,
-    targetY,
     data: { navigateTo }
   } = props;
   const [svgPath, labelX, labelY] = getBezierPath(props);

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

@@ -0,0 +1,10 @@
+import { BaseNodePropsWithData } from '../../../base';
+import { RelationshipDetailsTypes } from '../_types';
+import { FunctionComponent } from 'react';
+export declare const ElementNode: FunctionComponent<RelationshipDetailsTypes.NodeProps<"element">>;
+export declare const CompoundNode: FunctionComponent<RelationshipDetailsTypes.NodeProps<"compound">>;
+type ElementPortsProps = BaseNodePropsWithData<Pick<RelationshipDetailsTypes.ElementNodeData, 'ports' | 'height'>>;
+export declare const ElementPorts: ({ data: { ports, height: h } }: ElementPortsProps) => import("react/jsx-runtime").JSX.Element;
+type CompoundPortsProps = BaseNodePropsWithData<Pick<RelationshipDetailsTypes.CompoundNodeData, 'ports'>>;
+export declare const CompoundPorts: ({ data }: CompoundPortsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -4,14 +4,14 @@ 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';
-import { CompoundTitle } from '../../../base/primitives/compound/CompoundTitle.js';
-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';
+import { memoNode } from '../../../base-primitives/memoNode.js';
+import { CompoundNodeContainer } from '../../../base-primitives/compound/CompoundNodeContainer.js';
+import { CompoundTitle } from '../../../base-primitives/compound/CompoundTitle.js';
+import { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
+import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
+import { ElementData } from '../../../base-primitives/element/ElementData.js';
+import { ElementTags } from '../../../base-primitives/element/ElementTags.js';
+import { ElementDetailsButton } from '../../../base-primitives/element/ElementDetailsButton.js';
 
 const ElementDetailsButtonWithHandler = (props) => {
   const diagram = useDiagram();
@@ -26,24 +26,26 @@ const ElementDetailsButtonWithHandler = (props) => {
     }
   );
 };
-const ElementNode = customNode((props) => {
+const ElementNode = memoNode((props) => {
   const { enableElementTags } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
-    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
+    /* @__PURE__ */ jsx(ElementData, { ...props }),
     enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
     /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
     /* @__PURE__ */ jsx(ElementPorts, { ...props })
   ] });
 });
-const CompoundNode = customNode((props) => {
-  return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
-    /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-    /* @__PURE__ */ jsx(CompoundPorts, { ...props })
-  ] });
-});
+const CompoundNode = memoNode(
+  (props) => {
+    return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+      /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
+      /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+      /* @__PURE__ */ jsx(CompoundPorts, { ...props })
+    ] });
+  }
+);
 const ElementPorts = ({ data: { ports, height: h } }) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     ports.in.map((id, i) => /* @__PURE__ */ jsx(