@likec4/diagram 1.27.2 → 1.28.0

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

@@ -1,28 +1,5 @@
-import { SlotRecipeRuntimeFn } from '@likec4/styles/types';
+import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '@likec4/styles/types';
 export declare const backdropBlur = "--_blur";
 export declare const backdropOpacity = "--_opacity";
 export declare const level = "--_level";
-export declare const overlay: SlotRecipeRuntimeFn<"body" | "dialog", {
-    level: {
-        0: {
-            dialog: {
-                "--_level": "0";
-            };
-        };
-        1: {
-            dialog: {
-                "--_level": "1";
-            };
-        };
-        2: {
-            dialog: {
-                "--_level": "2";
-            };
-        };
-        3: {
-            dialog: {
-                "--_level": "3";
-            };
-        };
-    };
-}>;
+export declare const overlay: SlotRecipeRuntimeFn<"body" | "dialog", SlotRecipeVariantRecord<"body" | "dialog">>;

package/dist/overlays/overlay/Overlay.css.js

@@ -22,7 +22,7 @@ const dialog = css.raw({
   [backdropBlur]: "0px",
   [level]: "0",
   [offset]: "0px",
-  [inset]: "calc((1 + var(--_level) * 0.5) * var(--_offset))",
+  [inset]: "calc((1 + var(--_level) * 0.75) * var(--_offset))",
   [backdropOpacity]: "0%",
   _backdrop: {
     cursor: "zoom-out",
@@ -43,8 +43,8 @@ const dialog = css.raw({
     height: "100vh"
   },
   sm: {
-    inset: "[var(--_inset) var(--_offset) var(--_offset) var(--_inset)]",
-    width: "calc(100vw - var(--_offset) - var(--_inset))",
+    inset: "[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]",
+    width: "calc(100vw - 2 * var(--_inset))",
     height: "calc(100vh - var(--_offset) - var(--_inset))",
     [borderRadius]: "6px",
     padding: "6px",
@@ -59,22 +59,6 @@ const dialog = css.raw({
   xl: {
     [offset]: "4rem"
   }
-  //     inset: '[calc(2rem + var(--_level, 0) * 1rem), 2rem, 2rem, 2rem]',
-  //     width: 'calc(100vw - 4rem)',
-  //     height: 'calc(100vh - 4rem - var(--_level, 0) * 1rem)',
-  //   },
-  //   lg: {
-  //     inset: '[calc(4rem + var(--_level, 0) * 1rem), 4rem, 4rem, 4rem]',
-  //     width: 'calc(100vw - 8rem)',
-  //     height: 'calc(100vh - 8rem)',
-  //   },
-  //   xl: {
-  //     [borderRadius]: '8px',
-  //     padding: '8px',
-  //     inset: '[calc(5rem + var(--_level, 0) * 1rem), 5rem, 5rem, 5rem]',
-  //     width: 'calc(100vw - 10rem)',
-  //     height: 'calc(100vh - 10rem - var(--_level, 0) * 1rem)',
-  //   },
 });
 const body = css.raw({
   position: "relative",
@@ -94,30 +78,6 @@ const overlay = sva({
   base: {
     dialog,
     body
-  },
-  variants: {
-    level: {
-      0: {
-        dialog: {
-          [level]: "0"
-        }
-      },
-      1: {
-        dialog: {
-          [level]: "1"
-        }
-      },
-      2: {
-        dialog: {
-          [level]: "2"
-        }
-      },
-      3: {
-        dialog: {
-          [level]: "3"
-        }
-      }
-    }
   }
 });
 

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

@@ -1,6 +1,6 @@
 import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 export declare const Overlay: ForwardRefExoticComponent<{
-    overlayLevel?: 0 | 1 | 2 | 3;
+    overlayLevel?: number;
     className?: string;
     classes?: {
         dialog?: string;

package/dist/overlays/overlay/Overlay.js

@@ -4,102 +4,109 @@ 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, useLayoutEffect } from 'react';
-import { overlay, backdropOpacity, backdropBlur } from './Overlay.css.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 = forwardRef(
-  ({ children, onClose, className, classes, overlayLevel = 0, ...rest }, ref) => {
-    const [opened, setOpened] = useState(false);
-    const dialogRef = useRef(null);
-    const isClosingRef = useRef(false);
-    const motionNotReduced = useReducedMotionConfig() !== true;
-    const onCloseRef = useSyncedRef(onClose);
-    const close = useDebouncedCallback(
-      () => {
-        if (isClosingRef.current) return;
-        isClosingRef.current = true;
-        onCloseRef.current();
+const Overlay = forwardRef(({
+  onClose,
+  className,
+  classes,
+  overlayLevel = 0,
+  children,
+  ...rest
+}, ref) => {
+  const [opened, setOpened] = useState(false);
+  const dialogRef = useRef(null);
+  const isClosingRef = useRef(false);
+  const motionNotReduced = useReducedMotionConfig() !== true;
+  const onCloseRef = useSyncedRef(onClose);
+  const close = useDebouncedCallback(
+    () => {
+      if (isClosingRef.current) return;
+      isClosingRef.current = true;
+      onCloseRef.current();
+    },
+    [],
+    50
+  );
+  useEffect(() => {
+    const cancel = (e) => {
+      e.preventDefault();
+      close();
+    };
+    dialogRef.current?.addEventListener("cancel", cancel, { capture: true });
+    return () => {
+      dialogRef.current?.removeEventListener("cancel", cancel, { capture: true });
+    };
+  }, []);
+  useTimeoutEffect(() => {
+    if (!dialogRef.current?.open) {
+      dialogRef.current?.showModal();
+    }
+  }, 30);
+  useTimeoutEffect(() => {
+    setOpened(true);
+  }, 120);
+  const styles = overlay({
+    level: overlayLevel
+  });
+  return /* @__PURE__ */ jsx(
+    m.dialog,
+    {
+      ref: useMergedRef(dialogRef, ref),
+      className: cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes?.dialog, className),
+      layout: true,
+      style: {
+        // @ts-ignore
+        [level]: overlayLevel
       },
-      [],
-      50
-    );
-    useLayoutEffect(() => {
-      const cancel = (e) => {
-        e.preventDefault();
-        close();
-      };
-      dialogRef.current?.addEventListener("cancel", cancel, { capture: true });
-      return () => {
-        dialogRef.current?.removeEventListener("cancel", cancel, { capture: true });
-      };
-    }, []);
-    useTimeoutEffect(() => {
-      if (!dialogRef.current?.open) {
-        dialogRef.current?.showModal();
-      }
-    }, 20);
-    useTimeoutEffect(() => {
-      setOpened(true);
-    }, 120);
-    const styles = overlay({
-      level: overlayLevel
-    });
-    return /* @__PURE__ */ jsx(
-      m.dialog,
-      {
-        ref: useMergedRef(dialogRef, ref),
-        className: cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes?.dialog, className),
-        layout: true,
-        ...motionNotReduced ? {
-          initial: {
-            [backdropBlur]: "0px",
-            [backdropOpacity]: "0%",
-            scale: overlayLevel > 0 ? 0.9 : 1.075,
-            opacity: 0
-          },
-          animate: {
-            [backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
-            [backdropOpacity]: overlayLevel > 0 ? "50%" : "60%",
-            scale: 1,
-            opacity: 1,
-            translateY: 0,
-            transition: {
-              delay: 0.075
-            }
-          },
-          exit: {
-            scale: 1.3,
-            opacity: 0,
-            translateY: -10,
-            [backdropBlur]: "0px",
-            [backdropOpacity]: "0%"
-          }
-        } : {
-          initial: {
-            [backdropBlur]: "8px",
-            [backdropOpacity]: "60%"
-          }
+      ...motionNotReduced ? {
+        initial: {
+          [backdropBlur]: "0px",
+          [backdropOpacity]: "0%",
+          scale: overlayLevel > 0 ? 0.9 : 1.075,
+          opacity: 0
         },
-        onClick: (e) => {
-          e.stopPropagation();
-          if (e.target?.nodeName?.toUpperCase() === "DIALOG") {
-            dialogRef.current?.close();
-            return;
+        animate: {
+          [backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
+          [backdropOpacity]: overlayLevel > 0 ? "50%" : "60%",
+          scale: 1,
+          opacity: 1,
+          transition: {
+            delay: 0.075
           }
         },
-        onDoubleClick: stopPropagation,
-        onPointerDown: stopPropagation,
-        onClose: (e) => {
-          e.stopPropagation();
-          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 }) }) })
-      }
-    );
-  }
-);
+        exit: {
+          scale: 1.2,
+          opacity: 0,
+          [backdropBlur]: "0px",
+          [backdropOpacity]: "0%"
+        }
+      } : {
+        initial: {
+          [backdropBlur]: "8px",
+          [backdropOpacity]: "60%"
+        }
+      },
+      onClick: (e) => {
+        e.stopPropagation();
+        if (e.target?.nodeName?.toUpperCase() === "DIALOG") {
+          dialogRef.current?.close();
+          return;
+        }
+      },
+      onDoubleClick: stopPropagation,
+      onPointerDown: stopPropagation,
+      onClose: (e) => {
+        e.stopPropagation();
+        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 }) }) })
+    }
+  );
+});
 Overlay.displayName = "Overlay";
 
 export { Overlay };

package/dist/overlays/overlaysActor.js

@@ -7,7 +7,10 @@ import { relationshipsBrowserLogic } from './relationships-browser/actor.js';
 
 const hotkeyLogic = fromCallback(({ sendBack }) => {
   const handler = getHotkeyHandler([
-    ["Escape", () => sendBack({ type: "close" }), {
+    ["Escape", (event) => {
+      event.stopPropagation();
+      sendBack({ type: "close" });
+    }, {
       preventDefault: 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/system';
+import { Position } from '@xyflow/react';
 import { RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const edgeTypes: {
     relationship: NamedExoticComponent<{

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

@@ -1,10 +1,9 @@
 import { BBox, EdgeId, ExclusiveUnion, Fqn, ViewId, RelationId, Color, RelationshipLineType } from '@likec4/core';
-import { EdgeChange, NodeChange, ReactFlowInstance, useStoreApi } from '@xyflow/react';
+import { EdgeChange, NodeChange, ReactFlowInstance, useStoreApi, EdgeMarkerType, HandleType } 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>>;
@@ -455,12 +454,22 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<{
                     }>, {
                         type: "update.layoutData";
                         data: LayoutResult;
-                    }, undefined, Events>, {
-                        readonly type: "xyflow:fitDiagram";
-                        readonly params: {
-                            readonly duration: 0;
+                    }, undefined, Events>, ActionFunction<Readonly<{
+                        subject: Subject;
+                        viewId: ViewId;
+                        xyflow: XYFLowInstance | null;
+                        xystore: XYStoreApi | null;
+                        initialized: {
+                            xydata: boolean;
+                            xyflow: boolean;
                         };
-                    }, ActionFunction<Readonly<{
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                        bounds: BBox;
+                    }>, {
+                        type: "update.layoutData";
+                        data: LayoutResult;
+                    }, Events, undefined, never, never, never, never, never>, ActionFunction<Readonly<{
                         subject: Subject;
                         viewId: ViewId;
                         xyflow: XYFLowInstance | null;

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

@@ -218,12 +218,7 @@ const relationshipDetailsLogic = setup({
           actions: [
             "updateLayoutData",
             cancel("fitDiagram"),
-            {
-              type: "xyflow:fitDiagram",
-              params: {
-                duration: 0
-              }
-            },
+            raise({ type: "fitDiagram", duration: 0 }, { id: "fitDiagram", delay: 50 }),
             raise({ type: "xyflow.updateNodeInternals" }, { delay: 75 })
           ]
         },

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

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

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

@@ -27,7 +27,7 @@ const ElementDetailsButtonWithHandler = (props) => {
 const ElementNode = customNode((props) => {
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
-    /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
+    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
     /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
     /* @__PURE__ */ jsx(ElementPorts, { ...props })

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

@@ -1,8 +1,7 @@
 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, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
-import { EdgeMarkerType, HandleType } from '@xyflow/system';
+import { GeneralHelpers, EdgeMarkerType, HandleType, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
 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;
@@ -57,7 +56,7 @@ export declare function useRelationshipDetails(): {
                 active?: boolean;
                 dimmed?: import("../../base").Base.Dimmed;
             };
-        }> & Omit< ViewportHelperFunctions, "initialized"> & {
+        }> & ViewportHelperFunctions & {
             viewportInitialized: boolean;
         }) | null;
         xystore: {

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

@@ -2,7 +2,7 @@ import { nonNullable } from '@likec4/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
-import { createContext, useTransition, useMemo, useContext } from 'react';
+import { createContext, useMemo, useContext } from 'react';
 
 const RelationshipDetailsActorContext = createContext(null);
 function useRelationshipDetailsActor() {
@@ -15,7 +15,6 @@ function useRelationshipDetailsState(selector, compare = shallowEqual) {
 }
 function useRelationshipDetails() {
   const actor = useRelationshipDetailsActor();
-  const [, startTransition] = useTransition();
   return useMemo(() => ({
     actor,
     get rootElementId() {
@@ -31,9 +30,7 @@ function useRelationshipDetails() {
       }
     },
     fitDiagram: () => {
-      startTransition(() => {
-        actor.send({ type: "fitDiagram" });
-      });
+      actor.send({ type: "fitDiagram" });
     },
     close: () => {
       if (actor._parent) {

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

@@ -1,8 +1,4 @@
-import '@dagrejs/dagre';
 import { Queue, nonNullable } from '@likec4/core';
-import '@xstate/react';
-import 'fast-equals';
-import 'react';
 import { hasAtLeast } from 'remeda';
 import { ZIndexes } from '../../base/const.js';
 

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/system';
+import { Position } from '@xyflow/react';
 import { Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const edgeTypes: {
     relationship: NamedExoticComponent<{

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

@@ -1,10 +1,9 @@
 import { BBox, Fqn, ViewId, NonEmptyArray, RelationId, Color, RelationshipLineType } from '@likec4/core';
-import { EdgeChange, NodeChange, ReactFlowInstance, useStoreApi, GeneralHelpers, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
+import { EdgeChange, NodeChange, ReactFlowInstance, useStoreApi, EdgeMarkerType, HandleType, 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>>;
@@ -1140,7 +1139,7 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     active?: boolean;
                                     dimmed?: Base.Dimmed;
                                 };
-                            }> & Omit< ViewportHelperFunctions, "initialized"> & {
+                            }> & ViewportHelperFunctions & {
                                 viewportInitialized: boolean;
                             };
                             xystore: {

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

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

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

@@ -29,7 +29,7 @@ const ElementDetailsButtonWithHandler = (props) => {
 const ElementNode = customNode((props) => {
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { component: m.div, layoutId: props.id, nodeProps: props, children: [
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
-    /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
+    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
     /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
     /* @__PURE__ */ jsx(ElementPorts, { ...props })

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

@@ -2,8 +2,7 @@ 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, ViewportHelperFunctions } from '@xyflow/react';
-import { EdgeMarkerType, HandleType } from '@xyflow/system';
+import { GeneralHelpers, EdgeMarkerType, HandleType, ViewportHelperFunctions } from '@xyflow/react';
 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;
@@ -57,7 +56,7 @@ export declare function useRelationshipsBrowser(): {
                 active?: boolean;
                 dimmed?: import("../../base").Base.Dimmed;
             };
-        }> & Omit< ViewportHelperFunctions, "initialized"> & {
+        }> & ViewportHelperFunctions & {
             viewportInitialized: boolean;
         }) | null;
         xystore: XYStoreApi | null;

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

@@ -2,7 +2,7 @@ import { nonNullable } from '@likec4/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
-import { createContext, useTransition, useMemo, useContext } from 'react';
+import { createContext, useMemo, useContext } from 'react';
 
 const RelationshipsBrowserActorContext = createContext(null);
 function useRelationshipsBrowserActor() {
@@ -14,7 +14,6 @@ function useRelationshipsBrowserState(selector, compare = shallowEqual) {
 }
 function useRelationshipsBrowser() {
   const actor = useRelationshipsBrowserActor();
-  const [, startTransition] = useTransition();
   return useMemo(() => ({
     actor,
     get rootElementId() {
@@ -35,12 +34,10 @@ function useRelationshipsBrowser() {
       });
     },
     navigateTo: (subject, fromNode) => {
-      startTransition(() => {
-        actor.send({
-          type: "navigate.to",
-          subject,
-          fromNode
-        });
+      actor.send({
+        type: "navigate.to",
+        subject,
+        fromNode
       });
     },
     fitDiagram: () => {

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

@@ -11,7 +11,7 @@ export type LayoutRelationshipsViewResult = {
 };
 export declare namespace LayoutRelationshipsViewResult {
     const Empty: ElementKind;
-    type Node = DiagramNode & {
+    type Node = Omit<DiagramNode, 'deploymentRef' | 'inEdges' | 'outEdges'> & {
         column: RelationshipsBrowserTypes.Column;
         ports: RelationshipsBrowserTypes.Ports;
         existsInCurrentView: boolean;

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

@@ -13,7 +13,7 @@ const Sizes = {
     edgesep: 25
   },
   edgeLabel: {
-    width: 120,
+    width: 140,
     height: 10,
     minlen: 1,
     weight: 1
@@ -235,7 +235,7 @@ function layoutRelationshipsView(data, scope) {
     for (const edge of g.edges()) {
       g.setEdge(edge, {
         ...Sizes.edgeLabel,
-        width: edgeCount > 30 ? 800 : 400
+        width: edgeCount > 25 ? 800 : 400
       });
     }
   }
@@ -346,8 +346,6 @@ function layoutRelationshipsView(data, scope) {
           width,
           height
         },
-        inEdges: [],
-        outEdges: [],
         children: [],
         width,
         height,
@@ -393,8 +391,6 @@ function layoutRelationshipsView(data, scope) {
         ...element.$element.style
       },
       navigateTo,
-      inEdges: [],
-      outEdges: [],
       ...children.length > 0 && { depth: nodeDepth(id) },
       children,
       width,

package/dist/state/diagram-machine.d.ts

@@ -1,6 +1,6 @@
 import { BBox, DiagramView, EdgeId, ElementNotation, Fqn, NodeId, StepEdgeId, ViewChange, ViewId, XYPoint, NonEmptyArray, Point, Color, RelationshipLineType, RelationshipArrowType } from '@likec4/core';
-import { ReactFlowInstance, useStoreApi } from '@xyflow/react';
-import { EdgeChange, NodeChange, Rect, Viewport, EdgeMarkerType, HandleType, XYPosition } from '@xyflow/system';
+import { ReactFlowInstance, useStoreApi, EdgeMarkerType, HandleType } from '@xyflow/react';
+import { EdgeChange, NodeChange, Rect, Viewport, XYPosition } from '@xyflow/system';
 import { ActorLogicFrom, ActorRef, AnyEventObject, Snapshot, StateMachine, ActorRefFromLogic, NonReducibleUnknown, EventObject, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, MachineSnapshot, AnyActorRef, StateValue, ActionFunction, CallbackActorLogic, Values, RequiredActorOptions, GetConcreteByKey, CancelAction, StopAction } from 'xstate';
 import { Base } from '../base/types';
 import { EnabledFeatures, FeatureName } from '../context/DiagramFeatures';

package/dist/state/hotkeyActor.js

@@ -3,15 +3,24 @@ import { fromCallback } from 'xstate';
 
 const hotkeyActorLogic = fromCallback(({ sendBack }) => {
   const escHandler = getHotkeyHandler([
-    ["Escape", () => sendBack({ type: "key.esc" }), {
+    ["Escape", (event) => {
+      event.stopPropagation();
+      sendBack({ type: "key.esc" });
+    }, {
       preventDefault: true
     }]
   ]);
   const arrowshandler = getHotkeyHandler([
-    ["ArrowLeft", () => sendBack({ type: "key.arrow.left" }), {
+    ["ArrowLeft", (event) => {
+      event.stopPropagation();
+      sendBack({ type: "key.arrow.left" });
+    }, {
       preventDefault: true
     }],
-    ["ArrowRight", () => sendBack({ type: "key.arrow.right" }), {
+    ["ArrowRight", (event) => {
+      event.stopPropagation();
+      sendBack({ type: "key.arrow.right" });
+    }, {
       preventDefault: true
     }]
   ]);