@likec4/diagram 1.30.0 → 1.31.0

package/dist/hooks/useDiagram.js

@@ -1,16 +1,15 @@
-import '@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 { useMemo } from 'react';
 import { findDiagramEdge, findDiagramNode } from '../state/utils.js';
 import { useDiagramActorRef } from './safeContext.js';
 
 function useDiagram() {
   const actor = useDiagramActorRef();
-  return reactExports.useMemo(() => ({
+  return useMemo(() => ({
     actor,
-    send: actor.send,
+    send: (event) => actor.send(event),
     navigateTo: (viewId, fromNode) => {
       actor.send({
         type: "navigate.to",
@@ -47,7 +46,6 @@ function useDiagram() {
       actor.send({
         type: "update.edgeData",
         edgeId,
-        // @ts-expect-error TODO: fix this
         data
       });
     },

package/dist/hooks/useMantinePortalProps.js

@@ -1,9 +1,9 @@
-import { r as reactExports } from '../_virtual/index.js';
+import { useMemo } from 'react';
 import { useRootContainer } from '../context/RootContainer.js';
 
 function useMantinePortalProps() {
   const target = useRootContainer();
-  return reactExports.useMemo(() => target ? { portalProps: { target }, withinPortal: true } : { withinPortal: false }, [target]);
+  return useMemo(() => target ? { portalProps: { target }, withinPortal: true } : { withinPortal: false }, [target]);
 }
 
 export { useMantinePortalProps };

package/dist/hooks/useSetState.js

@@ -1,9 +1,9 @@
 import { shallowEqual } from 'fast-equals';
-import { r as reactExports } from '../_virtual/index.js';
+import { useState, useCallback } from 'react';
 
 function useSetState(initialState) {
-  const [state, _setState] = reactExports.useState(initialState);
-  const setState = reactExports.useCallback(
+  const [state, _setState] = useState(initialState);
+  const setState = useCallback(
     (statePartial) => _setState((current) => {
       const next = {
         ...current,

package/dist/hooks/useUpdateEffect.js

@@ -1,6 +1,5 @@
 import { useFirstMountState, useCustomCompareEffect } from '@react-hookz/web';
 import { shallowEqual } from 'fast-equals';
-import '../_virtual/index.js';
 
 const noop = () => {
 };

package/dist/hooks/useXYFlow.d.ts

@@ -2,7 +2,7 @@ import { ReactFlowState, ReactFlowInstance, InternalNode } from '@xyflow/react';
 import { Types } from '../likec4diagram/types';
 import { EdgeMarkerType, HandleType, XYPosition } from '@xyflow/system';
 import { ReactNode, CSSProperties } from 'react';
-import { EdgeId, NonEmptyArray, Point, Color, BBox, RelationshipLineType, RelationshipArrowType, ViewId } from '@likec4/core';
+import { EdgeId, NonEmptyArray, Point, Color, RelationshipLineType, RelationshipArrowType, BBox, ViewId } from '@likec4/core';
 export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
     id: string;
     source: string;
@@ -31,23 +31,23 @@ export declare const useXYFlow: () => ReactFlowInstance<Types.Node, {
     focusable?: boolean;
     type: "relationship";
     data: {
+        hovered?: boolean;
+        active?: boolean;
+        dimmed?: import("../base").Base.Dimmed;
         id: EdgeId;
         label: string | null;
         points: NonEmptyArray<Point>;
-        technology: string | undefined;
         color: Color | undefined;
-        labelBBox: BBox | null | undefined;
-        dir: "forward" | "back" | "both" | undefined;
         line: RelationshipLineType | undefined;
-        head: RelationshipArrowType | undefined;
+        dir: "forward" | "back" | "both" | undefined;
         tail: RelationshipArrowType | undefined;
+        head: RelationshipArrowType | undefined;
+        technology: string | undefined;
+        labelBBox: BBox | null | undefined;
         navigateTo: ViewId<string> | undefined;
         notes: string | undefined;
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
-        hovered?: boolean;
-        active?: boolean;
-        dimmed?: import("../base").Base.Dimmed;
     };
 }>;
 export declare function useXYStore<StateSlice = unknown>(selector: (state: ReactFlowState<Types.Node, Types.Edge>) => StateSlice, equalityFn?: (a: NoInfer<StateSlice>, b: NoInfer<StateSlice>) => boolean): StateSlice;
@@ -80,23 +80,23 @@ export declare const useXYStoreApi: () => {
         focusable?: boolean;
         type: "relationship";
         data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../base").Base.Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
-            technology: string | undefined;
             color: Color | undefined;
-            labelBBox: BBox | null | undefined;
-            dir: "forward" | "back" | "both" | undefined;
             line: RelationshipLineType | undefined;
-            head: RelationshipArrowType | undefined;
+            dir: "forward" | "back" | "both" | undefined;
             tail: RelationshipArrowType | undefined;
+            head: RelationshipArrowType | undefined;
+            technology: string | undefined;
+            labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
         };
     }>;
     setState: (partial: ReactFlowState<Types.Node, {
@@ -127,23 +127,23 @@ export declare const useXYStoreApi: () => {
         focusable?: boolean;
         type: "relationship";
         data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../base").Base.Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
-            technology: string | undefined;
             color: Color | undefined;
-            labelBBox: BBox | null | undefined;
-            dir: "forward" | "back" | "both" | undefined;
             line: RelationshipLineType | undefined;
-            head: RelationshipArrowType | undefined;
+            dir: "forward" | "back" | "both" | undefined;
             tail: RelationshipArrowType | undefined;
+            head: RelationshipArrowType | undefined;
+            technology: string | undefined;
+            labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
         };
     }> | Partial<ReactFlowState<Types.Node, {
         id: string;
@@ -173,23 +173,23 @@ export declare const useXYStoreApi: () => {
         focusable?: boolean;
         type: "relationship";
         data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../base").Base.Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
-            technology: string | undefined;
             color: Color | undefined;
-            labelBBox: BBox | null | undefined;
-            dir: "forward" | "back" | "both" | undefined;
             line: RelationshipLineType | undefined;
-            head: RelationshipArrowType | undefined;
+            dir: "forward" | "back" | "both" | undefined;
             tail: RelationshipArrowType | undefined;
+            head: RelationshipArrowType | undefined;
+            technology: string | undefined;
+            labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
         };
     }>> | ((state: ReactFlowState<Types.Node, {
         id: string;
@@ -219,23 +219,23 @@ export declare const useXYStoreApi: () => {
         focusable?: boolean;
         type: "relationship";
         data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../base").Base.Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
-            technology: string | undefined;
             color: Color | undefined;
-            labelBBox: BBox | null | undefined;
-            dir: "forward" | "back" | "both" | undefined;
             line: RelationshipLineType | undefined;
-            head: RelationshipArrowType | undefined;
+            dir: "forward" | "back" | "both" | undefined;
             tail: RelationshipArrowType | undefined;
+            head: RelationshipArrowType | undefined;
+            technology: string | undefined;
+            labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
         };
     }>) => ReactFlowState<Types.Node, {
         id: string;
@@ -265,23 +265,23 @@ export declare const useXYStoreApi: () => {
         focusable?: boolean;
         type: "relationship";
         data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../base").Base.Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
-            technology: string | undefined;
             color: Color | undefined;
-            labelBBox: BBox | null | undefined;
-            dir: "forward" | "back" | "both" | undefined;
             line: RelationshipLineType | undefined;
-            head: RelationshipArrowType | undefined;
+            dir: "forward" | "back" | "both" | undefined;
             tail: RelationshipArrowType | undefined;
+            head: RelationshipArrowType | undefined;
+            technology: string | undefined;
+            labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
         };
     }> | Partial<ReactFlowState<Types.Node, {
         id: string;
@@ -311,23 +311,23 @@ export declare const useXYStoreApi: () => {
         focusable?: boolean;
         type: "relationship";
         data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../base").Base.Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
-            technology: string | undefined;
             color: Color | undefined;
-            labelBBox: BBox | null | undefined;
-            dir: "forward" | "back" | "both" | undefined;
             line: RelationshipLineType | undefined;
-            head: RelationshipArrowType | undefined;
+            dir: "forward" | "back" | "both" | undefined;
             tail: RelationshipArrowType | undefined;
+            head: RelationshipArrowType | undefined;
+            technology: string | undefined;
+            labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
         };
     }>>), replace?: boolean | undefined) => void;
     subscribe: (listener: (state: ReactFlowState<Types.Node, {
@@ -358,23 +358,23 @@ export declare const useXYStoreApi: () => {
         focusable?: boolean;
         type: "relationship";
         data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../base").Base.Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
-            technology: string | undefined;
             color: Color | undefined;
-            labelBBox: BBox | null | undefined;
-            dir: "forward" | "back" | "both" | undefined;
             line: RelationshipLineType | undefined;
-            head: RelationshipArrowType | undefined;
+            dir: "forward" | "back" | "both" | undefined;
             tail: RelationshipArrowType | undefined;
+            head: RelationshipArrowType | undefined;
+            technology: string | undefined;
+            labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
         };
     }>, prevState: ReactFlowState<Types.Node, {
         id: string;
@@ -404,23 +404,23 @@ export declare const useXYStoreApi: () => {
         focusable?: boolean;
         type: "relationship";
         data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../base").Base.Dimmed;
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
-            technology: string | undefined;
             color: Color | undefined;
-            labelBBox: BBox | null | undefined;
-            dir: "forward" | "back" | "both" | undefined;
             line: RelationshipLineType | undefined;
-            head: RelationshipArrowType | undefined;
+            dir: "forward" | "back" | "both" | undefined;
             tail: RelationshipArrowType | undefined;
+            head: RelationshipArrowType | undefined;
+            technology: string | undefined;
+            labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../base").Base.Dimmed;
         };
     }>) => void) => () => void;
 };

package/dist/hooks/useXYFlow.js

@@ -1,12 +1,12 @@
 import { useCallbackRef } from '@mantine/hooks';
-import { useStoreApi, useStore, useReactFlow, useInternalNode } from '@xyflow/react';
+import { useReactFlow, useInternalNode, useStoreApi, useStore } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
 
 const useXYFlow = useReactFlow;
 function useXYStore(selector, equalityFn) {
   return useStore(
     useCallbackRef(selector),
-    shallowEqual
+    equalityFn ?? shallowEqual
   );
 }
 const useXYStoreApi = useStoreApi;

package/dist/index.d.ts

@@ -4,10 +4,8 @@ export { IconRendererProvider } from './context/IconRenderer';
 export { LikeC4Diagram } from './LikeC4Diagram';
 export type { LikeC4DiagramProps } from './LikeC4Diagram';
 export { Overlay } from './overlays/overlay/Overlay';
-export { useLikeC4ElementsTree, useLikeC4Model, } from './likec4model';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider';
-export { useSetState } from './hooks/useSetState';
-export { useUpdateEffect } from './hooks/useUpdateEffect';
-export type { ChangeEvent, DiagramNodeWithNavigate, ElementIconRenderer, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, WhereOperator, } from './LikeC4Diagram.props';
+export * from './custom/hooks';
+export type { ChangeEvent, CustomNodes, DiagramNodeWithNavigate, ElementIconRenderer, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, PaddingUnit, PaddingWithUnit, WhereOperator, } from './LikeC4Diagram.props';
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram';
 export type { StaticLikeC4DiagramProps } from './StaticLikeC4Diagram';

package/dist/index.js

@@ -3,8 +3,13 @@ export { IconRendererProvider } from './context/IconRenderer.js';
 export { LikeC4Diagram } from './LikeC4Diagram.js';
 export { Overlay } from './overlays/overlay/Overlay.js';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider.js';
-export { useSetState } from './hooks/useSetState.js';
-export { useUpdateEffect } from './hooks/useUpdateEffect.js';
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram.js';
-export { useLikeC4ElementsTree } from './likec4model/useLikeC4ElementsTree.js';
+export { useDiagramEventHandlers } from './context/DiagramEventHandlers.js';
+export { useEnabledFeatures } from './context/DiagramFeatures.js';
+export { useCurrentViewId } from './hooks/useCurrentViewId.js';
+export { useDiagram, useDiagramContext } from './hooks/useDiagram.js';
+export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './hooks/useXYFlow.js';
 export { useLikeC4Model } from './likec4model/useLikeC4Model.js';
+export { useMantinePortalProps } from './hooks/useMantinePortalProps.js';
+export { useSetState } from './hooks/useSetState.js';
+export { useUpdateEffect } from './hooks/useUpdateEffect.js';

package/dist/likec4diagram/DiagramUI.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { r as reactExports } from '../_virtual/index.js';
+import { memo } from 'react';
 import { useOverlaysActorRef } from '../hooks/useOverlaysActor.js';
 import { Overlays } from '../overlays/Overlays.js';
 import { useEnabledFeatures } from '../context/DiagramFeatures.js';
@@ -8,7 +8,7 @@ import { DiagramTitlePanel } from './ui/diagram-title/DiagramTitlePanel.js';
 import { NotationPanel } from './ui/notation/NotationPanel.js';
 import { DynamicViewWalkthrough } from './ui/walkthrough/DynamicViewWalkthrough.js';
 
-const DiagramUI = reactExports.memo(() => {
+const DiagramUI = memo(() => {
   const {
     enableViewTitle,
     enableNotations,

package/dist/likec4diagram/DiagramXYFlow.d.ts

@@ -1,4 +1,4 @@
 import { PropsWithChildren, NamedExoticComponent } from 'react';
 import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
-export type LikeC4DiagramXYFlowProps = PropsWithChildren<Pick<LikeC4DiagramProperties, 'background' | 'nodesDraggable' | 'nodesSelectable' | 'reactFlowProps'>>;
+export type LikeC4DiagramXYFlowProps = PropsWithChildren<Pick<LikeC4DiagramProperties, 'background' | 'nodesDraggable' | 'nodesSelectable' | 'reactFlowProps' | 'renderNodes'>>;
 export declare const LikeC4DiagramXYFlow: NamedExoticComponent<LikeC4DiagramXYFlowProps>;

package/dist/likec4diagram/DiagramXYFlow.js

@@ -2,15 +2,17 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { nonNullable } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
 import { useTimeout, useDebouncedCallback, useCallbackRef } from '@mantine/hooks';
-import { deepEqual, shallowEqual } from 'fast-equals';
-import { r as reactExports } from '../_virtual/index.js';
+import { useCustomCompareMemo } from '@react-hookz/web';
+import { shallowEqual, deepEqual } from 'fast-equals';
+import { memo } from 'react';
 import { BaseXYFlow } from '../base/BaseXYFlow.js';
 import { useIsReducedGraphics, usePanningAtom } from '../context/ReduceGraphics.js';
 import { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
-import { edgeTypes, nodeTypes } from './custom/index.js';
+import { BuiltinNodes, edgeTypes } from './custom/index.js';
 import { DiagramUI } from './DiagramUI.js';
 import { useLayoutConstraints } from './useLayoutConstraints.js';
 import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
+import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
 
 const selectXYProps = (ctx) => ({
   initialized: ctx.initialized.xydata && ctx.initialized.xyflow,
@@ -30,13 +32,14 @@ const selectXYProps = (ctx) => ({
   }
 });
 const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.fitViewPadding === b.fitViewPadding && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport ?? null, b.viewport ?? null);
-const compareProps = (a, b) => a.nodesDraggable === b.nodesDraggable && a.nodesSelectable === b.nodesSelectable && deepEqual(a.background, b.background) && deepEqual(a.reactFlowProps ?? {}, b.reactFlowProps ?? {});
-const LikeC4DiagramXYFlow = reactExports.memo(({
+const compareProps = (a, b) => a.nodesDraggable == b.nodesDraggable && a.nodesSelectable == b.nodesSelectable && a.children == b.children && deepEqual(a.background, b.background) && deepEqual(a.reactFlowProps ?? {}, b.reactFlowProps ?? {}) && shallowEqual(a.renderNodes ?? {}, b.renderNodes ?? {});
+const LikeC4DiagramXYFlow = memo(({
   background = "dots",
   nodesDraggable = false,
   nodesSelectable = false,
   reactFlowProps = {},
-  children
+  children,
+  renderNodes
 }) => {
   const diagram = useDiagram();
   const {
@@ -78,7 +81,22 @@ const LikeC4DiagramXYFlow = reactExports.memo(({
     diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
   }), onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });
-  });
+  }), nodeTypes = useCustomCompareMemo(
+    () => {
+      return {
+        element: renderNodes?.element ?? BuiltinNodes.element,
+        deployment: renderNodes?.deployment ?? BuiltinNodes.deployment,
+        "compound-element": renderNodes?.compoundElement ?? BuiltinNodes["compound-element"],
+        "compound-deployment": renderNodes?.compoundDeployment ?? BuiltinNodes["compound-deployment"],
+        "view-group": renderNodes?.viewGroup ?? BuiltinNodes["view-group"]
+      };
+    },
+    [renderNodes],
+    shallowEqual
+  );
+  useUpdateEffect(() => {
+    console.warn("renderNodes changed - this might degrade performance");
+  }, [renderNodes]);
   return /* @__PURE__ */ jsxs(
     BaseXYFlow,
     {

package/dist/likec4diagram/custom/edges/NotePopover.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Popover, PopoverTarget, PopoverDropdown, Stack, ScrollAreaAutosize, Text, CloseButton, Group, Button } from '@mantine/core';
 import { useDebouncedEffect } from '@react-hookz/web';
-import { r as reactExports } from '../../../_virtual/index.js';
+import { useState } from 'react';
 import { isTruthy, isNonNull } from 'remeda';
 import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
 import { edgeNoteText, edgeNoteCloseButton } from './NotePopover.css.js';
@@ -21,7 +21,7 @@ const NotePopover = ({ notes, children }) => {
     hasPrevious: s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId) > 0
   }));
   const diagram = useDiagram();
-  const [isOpened, setIsOpened] = reactExports.useState(false);
+  const [isOpened, setIsOpened] = useState(false);
   const portalProps = useMantinePortalProps();
   useDebouncedEffect(
     () => {

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

@@ -1,16 +1,16 @@
-import { EdgeId, NonEmptyArray, Point, Color, BBox, RelationshipLineType, RelationshipArrowType, ViewId } from '@likec4/core';
+import { EdgeId, NonEmptyArray, Point, Color, RelationshipLineType, RelationshipArrowType, BBox, ViewId } from '@likec4/core';
 import { XYPosition } from '@xyflow/react';
-import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
-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;
@@ -29,27 +29,23 @@ export declare const RelationshipEdge: NamedExoticComponent<{
     markerEnd?: string;
     pathOptions?: any;
     interactionWidth?: number;
-    data: {
+    data: import("../../../base").Base.EdgeData & {
         hovered?: boolean;
         active?: boolean;
         dimmed?: import("../../../base").Base.Dimmed;
-    } & {
         id: EdgeId;
         label: string | null;
         points: NonEmptyArray<Point>;
-        technology: string | undefined;
         color: Color | undefined;
-        labelBBox: BBox | null | undefined;
-        dir: "forward" | "back" | "both" | undefined;
         line: RelationshipLineType | undefined;
-        head: RelationshipArrowType | undefined;
+        dir: "forward" | "back" | "both" | undefined;
         tail: RelationshipArrowType | undefined;
+        head: RelationshipArrowType | undefined;
+        technology: string | undefined;
+        labelBBox: BBox | null | undefined;
         navigateTo: ViewId<string> | undefined;
         notes: string | undefined;
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
-        hovered?: boolean;
-        active?: boolean;
-        dimmed?: import("../../../base").Base.Dimmed;
     };
 }>;

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { nonNullable } from '@likec4/core';
+import { cx } from '@likec4/styles/css';
 import { useDebouncedEffect } from '@react-hookz/web';
 import { EdgeLabelRenderer } from '@xyflow/react';
-import clsx from 'clsx';
 import { line, curveCatmullRomOpen } from 'd3-shape';
-import { r as reactExports } from '../../../_virtual/index.js';
+import { useState, useRef, useEffect } from 'react';
 import { isTruthy, first, last } from 'remeda';
 import { ZIndexes } from '../../../base/const.js';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
@@ -28,7 +28,7 @@ const curve = line().curve(curveCatmullRomOpen).x((d) => d.x).y((d) => d.y);
 const selectActiveStepId = (s) => s.context.activeWalkthrough?.stepId ?? null;
 const RelationshipEdge = customEdge((props) => {
   const isPanning = useIsPanning();
-  const [isControlPointDragging, setIsControlPointDragging] = reactExports.useState(false);
+  const [isControlPointDragging, setIsControlPointDragging] = useState(false);
   const xyflowStore = useXYStoreApi();
   const xyflow = useXYFlow();
   const diagram = useDiagram();
@@ -83,12 +83,12 @@ const RelationshipEdge = customEdge((props) => {
     edgePath = bezierPath(points);
   }
   let labelX = labelBBox?.x ?? 0, labelY = labelBBox?.y ?? 0;
-  const [labelPos, setLabelPos] = reactExports.useState({
+  const [labelPos, setLabelPos] = useState({
     x: labelXY?.x ?? labelX,
     y: labelXY?.y ?? labelY
   });
-  const svgPathRef = reactExports.useRef(null);
-  reactExports.useEffect(() => {
+  const svgPathRef = useRef(null);
+  useEffect(() => {
     const path = svgPathRef.current;
     if (!path) return;
     const dompoint = path.getPointAtLength(path.getTotalLength() * 0.5);
@@ -264,7 +264,7 @@ const RelationshipEdge = customEdge((props) => {
     }
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(EdgeContainer, { ...props, className: clsx(isControlPointDragging && controlDragging), children: [
+    /* @__PURE__ */ jsxs(EdgeContainer, { ...props, className: cx(isControlPointDragging && controlDragging), children: [
       /* @__PURE__ */ jsx(
         EdgePath,
         {
@@ -310,7 +310,7 @@ const RelationshipEdge = customEdge((props) => {
               "circle",
               {
                 onPointerDown: (e) => onControlPointerDown(i, e),
-                className: clsx("nodrag nopan", controlPoint),
+                className: cx("nodrag nopan", controlPoint),
                 cx: Math.round(p.x),
                 cy: Math.round(p.y),
                 r: 3