@likec4/diagram 1.30.0 → 1.31.0

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

@@ -1,5 +1,3 @@
-import '@likec4/core';
-import '@xyflow/system';
 import { setup, assign, sendTo, stopChild, spawnChild } from 'xstate';
 import { relationshipsBrowserLogic } from '../relationships-browser/actor.js';
 

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

@@ -1,9 +1,9 @@
-import { r as reactExports } from '../../_virtual/index.js';
+import { createContext, useContext } from 'react';
 
-const ElementDetailsActorContext = reactExports.createContext(null);
+const ElementDetailsActorContext = createContext(null);
 ElementDetailsActorContext.displayName = "ElementDetailsActorContext";
 const useElementDetailsActorRef = () => {
-  const ctx = reactExports.useContext(ElementDetailsActorContext);
+  const ctx = useContext(ElementDetailsActorContext);
   if (ctx === null) {
     throw new Error("ElementDetailsActorRef is not provided");
   }

package/dist/overlays/overlay/Overlay.d.ts

@@ -1,4 +1,14 @@
-import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import { PropsWithChildren, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+export type OverlayProps = PropsWithChildren<{
+    overlayLevel?: number;
+    className?: string;
+    classes?: {
+        dialog?: string;
+        body?: string;
+    };
+    onClose: () => void;
+    onClick?: never;
+}>;
 export declare const Overlay: ForwardRefExoticComponent<{
     overlayLevel?: number;
     className?: string;

package/dist/overlays/overlay/Overlay.js

@@ -1,14 +1,14 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { RemoveScroll, Box } from '@mantine/core';
+import { RemoveScroll } from '@mantine/core';
 import { useMergedRef } from '@mantine/hooks';
 import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
 import { useReducedMotionConfig, m } from 'motion/react';
-import { r as reactExports } from '../../_virtual/index.js';
+import { forwardRef, useState, useRef, useEffect } from 'react';
 import { overlay, backdropOpacity, backdropBlur, level } from './Overlay.css.js';
 import { stopPropagation } from '../../utils/xyflow.js';
 
-const Overlay = reactExports.forwardRef(({
+const Overlay = forwardRef(({
   onClose,
   className,
   classes,
@@ -16,9 +16,9 @@ const Overlay = reactExports.forwardRef(({
   children,
   ...rest
 }, ref) => {
-  const [opened, setOpened] = reactExports.useState(false);
-  const dialogRef = reactExports.useRef(null);
-  const isClosingRef = reactExports.useRef(false);
+  const [opened, setOpened] = useState(false);
+  const dialogRef = useRef(null);
+  const isClosingRef = useRef(false);
   const motionNotReduced = useReducedMotionConfig() !== true;
   const onCloseRef = useSyncedRef(onClose);
   const close = useDebouncedCallback(
@@ -30,7 +30,7 @@ const Overlay = reactExports.forwardRef(({
     [],
     50
   );
-  reactExports.useEffect(() => {
+  useEffect(() => {
     const cancel = (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -104,7 +104,7 @@ const Overlay = reactExports.forwardRef(({
         close();
       },
       ...rest,
-      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, removeScrollBar: false, children: /* @__PURE__ */ jsx(Box, { className: cx(styles.body, "overlay-body", classes?.body), children: opened && /* @__PURE__ */ jsx(Fragment, { children }) }) })
+      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, removeScrollBar: false, children: /* @__PURE__ */ jsx("div", { className: cx(styles.body, "overlay-body", classes?.body), children: opened && /* @__PURE__ */ jsx(Fragment, { children }) }) })
     }
   );
 });

package/dist/overlays/overlaysActor.d.ts

@@ -38,7 +38,7 @@ export type OverlayActorEmitedEvent = {
 } | {
     type: 'idle';
 };
-export declare const overlaysActorLogic: StateMachine<OverlaysContext, OverlayActorEvent, {
+declare const _overlaysActorLogic: StateMachine<OverlaysContext, OverlayActorEvent, {
     [x: `elementDetails-${number}`]: ActorRefFromLogic<ElementDetailsLogic> | undefined;
     [x: `relationshipsBrowser-${number}`]: ActorRefFromLogic<Overlays.RelationshipsBrowser.Logic> | undefined;
     [x: `relationshipDetails-${number}`]: ActorRefFromLogic<Overlays.RelationshipDetails.Logic> | undefined;
@@ -183,8 +183,10 @@ export declare const overlaysActorLogic: StateMachine<OverlaysContext, OverlayAc
     };
     readonly exit: readonly ["stopListeningToEsc", "closeAllOverlays"];
 }>;
-export interface OverlaysActorLogic extends ActorLogicFrom<typeof overlaysActorLogic> {
+export interface OverlaysActorLogic extends ActorLogicFrom<typeof _overlaysActorLogic> {
 }
+export declare const overlaysActorLogic: OverlaysActorLogic;
 export type OverlaysActorSnapshot = SnapshotFrom<OverlaysActorLogic>;
 export interface OverlaysActorRef extends ActorRefFrom<OverlaysActorLogic> {
 }
+export {};

package/dist/overlays/overlaysActor.js

@@ -19,7 +19,7 @@ const hotkeyLogic = fromCallback(({ sendBack }) => {
     document.body.removeEventListener("keydown", handler, { capture: true });
   };
 });
-const overlaysActorLogic = setup({
+const _overlaysActorLogic = setup({
   types: {
     context: {},
     events: {},
@@ -231,5 +231,6 @@ const overlaysActorLogic = setup({
     "closeAllOverlays"
   ]
 });
+const overlaysActorLogic = _overlaysActorLogic;
 
 export { overlaysActorLogic };

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

@@ -1,17 +1,17 @@
 import { RelationshipDetailsActorRef } from './actor';
-import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
 import { 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 +30,10 @@ export declare const edgeTypes: {
         markerEnd?: string;
         pathOptions?: any;
         interactionWidth?: number;
-        data: {
+        data: import("../../base").Base.EdgeData & {
             hovered?: boolean;
             active?: boolean;
             dimmed?: import("../../base").Base.Dimmed;
-        } & {
             relationId: RelationId;
             color: Color | undefined;
             label: string | null;
@@ -42,9 +41,6 @@ export declare const edgeTypes: {
             description?: string | undefined | undefined;
             navigateTo: ViewId | null;
             line: RelationshipLineType;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../../base").Base.Dimmed;
         };
     }>;
 };

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

@@ -1,14 +1,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { invariant, nonNullable, isAncestor } from '@likec4/core';
+import { cx } from '@likec4/styles/css';
 import { ActionIcon, Group } from '@mantine/core';
 import { useCallbackRef, useStateHistory } from '@mantine/hooks';
 import { IconX, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
 import { useSelector } from '@xstate/react';
 import { ReactFlowProvider, Panel, useStoreApi, useReactFlow } from '@xyflow/react';
-import clsx from 'clsx';
 import { deepEqual } from 'fast-equals';
 import { LayoutGroup, AnimatePresence, m } from 'motion/react';
-import { r as reactExports } from '../../_virtual/index.js';
+import { useRef, memo, useMemo, useEffect } from 'react';
 import { isTruthy, find } from 'remeda';
 import { BaseXYFlow } from '../../base/BaseXYFlow.js';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
@@ -27,7 +27,7 @@ const edgeTypes = {
   relationship: RelationshipEdge
 };
 function RelationshipDetails({ actorRef }) {
-  const initialRef = reactExports.useRef(null);
+  const initialRef = useRef(null);
   if (initialRef.current == null) {
     initialRef.current = {
       defaultNodes: [],
@@ -43,12 +43,12 @@ const selectSubject = (state) => ({
   ...state.context.subject,
   viewId: state.context.viewId
 });
-const SyncRelationshipDetailsXYFlow = reactExports.memo(() => {
+const SyncRelationshipDetailsXYFlow = memo(() => {
   const actor = useRelationshipDetailsActor();
   const subject = useSelector(actor, selectSubject, deepEqual);
   const likec4model = useLikeC4Model(true);
   const view = likec4model.findView(subject.viewId) ?? null;
-  const data = reactExports.useMemo(() => {
+  const data = useMemo(() => {
     let data2;
     if ("edgeId" in subject && isTruthy(subject.edgeId)) {
       invariant(view, `view ${subject.viewId} not found`);
@@ -70,12 +70,12 @@ const SyncRelationshipDetailsXYFlow = reactExports.memo(() => {
   ]);
   const store = useStoreApi();
   const instance = useReactFlow();
-  reactExports.useEffect(() => {
+  useEffect(() => {
     if (instance.viewportInitialized) {
       actor.send({ type: "xyflow.init", instance, store });
     }
   }, [store, instance.viewportInitialized, actor]);
-  reactExports.useEffect(() => {
+  useEffect(() => {
     if (data !== null) {
       actor.send({ type: "update.layoutData", data });
     }
@@ -89,7 +89,7 @@ const selector = ({ context }) => ({
   nodes: context.xynodes,
   edges: context.xyedges
 });
-const RelationshipDetailsInner = reactExports.memo(() => {
+const RelationshipDetailsInner = memo(() => {
   const browser = useRelationshipDetails();
   const {
     initialized,
@@ -102,7 +102,7 @@ const RelationshipDetailsInner = reactExports.memo(() => {
       id: browser.rootElementId,
       nodes,
       edges,
-      className: clsx(initialized ? "initialized" : "not-initialized"),
+      className: cx(initialized ? "initialized" : "not-initialized"),
       nodeTypes,
       edgeTypes,
       onNodesChange: useCallbackRef((changes) => {
@@ -168,7 +168,7 @@ const topLeftPanelselector = ({ context }) => ({
   subject: context.subject,
   viewId: context.viewId
 });
-const TopLeftPanel = reactExports.memo(() => {
+const TopLeftPanel = memo(() => {
   const { subject, viewId } = useRelationshipDetailsState(topLeftPanelselector, deepEqual);
   const likec4model = useLikeC4Model(true);
   const view = likec4model.findView(viewId);
@@ -188,12 +188,12 @@ const TopLeftPanelInner = ({ edge, view }) => {
   const browser = useRelationshipDetails();
   const edgeId = edge.id;
   const [historyEdgeId, historyOps, { history, current }] = useStateHistory(edge.id);
-  reactExports.useEffect(() => {
+  useEffect(() => {
     if (historyEdgeId !== edgeId) {
       historyOps.set(edgeId);
     }
   }, [edgeId]);
-  reactExports.useEffect(() => {
+  useEffect(() => {
     if (historyEdgeId !== edgeId) {
       browser.navigateTo(historyEdgeId);
     }

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

@@ -1,8 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@likec4/core';
 import { Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown, ScrollAreaAutosize } from '@mantine/core';
 import { IconArrowRight, IconSelector } from '@tabler/icons-react';
-import { r as reactExports } from '../../_virtual/index.js';
+import { useRef } from 'react';
 import { useRelationshipDetails } from './hooks.js';
 import { edgeSource, edgeTarget, scrollArea, edgeGrid, edgeRow, edgeArrow, edgeLabel } from './SelectEdge.css.js';
 
@@ -11,7 +10,7 @@ const SelectEdge = ({
   view
 }) => {
   const browser = useRelationshipDetails();
-  const viewport = reactExports.useRef(null);
+  const viewport = useRef(null);
   const edgeSource$1 = view.nodes.find((n) => n.id === edge.source);
   const edgeTarget$1 = view.nodes.find((n) => n.id === edge.target);
   const edges = view.edges.flatMap((edge2) => {

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

@@ -1,4 +1,5 @@
 import { Color, DiagramNode, Fqn, IconUrl, RelationId, RelationshipLineType, ViewId } from '@likec4/core';
+import { Simplify } from 'type-fest';
 import { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types';
 export declare namespace RelationshipDetailsTypes {
     type Column = 'sources' | 'targets';
@@ -9,24 +10,24 @@ export declare namespace RelationshipDetailsTypes {
         in: string[];
         out: string[];
     };
-    type ElementNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'height' | 'navigateTo' | 'style'>> & {
+    type ElementNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'height' | 'navigateTo' | 'style'>> & {
         column: Column;
         fqn: Fqn;
         icon: IconUrl;
         ports: Ports;
-    }>;
-    type CompoundNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'color' | 'style'>> & {
+    };
+    type CompoundNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'title' | 'color' | 'style'>> & {
         column: Column;
         fqn: Fqn;
         depth: number;
         icon?: IconUrl;
         ports: Ports;
-    }>;
+    };
     type ElementNode = ReactFlowNode<ElementNodeData, 'element'>;
     type CompoundNode = ReactFlowNode<CompoundNodeData, 'compound'>;
     type Node = ElementNode | CompoundNode;
     type NodeData = Node['data'];
-    type EdgeData = Base.EdgeData<{
+    type EdgeData = Simplify<Base.EdgeData & {
         relationId: RelationId;
         color: Color | undefined;
         label: string | null;

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/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,15 @@
-import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
 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 +28,10 @@ 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;
-    } & {
         relationId: RelationId;
         color: Color | undefined;
         label: string | null;
@@ -40,8 +39,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/hooks.d.ts

@@ -48,6 +48,9 @@ export declare function useRelationshipDetails(): {
             focusable?: boolean;
             type: "relationship";
             data: {
+                hovered?: boolean;
+                active?: boolean;
+                dimmed?: import("../../base").Base.Dimmed;
                 relationId: RelationId;
                 color: Color | undefined;
                 label: string | null;
@@ -55,9 +58,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 +91,9 @@ export declare function useRelationshipDetails(): {
                 focusable?: boolean;
                 type: "relationship";
                 data: {
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: import("../../base").Base.Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -98,9 +101,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 +131,9 @@ export declare function useRelationshipDetails(): {
                 focusable?: boolean;
                 type: "relationship";
                 data: {
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: import("../../base").Base.Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -138,9 +141,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 +170,9 @@ export declare function useRelationshipDetails(): {
                 focusable?: boolean;
                 type: "relationship";
                 data: {
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: import("../../base").Base.Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -177,9 +180,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 +209,9 @@ export declare function useRelationshipDetails(): {
                 focusable?: boolean;
                 type: "relationship";
                 data: {
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: import("../../base").Base.Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -216,9 +219,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 +248,9 @@ export declare function useRelationshipDetails(): {
                 focusable?: boolean;
                 type: "relationship";
                 data: {
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: import("../../base").Base.Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -255,9 +258,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 +287,9 @@ export declare function useRelationshipDetails(): {
                 focusable?: boolean;
                 type: "relationship";
                 data: {
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: import("../../base").Base.Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -294,9 +297,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 +327,9 @@ export declare function useRelationshipDetails(): {
                 focusable?: boolean;
                 type: "relationship";
                 data: {
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: import("../../base").Base.Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -334,9 +337,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 +366,9 @@ export declare function useRelationshipDetails(): {
                 focusable?: boolean;
                 type: "relationship";
                 data: {
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: import("../../base").Base.Dimmed;
                     relationId: RelationId;
                     color: Color | undefined;
                     label: string | null;
@@ -373,9 +376,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(":", "_")}`;