@likec4/diagram 1.28.0 → 1.29.0

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

@@ -1,19 +1,22 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTree, Alert, Anchor, Tree, Box, Text, Pill } from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
-import { useMemo, useEffect } from 'react';
+import { r as reactExports } from '../../_virtual/index.js';
 import { treeNodeLabel, elementLabel } from './TabPanelStructure.css.js';
 
 const ElementLabel = ({
   element
 }) => /* @__PURE__ */ jsx(Box, { className: elementLabel, children: /* @__PURE__ */ jsx(Text, { component: "div", fz: "sm", fw: "500", children: element.title }) });
+const setHoveredNode = () => {
+};
 function TabPanelStructure({
   element
 }) {
   const tree = useTree({
     multiple: false
   });
-  const data = useMemo(() => {
+  tree.setHoveredNode = setHoveredNode;
+  const data = reactExports.useMemo(() => {
     let seq = 1;
     const messageNode = (label) => ({
       label,
@@ -50,7 +53,7 @@ function TabPanelStructure({
       ancestor
     ];
   }, [element]);
-  useEffect(() => {
+  reactExports.useEffect(() => {
     tree.expandAllNodes();
   }, [data]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [

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

@@ -1,7 +1,7 @@
 import { DiagramView, Fqn, NodeId, ViewId, NonEmptyArray, RelationId, Color, RelationshipLineType, BBox } from '@likec4/core';
-import { Rect } from '@xyflow/system';
+import { Rect, EdgeMarkerType, HandleType } from '@xyflow/system';
 import { ActorLogicFrom, ActorRefFromLogic, SnapshotFrom, StateMachine, PromiseActorLogic, EventObject, Values, NonReducibleUnknown, MetaObject, ConditionalRequired, InputFrom, RequiredActorOptions, IsNotNever, GetConcreteByKey, AnyActorLogic, RequiredLogicInput, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, CancelAction, DoneActorEvent, StopAction } from 'xstate';
-import { GeneralHelpers, EdgeMarkerType, HandleType, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
+import { GeneralHelpers, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
 import { ReactNode, CSSProperties } from 'react';
 import { XYStoreApi, Events, Input } from '../relationships-browser/actor';
 import { LayoutRelationshipsViewResult } from '../relationships-browser/layout';

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

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

package/dist/overlays/overlay/Overlay.js

@@ -3,12 +3,12 @@ import { cx } from '@likec4/styles/css';
 import { RemoveScroll, Box } from '@mantine/core';
 import { useMergedRef } from '@mantine/hooks';
 import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
-import { useReducedMotionConfig, m } from 'framer-motion';
-import { forwardRef, useState, useRef, useEffect } from 'react';
+import { useReducedMotionConfig, m } from 'motion/react';
+import { r as reactExports } from '../../_virtual/index.js';
 import { overlay, backdropOpacity, backdropBlur, level } from './Overlay.css.js';
 import { stopPropagation } from '../../utils/xyflow.js';
 
-const Overlay = forwardRef(({
+const Overlay = reactExports.forwardRef(({
   onClose,
   className,
   classes,
@@ -16,9 +16,9 @@ const Overlay = forwardRef(({
   children,
   ...rest
 }, ref) => {
-  const [opened, setOpened] = useState(false);
-  const dialogRef = useRef(null);
-  const isClosingRef = useRef(false);
+  const [opened, setOpened] = reactExports.useState(false);
+  const dialogRef = reactExports.useRef(null);
+  const isClosingRef = reactExports.useRef(false);
   const motionNotReduced = useReducedMotionConfig() !== true;
   const onCloseRef = useSyncedRef(onClose);
   const close = useDebouncedCallback(
@@ -30,9 +30,10 @@ const Overlay = forwardRef(({
     [],
     50
   );
-  useEffect(() => {
+  reactExports.useEffect(() => {
     const cancel = (e) => {
       e.preventDefault();
+      e.stopPropagation();
       close();
     };
     dialogRef.current?.addEventListener("cancel", cancel, { capture: true });

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

@@ -1,6 +1,6 @@
 import { RelationshipDetailsActorRef } from './actor';
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
-import { Position } from '@xyflow/react';
+import { Position } from '@xyflow/system';
 import { RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const edgeTypes: {
     relationship: NamedExoticComponent<{

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { invariant, nonNullable, ifind, isAncestor } from '@likec4/core';
+import { invariant, nonNullable, isAncestor } from '@likec4/core';
 import { ActionIcon, Group } from '@mantine/core';
 import { useCallbackRef, useStateHistory } from '@mantine/hooks';
 import { IconX, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
@@ -7,9 +7,9 @@ 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 'framer-motion';
-import { useRef, memo, useMemo, useEffect } from 'react';
-import 'remeda';
+import { LayoutGroup, AnimatePresence, m } from 'motion/react';
+import { r as reactExports } from '../../_virtual/index.js';
+import { isTruthy, find } from 'remeda';
 import { BaseXYFlow } from '../../base/BaseXYFlow.js';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
 import { computeEdgeDetailsViewData, computeRelationshipDetailsViewData } from './compute.js';
@@ -27,38 +27,40 @@ const edgeTypes = {
   relationship: RelationshipEdge
 };
 function RelationshipDetails({ actorRef }) {
-  const initialRef = useRef(null);
+  const initialRef = reactExports.useRef(null);
   if (initialRef.current == null) {
     initialRef.current = {
       defaultNodes: [],
       defaultEdges: []
     };
   }
-  return /* @__PURE__ */ jsx(RelationshipDetailsActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsxs(ReactFlowProvider, { ...initialRef.current, children: [
-    /* @__PURE__ */ jsx(LayoutGroup, { id: actorRef.sessionId, inherit: false, children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(RelationshipDetailsInner, {}) }) }),
-    /* @__PURE__ */ jsx(SyncRelationshipDetailsXYFlow, {})
-  ] }) });
+  return /* @__PURE__ */ jsx(RelationshipDetailsActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(LayoutGroup, { id: actorRef.sessionId, inherit: false, children: /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+    /* @__PURE__ */ jsx(RelationshipDetailsInner, {}, "xyflow"),
+    /* @__PURE__ */ jsx(SyncRelationshipDetailsXYFlow, {}, "sync")
+  ] }) }) }) });
 }
 const selectSubject = (state) => ({
   ...state.context.subject,
   viewId: state.context.viewId
 });
-function SyncRelationshipDetailsXYFlow() {
+const SyncRelationshipDetailsXYFlow = reactExports.memo(() => {
   const actor = useRelationshipDetailsActor();
   const subject = useSelector(actor, selectSubject, deepEqual);
   const likec4model = useLikeC4Model(true);
   const view = likec4model.findView(subject.viewId) ?? null;
-  const data = useMemo(() => {
+  const data = reactExports.useMemo(() => {
     let data2;
-    if ("edgeId" in subject) {
+    if ("edgeId" in subject && isTruthy(subject.edgeId)) {
       invariant(view, `view ${subject.viewId} not found`);
       const edge = nonNullable(view.findEdge(subject.edgeId), `edge ${subject.edgeId} not found in ${subject.viewId}`);
       data2 = computeEdgeDetailsViewData([edge.id], view);
-    } else {
+    } else if (!!subject.source && !!subject.target) {
       data2 = computeRelationshipDetailsViewData({
         source: likec4model.element(subject.source),
         target: likec4model.element(subject.target)
       });
+    } else {
+      return null;
     }
     return layoutRelationshipDetails(data2, view);
   }, [
@@ -68,16 +70,18 @@ function SyncRelationshipDetailsXYFlow() {
   ]);
   const store = useStoreApi();
   const instance = useReactFlow();
-  useEffect(() => {
+  reactExports.useEffect(() => {
     if (instance.viewportInitialized) {
       actor.send({ type: "xyflow.init", instance, store });
     }
   }, [store, instance.viewportInitialized, actor]);
-  useEffect(() => {
-    actor.send({ type: "update.layoutData", data });
+  reactExports.useEffect(() => {
+    if (data !== null) {
+      actor.send({ type: "update.layoutData", data });
+    }
   }, [data, actor]);
   return null;
-}
+});
 const selector = ({ context }) => ({
   // subject: context.subject,
   // view: state.context.view,
@@ -85,7 +89,7 @@ const selector = ({ context }) => ({
   nodes: context.xynodes,
   edges: context.xyedges
 });
-const RelationshipDetailsInner = memo(() => {
+const RelationshipDetailsInner = reactExports.memo(() => {
   const browser = useRelationshipDetails();
   const {
     initialized,
@@ -164,15 +168,16 @@ const topLeftPanelselector = ({ context }) => ({
   subject: context.subject,
   viewId: context.viewId
 });
-const TopLeftPanel = memo(() => {
+const TopLeftPanel = reactExports.memo(() => {
   const { subject, viewId } = useRelationshipDetailsState(topLeftPanelselector, deepEqual);
   const likec4model = useLikeC4Model(true);
   const view = likec4model.findView(viewId);
   if (!view || !view.isDiagram()) {
     return null;
   }
-  let edge = "edgeId" in subject ? view.findEdge(subject.edgeId) : ifind(view.edges(), (e) => e.source.element?.id === subject.source && e.target.element?.id === subject.target) ?? ifind(view.edges(), (e) => {
-    return (e.source.element?.id === subject.source || isAncestor(e.source.element?.id ?? "--", subject.source)) && (e.target.element?.id === subject.target || isAncestor(e.target.element?.id ?? "", subject.target));
+  const edges = [...view.edges()];
+  let edge = "edgeId" in subject && isTruthy(subject.edgeId) ? edges.find((e) => e.id === subject.edgeId) : find(edges, (e) => e.source.element?.id === subject.source && e.target.element?.id === subject.target) || find(edges, (e) => {
+    return (e.source.element?.id === subject.source || isAncestor(e.source.element?.id ?? "--", subject.source ?? "__")) && (e.target.element?.id === subject.target || isAncestor(e.target.element?.id ?? "", subject.target ?? "__"));
   });
   if (!edge) {
     return null;
@@ -183,12 +188,12 @@ const TopLeftPanelInner = ({ edge, view }) => {
   const browser = useRelationshipDetails();
   const edgeId = edge.id;
   const [historyEdgeId, historyOps, { history, current }] = useStateHistory(edge.id);
-  useEffect(() => {
+  reactExports.useEffect(() => {
     if (historyEdgeId !== edgeId) {
       historyOps.set(edgeId);
     }
   }, [edgeId]);
-  useEffect(() => {
+  reactExports.useEffect(() => {
     if (historyEdgeId !== edgeId) {
       browser.navigateTo(historyEdgeId);
     }

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

@@ -1,20 +1,17 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@likec4/core';
-import { useComputedColorScheme, Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown, ScrollAreaAutosize } from '@mantine/core';
+import { Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown, ScrollAreaAutosize } from '@mantine/core';
 import { IconArrowRight, IconSelector } from '@tabler/icons-react';
-import { useRef } from 'react';
+import { r as reactExports } from '../../_virtual/index.js';
 import { useRelationshipDetails } from './hooks.js';
 import { edgeSource, edgeTarget, scrollArea, edgeGrid, edgeRow, edgeArrow, edgeLabel } from './SelectEdge.css.js';
-import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
 
 const SelectEdge = ({
   edge,
   view
 }) => {
   const browser = useRelationshipDetails();
-  const viewport = useRef(null);
-  useMantinePortalProps();
-  useComputedColorScheme();
+  const viewport = reactExports.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/actor.d.ts

@@ -1,9 +1,10 @@
 import { BBox, EdgeId, ExclusiveUnion, Fqn, ViewId, RelationId, Color, RelationshipLineType } from '@likec4/core';
-import { EdgeChange, NodeChange, ReactFlowInstance, useStoreApi, EdgeMarkerType, HandleType } from '@xyflow/react';
+import { EdgeChange, NodeChange, ReactFlowInstance, useStoreApi } 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 } from 'react';
 type XYFLowInstance = ReactFlowInstance<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>;
 type XYStoreApi = ReturnType<typeof useStoreApi<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>>;
@@ -20,6 +21,8 @@ export type Input = ExclusiveUnion<{
 }>;
 type Subject = {
     edgeId: EdgeId;
+    source?: never;
+    target?: never;
 } | {
     source: Fqn;
     target: Fqn;

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

@@ -1,5 +1,5 @@
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
-import { Position } from '@xyflow/react';
+import { Position } from '@xyflow/system';
 import { RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const RelationshipEdge: NamedExoticComponent<{
     id: string;

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

@@ -19,7 +19,7 @@ const RelationshipEdge = customEdge((props) => {
   const [svgPath, labelX, labelY] = getBezierPath(props);
   const diagram = useDiagram();
   return /* @__PURE__ */ jsxs(EdgeContainer, { ...props, children: [
-    /* @__PURE__ */ jsx(EdgePath, { ...props, svgPath }),
+    /* @__PURE__ */ jsx(EdgePath, { edgeProps: props, svgPath }),
     /* @__PURE__ */ jsx(
       EdgeLabelContainer,
       {

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

@@ -1,7 +1,8 @@
 import { EdgeId, Fqn, ViewId, RelationId, Color, RelationshipLineType, BBox } from '@likec4/core';
 import { RelationshipDetailsActorRef, RelationshipDetailsSnapshot, Events } from './actor';
 import { Context, ReactNode, CSSProperties } from 'react';
-import { GeneralHelpers, EdgeMarkerType, HandleType, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
+import { GeneralHelpers, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
+import { EdgeMarkerType, HandleType } from '@xyflow/system';
 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;
@@ -11,6 +12,8 @@ export declare function useRelationshipDetails(): {
     getState: () => Readonly<{
         subject: {
             edgeId: EdgeId;
+            source?: never;
+            target?: never;
         } | {
             source: Fqn;
             target: Fqn;

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 { createContext, useMemo, useContext } from 'react';
+import { r as reactExports } from '../../_virtual/index.js';
 
-const RelationshipDetailsActorContext = createContext(null);
+const RelationshipDetailsActorContext = reactExports.createContext(null);
 function useRelationshipDetailsActor() {
-  return nonNullable(useContext(RelationshipDetailsActorContext), "No RelationshipDetailsActorContext");
+  return nonNullable(reactExports.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 useMemo(() => ({
+  return reactExports.useMemo(() => ({
     actor,
     get rootElementId() {
       return `relationship-details-${actor.sessionId.replaceAll(":", "_")}`;

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

@@ -1,6 +1,6 @@
 import { RelationshipsBrowserActorRef } from './actor';
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
-import { Position } from '@xyflow/react';
+import { Position } from '@xyflow/system';
 import { Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const edgeTypes: {
     relationship: NamedExoticComponent<{

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

@@ -5,10 +5,9 @@ import { useCallbackRef, useStateHistory } from '@mantine/hooks';
 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 'framer-motion';
-import { useRef, memo, useEffect } from 'react';
+import { LayoutGroup, AnimatePresence, m } from 'motion/react';
+import { r as reactExports } from '../../_virtual/index.js';
 import { BaseXYFlow } from '../../base/BaseXYFlow.js';
-import { ViewPadding } from './const.js';
 import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
 import { useRelationshipsView } from './layout.js';
 import { SelectElement } from './SelectElement.js';
@@ -24,7 +23,7 @@ const edgeTypes = {
   relationship: RelationshipEdge
 };
 function RelationshipsBrowser({ actorRef }) {
-  const initialRef = useRef(null);
+  const initialRef = reactExports.useRef(null);
   if (initialRef.current == null) {
     initialRef.current = {
       initialNodes: [],
@@ -39,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 = memo(() => {
+const RelationshipsBrowserXYFlow = reactExports.memo(() => {
   const browser = useRelationshipsBrowser();
   const {
     isActive,
@@ -62,7 +61,6 @@ const RelationshipsBrowserXYFlow = memo(() => {
       nodeTypes,
       edgeTypes,
       fitView: false,
-      fitViewPadding: ViewPadding,
       onNodeClick: useCallbackRef((e, node) => {
         browser.send({ type: "xyflow.nodeClick", node });
       }),
@@ -110,7 +108,7 @@ const selector2 = (state) => ({
   scope: state.context.scope,
   closeable: state.context.closeable
 });
-const RelationshipsBrowserInner = memo(() => {
+const RelationshipsBrowserInner = reactExports.memo(() => {
   const browser = useRelationshipsBrowser();
   const {
     subjectId,
@@ -120,24 +118,24 @@ const RelationshipsBrowserInner = memo(() => {
   } = useRelationshipsBrowserState(selector2);
   const store = useStoreApi();
   const instance = useReactFlow();
-  useEffect(() => {
+  reactExports.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);
-  useEffect(() => {
+  reactExports.useEffect(() => {
     if (historySubjectId !== subjectId) {
       historyOps.set(subjectId);
     }
   }, [subjectId]);
-  useEffect(() => {
+  reactExports.useEffect(() => {
     if (historySubjectId !== subjectId) {
       browser.navigateTo(historySubjectId);
     }
   }, [historySubjectId, browser]);
-  useEffect(() => {
+  reactExports.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 { memo, useRef, useEffect } from 'react';
+import { r as reactExports } from '../../_virtual/index.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
 import * as SelectElement_css from './SelectElement.css.js';
 import { scrollArea } from './SelectElement.css.js';
@@ -20,7 +20,9 @@ const selector2 = (state) => {
     enableChangeScope: state.context.enableChangeScope
   };
 };
-const SelectElement = memo(() => {
+const setHoveredNode = () => {
+};
+const SelectElement = reactExports.memo(() => {
   const browser = useRelationshipsBrowser();
   const {
     subjectId,
@@ -30,15 +32,16 @@ const SelectElement = memo(() => {
     enableSelectSubject,
     enableChangeScope
   } = useRelationshipsBrowserState(selector2);
-  const root = useRef(null);
-  const viewport = useRef(null);
+  const root = reactExports.useRef(null);
+  const viewport = reactExports.useRef(null);
   const model = useLikeC4Model(true);
   const subject = model.findElement(subjectId);
   const data = useLikeC4ElementsTree(scope === "view" && viewId ? viewId : void 0);
   const tree = useTree({
     multiple: false
   });
-  useEffect(() => {
+  tree.setHoveredNode = setHoveredNode;
+  reactExports.useEffect(() => {
     ancestorsFqn(subjectId).reverse().forEach((id) => {
       tree.expand(id);
     });

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

@@ -1,9 +1,10 @@
 import { BBox, Fqn, ViewId, NonEmptyArray, RelationId, Color, RelationshipLineType } from '@likec4/core';
-import { EdgeChange, NodeChange, ReactFlowInstance, useStoreApi, EdgeMarkerType, HandleType, GeneralHelpers, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
+import { EdgeChange, NodeChange, ReactFlowInstance, useStoreApi, GeneralHelpers, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
 import { ActorLogicFrom, ActorRefFromLogic, SnapshotFrom, PromiseActorLogic, EventObject, StateMachine, Values, NonReducibleUnknown, MetaObject, ConditionalRequired, InputFrom, RequiredActorOptions, IsNotNever, GetConcreteByKey, AnyActorLogic, RequiredLogicInput, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, CancelAction, DoneActorEvent } from 'xstate';
 import { Base } from '../../base';
 import { RelationshipsBrowserTypes } from './_types';
 import { LayoutRelationshipsViewResult } from './layout';
+import { EdgeMarkerType, HandleType } from '@xyflow/system';
 import { ReactNode, CSSProperties } from 'react';
 type XYFLowInstance = ReactFlowInstance<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>;
 export type XYStoreApi = ReturnType<typeof useStoreApi<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>>;

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

@@ -1,6 +1,6 @@
 import { invariant, nonNullable, delay } from '@likec4/core';
 import { applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
-import { getViewportForBounds, getNodeDimensions } from '@xyflow/system';
+import { getViewportForBounds } from '@xyflow/system';
 import { prop, omit, isNullish } from 'remeda';
 import { setup, assign, fromPromise, assertEvent, enqueueActions, cancel, raise } from 'xstate';
 import { MinZoom, ZIndexes } from '../../base/const.js';
@@ -55,8 +55,6 @@ const layouter = fromPromise(async ({ input, self, signal }) => {
   };
   const currentSubjectInternalNode = xyflow.getInternalNode(currentSubjectNode.id);
   const currentSubjectCenter = centerXYInternalNode(currentSubjectInternalNode);
-  const existingInternalNode = xyflow.getInternalNode(existingNode.id);
-  const existingDimensions = getNodeDimensions(existingInternalNode);
   const nested = /* @__PURE__ */ new Set();
   currentNodes.forEach((n) => {
     if (n.id === existingNode.id) {
@@ -88,8 +86,8 @@ const layouter = fromPromise(async ({ input, self, signal }) => {
       return {
         ...omit(n, ["parentId"]),
         position: {
-          x: currentSubjectCenter.x - existingDimensions.width / 2,
-          y: currentSubjectCenter.y - existingDimensions.height / 2
+          x: currentSubjectCenter.x - n.initialWidth / 2,
+          y: currentSubjectCenter.y - n.initialHeight / 2
         },
         zIndex: ZIndexes.Max,
         hidden: false,
@@ -105,16 +103,12 @@ const layouter = fromPromise(async ({ input, self, signal }) => {
     xynodes: currentNodes,
     xyedges: []
   });
-  zoom = Math.min(
-    zoom,
-    nextviewport.zoom
-  );
-  await delay(175);
+  await delay(120);
   next.xynodes = next.xynodes.map(Base.setDimmed(false));
   if (signal.aborted) {
     return updateXYData();
   }
-  await xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration: 350 });
+  await xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration: 300 });
   await xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom });
   return updateXYData();
 });
@@ -414,7 +408,7 @@ const relationshipsBrowserLogic = setup({
                   xyedges: event.output.xyedges,
                   navigateFromNode: null
                 });
-                enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 50 });
+                enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 50 });
                 for (let i = 0; i < 6; i++) {
                   enqueue.raise({ type: "xyflow.updateNodeInternals" }, { delay: 100 + i * 100 });
                 }

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

@@ -1 +1,2 @@
-export declare const ViewPadding = 0.1;
+import { Padding } from '@xyflow/system';
+export declare const ViewPadding: Padding;

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

@@ -1,3 +1,8 @@
-const ViewPadding = 0.1;
+const ViewPadding = {
+  top: "40px",
+  bottom: "16px",
+  left: "16px",
+  right: "16px"
+};
 
 export { ViewPadding };

package/dist/overlays/relationships-browser/custom/edgeTypes.d.ts

@@ -1,5 +1,5 @@
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
-import { Position } from '@xyflow/react';
+import { Position } from '@xyflow/system';
 import { Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const RelationshipEdge: NamedExoticComponent<{
     id: string;

package/dist/overlays/relationships-browser/custom/edgeTypes.js

@@ -72,13 +72,12 @@ const RelationshipEdge = customEdge((props) => {
     /* @__PURE__ */ jsx(
       EdgePath,
       {
-        ...edgeProps,
+        edgeProps,
         svgPath,
         ...markOrange && {
           strokeWidth: 5
         }
-      },
-      id
+      }
     ),
     /* @__PURE__ */ jsx(
       EdgeLabelContainer,
@@ -95,7 +94,7 @@ const RelationshipEdge = customEdge((props) => {
         children: label
       }
     )
-  ] }, id);
+  ] });
 });
 
 export { RelationshipEdge };

package/dist/overlays/relationships-browser/custom/nodeTypes.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Handle } from '@xyflow/react';
 import { Position } from '@xyflow/system';
-import { m } from 'framer-motion';
+import * as m from 'motion/react-m';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { ElementActions } from './ElementActions.js';
 import { EmptyNode as EmptyNode$1 } from './EmptyNode.js';

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

@@ -2,7 +2,8 @@ import { Fqn, ViewId, NonEmptyArray, RelationId, Color, RelationshipLineType } f
 import { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot, XYStoreApi, Events } from './actor';
 import { LayoutRelationshipsViewResult } from './layout';
 import { Context, ReactNode, CSSProperties } from 'react';
-import { GeneralHelpers, EdgeMarkerType, HandleType, ViewportHelperFunctions } from '@xyflow/react';
+import { GeneralHelpers, ViewportHelperFunctions } from '@xyflow/react';
+import { EdgeMarkerType, HandleType } from '@xyflow/system';
 export declare const RelationshipsBrowserActorContext: Context<RelationshipsBrowserActorRef | null>;
 export declare function useRelationshipsBrowserActor(): RelationshipsBrowserActorRef;
 export declare function useRelationshipsBrowserState<T>(selector: (state: RelationshipsBrowserSnapshot) => T, compare?: (a: T, b: T) => boolean): T;