@likec4/diagram 1.21.1 → 1.22.1

package/dist/likec4diagram/ui/search/state.js

@@ -0,0 +1,72 @@
+import { DiagramNode } from "@likec4/core";
+import { createSafeContext } from "@mantine/core";
+import { useCallbackRef } from "@mantine/hooks";
+import { useStore } from "@nanostores/react";
+import { atom, computed, onMount } from "nanostores";
+import { useDeferredValue } from "react";
+import { useDiagram } from "../../../hooks/useDiagram.js";
+const $search = atom("");
+function setSearch(term) {
+  $search.set(term);
+}
+function useSearch() {
+  return useStore($search);
+}
+const $normalizedSearch = computed($search, (search) => {
+  const v = search.trim().toLowerCase();
+  return v.length > 1 ? v : "";
+});
+function useNormalizedSearch() {
+  return useDeferredValue(useStore($normalizedSearch));
+}
+const [LikeC4SearchContext, useCloseSearch] = createSafeContext("LikeC4Search");
+const $pickView = atom(null);
+onMount($search, () => {
+  $pickView.set(null);
+});
+function usePickView() {
+  return useStore($pickView);
+}
+function setPickView(data) {
+  $pickView.set(data);
+}
+function wasResetPickView() {
+  if ($pickView.get() !== null) {
+    $pickView.set(null);
+    return true;
+  }
+  return false;
+}
+const $pickViewActive = computed($pickView, (pickView) => pickView !== null);
+function useIsPickViewActive() {
+  return useStore($pickViewActive);
+}
+function useCloseSearchAndNavigateTo() {
+  const diagram = useDiagram();
+  const close = useCloseSearch();
+  return useCallbackRef((viewId, fromElementFqn) => {
+    close(() => {
+      var _a, _b;
+      fromElementFqn ?? (fromElementFqn = (_a = $pickView.get()) == null ? void 0 : _a.elementFqn);
+      setPickView(null);
+      const fromNode = fromElementFqn ? (_b = diagram.getContext().view.nodes.find((n) => DiagramNode.modelRef(n) === fromElementFqn)) == null ? void 0 : _b.id : void 0;
+      if (diagram.currentView().id === viewId && fromNode) {
+        diagram.focusNode(fromNode);
+        return;
+      }
+      diagram.navigateTo(viewId, fromNode);
+    });
+  });
+}
+export {
+  LikeC4SearchContext,
+  setPickView,
+  setSearch,
+  useCloseSearch,
+  useCloseSearchAndNavigateTo,
+  useIsPickViewActive,
+  useNormalizedSearch,
+  usePickView,
+  useSearch,
+  wasResetPickView
+};

package/dist/likec4diagram/ui/search/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function stopAndPrevent(e: React.KeyboardEvent | KeyboardEvent): void;
+export declare function centerY(element: HTMLElement): number;
+export declare function moveFocusToSearchInput(): void;

package/dist/likec4diagram/ui/search/utils.js

@@ -0,0 +1,23 @@
+function stopAndPrevent(e) {
+  e.stopPropagation();
+  e.preventDefault();
+  return;
+}
+function centerY(element) {
+  const rect = element.getBoundingClientRect();
+  const y = rect.y + Math.floor(rect.height / 2);
+  return y;
+}
+function moveFocusToSearchInput() {
+  const input = document.getElementById("likec4searchinput");
+  if (input) {
+    const length = input.value.length;
+    input.focus();
+    input.setSelectionRange(length, length);
+  }
+}
+export {
+  centerY,
+  moveFocusToSearchInput,
+  stopAndPrevent
+};

package/dist/likec4diagram/useLayoutConstraints.js

@@ -6,7 +6,6 @@ import "@xyflow/react";
 import { getNodeDimensions } from "@xyflow/system";
 import { useRef, useMemo } from "react";
 import { pipe, filter, map, hasAtLeast, isNullish } from "remeda";
-import { useSyncedRef } from "@react-hookz/web";
 import { useDiagram } from "../hooks/useDiagram.js";
 import { useXYStoreApi } from "../hooks/useXYFlow.js";
 class Rect {
@@ -192,11 +191,11 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
 }
 function useLayoutConstraints() {
   const xystore = useXYStoreApi();
-  const diagram = useSyncedRef(useDiagram());
+  const diagram = useDiagram();
   const solverRef = useRef(void 0);
   return useMemo(() => ({
     onNodeDragStart: (_event, xynode) => {
-      diagram.current.cancelSaveManualLayout();
+      diagram.cancelSaveManualLayout();
       const { nodeLookup } = xystore.getState();
       const draggingNodes = pipe(
         Array.from(nodeLookup.values()),
@@ -219,10 +218,10 @@ function useLayoutConstraints() {
     onNodeDragStop: () => {
       var _a;
       (_a = solverRef.current) == null ? void 0 : _a.updateXYFlowNodes();
-      diagram.current.scheduleSaveManualLayout();
+      diagram.scheduleSaveManualLayout();
       solverRef.current = void 0;
     }
-  }), [xystore]);
+  }), [xystore, diagram]);
 }
 export {
   createLayoutConstraints,

package/dist/likec4model/useLikeC4ElementsTree.d.ts

@@ -4,6 +4,7 @@ interface LikeC4ModelTreeNodeData {
     value: Fqn;
     children: LikeC4ModelTreeNodeData[];
 }
+export declare const sortByLabel: (a: LikeC4ModelTreeNodeData, b: LikeC4ModelTreeNodeData) => 0 | 1 | -1;
 /**
  * Returns a tree of elements in the model.
  * If `viewId` is provided, returns the tree of elements in the view.

package/dist/likec4model/useLikeC4ElementsTree.js

@@ -21,5 +21,6 @@ function useLikeC4ElementsTree(viewId) {
   }, [model, viewId ?? null]);
 }
 export {
+  sortByLabel,
   useLikeC4ElementsTree
 };

package/dist/overlays/Overlays.js

@@ -3,7 +3,7 @@ import { Box, Notification, Code, Group, Button } from "@mantine/core";
 import { useCallbackRef } from "@mantine/hooks";
 import { IconX } from "@tabler/icons-react";
 import { deepEqual } from "fast-equals";
-import { useReducedMotion } from "framer-motion";
+import { useReducedMotion, AnimatePresence } from "framer-motion";
 import { animate } from "framer-motion/dom";
 import { memo, useMemo, useEffect } from "react";
 import { ErrorBoundary } from "react-error-boundary";
@@ -79,23 +79,23 @@ const Overlays = memo(() => {
     diagram.closeOverlay();
   });
   return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsxs(ErrorBoundary, { FallbackComponent: Fallback, onReset: onClose, children: [
-    relationshipsBrowserActor && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete: onClose, children: relationshipsBrowserActor && /* @__PURE__ */ jsx(
       Overlay,
       {
-        onClose,
+        onClose: () => relationshipsBrowserActor.send({ type: "close" }),
         children: /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: relationshipsBrowserActor })
       },
       "relationships-browser"
-    ),
-    relationshipDetailsActor && /* @__PURE__ */ jsx(
+    ) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete: onClose, children: relationshipDetailsActor && /* @__PURE__ */ jsx(
       Overlay,
       {
-        onClose,
+        onClose: () => relationshipDetailsActor.send({ type: "close" }),
         children: /* @__PURE__ */ jsx(RelationshipDetails, { actorRef: relationshipDetailsActor })
       },
       "relationship-details"
-    ),
-    !!activeElementDetailsOf && /* @__PURE__ */ jsx(
+    ) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: !!activeElementDetailsOf && /* @__PURE__ */ jsx(
       ElementDetailsCard,
       {
         fqn: activeElementDetailsOf,
@@ -105,7 +105,7 @@ const Overlays = memo(() => {
         onClose
       },
       "element-details"
-    )
+    ) })
   ] }) });
 });
 Overlays.displayName = "Overlays";

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

@@ -1,12 +1,13 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { isScopedElementView, isDeploymentView } from "@likec4/core";
-import { RemoveScroll, Card, Box, Group, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Stack, Divider as Divider$1, Code, UnstyledButton, ThemeIcon } from "@mantine/core";
+import { Card, Box, Group, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Stack, Divider as Divider$1, Code, UnstyledButton, ThemeIcon } from "@mantine/core";
 import { useViewportSize, useSessionStorage } from "@mantine/hooks";
-import { useSyncedRef, useDebouncedCallback } from "@react-hookz/web";
+import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from "@react-hookz/web";
 import { IconExternalLink, IconFileSymlink, IconZoomScan, IconStack2 } from "@tabler/icons-react";
 import { useDragControls, useMotionValue, m } from "framer-motion";
-import { useCallback, useRef } from "react";
+import { useState, useCallback, useRef } from "react";
 import { pipe, map, partition, only, clamp, isNullish } from "remeda";
+import { Link } from "../../components/Link.js";
 import { useDiagram } from "../../hooks/useDiagram.js";
 import { dialog, card, cardHeader, title, tabsPanel, tabsTab, tabsList, tabsRoot, propertiesGrid, resizeHandle, elementIcon, propertyLabel, viewButton, viewButtonTitle } from "./ElementDetailsCard.css.js";
 import { TabPanelDeployments } from "./TabPanelDeployments.js";
@@ -16,7 +17,6 @@ import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
 import { useUpdateEffect } from "../../hooks/useUpdateEffect.js";
 import { IconRenderer } from "../../context/IconRenderer.js";
 import { IfEnabled, DiagramFeatures } from "../../context/DiagramFeatures.js";
-import { Link } from "../../base/Link.js";
 const Divider = Divider$1.withProps({
   mb: 8,
   labelPosition: "left",
@@ -54,6 +54,7 @@ function ElementDetailsCard({
   onClose
 }) {
   var _a, _b, _c;
+  const [opened, setOpened] = useState(false);
   const windowSize = useViewportSize();
   const windowWidth = windowSize.width || window.innerWidth || 1200, windowHeight = windowSize.height || window.innerHeight || 800;
   const [activeTab, setActiveTab] = useSessionStorage({
@@ -138,11 +139,21 @@ function ElementDetailsCard({
     },
     className: elementIcon
   });
+  useTimeoutEffect(() => {
+    var _a2, _b2;
+    if (!((_a2 = ref.current) == null ? void 0 : _a2.open)) {
+      (_b2 = ref.current) == null ? void 0 : _b2.showModal();
+    }
+  }, 30);
+  useTimeoutEffect(() => {
+    setOpened(true);
+  }, 120);
   return /* @__PURE__ */ jsx(
     m.dialog,
     {
       ref,
       className: dialog,
+      layout: true,
       initial: {
         "--backdrop-blur": "0px",
         "--backdrop-opacity": "10%"
@@ -158,22 +169,18 @@ function ElementDetailsCard({
           duration: 0.1
         }
       },
-      onAnimationStart: () => {
-        var _a2;
-        (_a2 = ref.current) == null ? void 0 : _a2.showModal();
-      },
       onClick: (e) => {
-        var _a2, _b2;
+        var _a2, _b2, _c2;
         if (((_b2 = (_a2 = e.target) == null ? void 0 : _a2.nodeName) == null ? void 0 : _b2.toUpperCase()) === "DIALOG") {
           e.stopPropagation();
-          close();
+          (_c2 = ref.current) == null ? void 0 : _c2.close();
         }
       },
       onClose: (e) => {
         e.stopPropagation();
         close();
       },
-      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsxs(
         Card,
         {
           drag: true,
@@ -347,7 +354,7 @@ function ElementDetailsCard({
                         enableRelationshipBrowser: false,
                         enableNavigateTo: false
                       },
-                      children: !!nodeModel && activeTab === "Relationships" && /* @__PURE__ */ jsx(
+                      children: opened && !!nodeModel && activeTab === "Relationships" && /* @__PURE__ */ jsx(
                         TabPanelRelationships,
                         {
                           element: elementModel,
@@ -399,7 +406,7 @@ function ElementDetailsCard({
             )
           ]
         }
-      ) })
+      )
     }
   );
 }

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

@@ -1,8 +1,12 @@
 import { HTMLMotionProps } from 'framer-motion';
-import { PropsWithChildren, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { PropsWithChildren } from 'react';
 type OverlayProps = PropsWithChildren<HTMLMotionProps<'dialog'> & {
+    classes?: {
+        dialog?: string;
+        body?: string;
+    };
     onClose: () => void;
     onClick?: never;
 }>;
-export declare const Overlay: ForwardRefExoticComponent<Omit<OverlayProps, "ref"> & RefAttributes<HTMLDialogElement>>;
+export declare function Overlay({ children, onClose, className, classes, ...rest }: OverlayProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/overlays/overlay/Overlay.js

@@ -1,12 +1,11 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { RemoveScroll, Box } from "@mantine/core";
-import { useMergedRef } from "@mantine/hooks";
-import { useSyncedRef, useDebouncedCallback } from "@react-hookz/web";
+import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from "@react-hookz/web";
 import clsx from "clsx";
 import { m } from "framer-motion";
-import { forwardRef, useState, useRef, useLayoutEffect } from "react";
+import { useState, useRef } from "react";
 import { body, dialog } from "./Overlay.css.js";
-const Overlay = forwardRef(({ children, onClose, className, ...rest }, ref) => {
+function Overlay({ children, onClose, className, classes, ...rest }) {
   const [opened, setOpened] = useState(false);
   const dialogRef = useRef(null);
   const onCloseRef = useSyncedRef(onClose);
@@ -17,23 +16,18 @@ const Overlay = forwardRef(({ children, onClose, className, ...rest }, ref) => {
     [],
     50
   );
-  useLayoutEffect(() => {
-    var _a;
-    const cancel = (e) => {
-      e.preventDefault();
-      onCloseRef.current();
-    };
-    (_a = dialogRef.current) == null ? void 0 : _a.addEventListener("cancel", cancel, { capture: true });
-    return () => {
-      var _a2;
-      (_a2 = dialogRef.current) == null ? void 0 : _a2.removeEventListener("cancel", cancel, { capture: true });
-    };
-  }, []);
+  useTimeoutEffect(() => {
+    var _a, _b;
+    if (!((_a = dialogRef.current) == null ? void 0 : _a.open)) {
+      (_b = dialogRef.current) == null ? void 0 : _b.showModal();
+    }
+    setOpened(true);
+  }, 30);
   return /* @__PURE__ */ jsx(
     m.dialog,
     {
-      ref: useMergedRef(ref, dialogRef),
-      className: clsx(dialog, className),
+      ref: dialogRef,
+      className: clsx(dialog, classes == null ? void 0 : classes.dialog, className),
       initial: {
         "--backdrop-blur": "0px",
         "--backdrop-opacity": "5%",
@@ -50,13 +44,8 @@ const Overlay = forwardRef(({ children, onClose, className, ...rest }, ref) => {
         //   delay: 0.25,
         // }
       },
-      onAnimationStart: () => {
-        var _a;
-        (_a = dialogRef.current) == null ? void 0 : _a.showModal();
-        setOpened(true);
-      },
       exit: {
-        opacity: 0.1,
+        opacity: 0,
         translateY: -10,
         "--backdrop-blur": "0px",
         "--backdrop-opacity": "0%",
@@ -65,22 +54,22 @@ const Overlay = forwardRef(({ children, onClose, className, ...rest }, ref) => {
         }
       },
       onClick: (e) => {
-        var _a, _b;
+        var _a, _b, _c;
         if (((_b = (_a = e.target) == null ? void 0 : _a.nodeName) == null ? void 0 : _b.toUpperCase()) === "DIALOG") {
           e.stopPropagation();
-          close();
+          (_c = dialogRef.current) == null ? void 0 : _c.close();
+          return;
         }
       },
       onClose: (e) => {
-        e.preventDefault();
         e.stopPropagation();
         close();
       },
       ...rest,
-      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, children: /* @__PURE__ */ jsx(Box, { className: body, children: opened && /* @__PURE__ */ jsx(Fragment, { children }) }) })
+      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, children: /* @__PURE__ */ jsx(Box, { className: clsx(body, classes == null ? void 0 : classes.body), children: opened && /* @__PURE__ */ jsx(Fragment, { children }) }) })
     }
   );
-});
+}
 export {
   Overlay
 };

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

@@ -81,7 +81,7 @@ const SelectEdge = ({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, miw: 250, maw: 420, children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { className: scrollArea, scrollbars: "y", type: "never", viewportRef: viewport, children: /* @__PURE__ */ jsx(Box, { className: edgeGrid, p: "xs", children: edges.map((e) => /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, miw: 250, maw: 400, children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { className: scrollArea, scrollbars: "y", type: "never", viewportRef: viewport, children: /* @__PURE__ */ jsx(Box, { className: edgeGrid, p: "xs", maw: 400, children: edges.map((e) => /* @__PURE__ */ jsxs(
           "div",
           {
             className: edgeRow,
@@ -95,7 +95,6 @@ const SelectEdge = ({
                 Box,
                 {
                   className: edgeSource,
-                  maw: 160,
                   mod: {
                     "edge-id": e.id,
                     "likec4-color": e.source.color
@@ -108,7 +107,6 @@ const SelectEdge = ({
                 Box,
                 {
                   className: edgeTarget,
-                  maw: 160,
                   mod: {
                     "likec4-color": e.target.color
                   },

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

@@ -5,8 +5,8 @@ import { IconX, IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
 import { ReactFlowProvider, useStoreApi, Panel } from "@xyflow/react";
 import clsx from "clsx";
 import { shallowEqual } from "fast-equals";
-import { AnimatePresence, m } from "framer-motion";
-import { useRef, memo, useEffect } from "react";
+import { AnimatePresence, LayoutGroup, m } from "framer-motion";
+import { useId, useRef, memo, useEffect } from "react";
 import { BaseXYFlow } from "../../base/BaseXYFlow.js";
 import { useRelationshipsView } from "./-useRelationshipsView.js";
 import { ViewPadding } from "./const.js";
@@ -15,6 +15,7 @@ import { nodeTypes } from "./custom/nodeTypes.js";
 import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from "./hooks.js";
 import { SelectElement } from "./SelectElement.js";
 function RelationshipsBrowser({ actorRef }) {
+  const id = useId();
   const initialRef = useRef(null);
   if (initialRef.current == null) {
     initialRef.current = {
@@ -22,7 +23,7 @@ function RelationshipsBrowser({ actorRef }) {
       initialEdges: []
     };
   }
-  return /* @__PURE__ */ jsx(RelationshipsBrowserActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(RelationshipsBrowserXYFlow, {}) }) });
+  return /* @__PURE__ */ jsx(RelationshipsBrowserActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id, children: /* @__PURE__ */ jsx(RelationshipsBrowserXYFlow, {}) }) }) }) });
 }
 const selector = (state) => ({
   initialized: state.context.initialized,
@@ -76,10 +77,10 @@ const RelationshipsBrowserXYFlow = memo(() => {
         browser.send({ type: "xyflow.resized" });
       }),
       onNodesChange: useCallbackRef((changes) => {
-        browser.send({ type: "xyflow.applyNodeChages", changes });
+        browser.send({ type: "xyflow.applyNodeChanges", changes });
       }),
       onEdgesChange: useCallbackRef((changes) => {
-        browser.send({ type: "xyflow.applyEdgeChages", changes });
+        browser.send({ type: "xyflow.applyEdgeChanges", changes });
       }),
       nodesDraggable: false,
       fitView: false,

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

@@ -1,6 +1,6 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ancestorsFqn } from "@likec4/core";
-import { useTree, useComputedColorScheme, Popover, PopoverTarget, Button, PopoverDropdown, ScrollAreaAutosize, Tree, Group, ActionIcon, Box, Text } from "@mantine/core";
+import { useTree, useComputedColorScheme, Box, Popover, PopoverTarget, Button, PopoverDropdown, ScrollAreaAutosize, Tree, Group, ActionIcon, Text } from "@mantine/core";
 import { IconSelector, IconChevronRight } from "@tabler/icons-react";
 import { useRef, useEffect } from "react";
 import * as SelectElement_css from "./SelectElement.css.js";
@@ -27,12 +27,12 @@ const SelectElement = ({
     tree.select(subjectId);
   }, [subjectId]);
   const theme = useComputedColorScheme();
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Box, { pos: "relative", children: /* @__PURE__ */ jsxs(
     Popover,
     {
-      position: "bottom",
+      position: "bottom-start",
       shadow: "md",
-      keepMounted: true,
+      keepMounted: false,
       withinPortal: false,
       closeOnClickOutside: true,
       clickOutsideEvents: ["pointerdown", "mousedown", "click"],
@@ -67,6 +67,10 @@ const SelectElement = ({
             classNames: SelectElement_css,
             levelOffset: 8,
             styles: {
+              root: {
+                maxWidth: 400,
+                overflow: "hidden"
+              },
               label: {
                 paddingTop: 5,
                 paddingBottom: 6
@@ -122,7 +126,7 @@ const SelectElement = ({
         ) }) })
       ]
     }
-  );
+  ) });
 };
 export {
   SelectElement

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

@@ -33,10 +33,10 @@ export type Events = {
     type: 'xyflow.edgeClick';
     edge: RelationshipsBrowserTypes.Edge;
 } | {
-    type: 'xyflow.applyNodeChages';
+    type: 'xyflow.applyNodeChanges';
     changes: NodeChange<RelationshipsBrowserTypes.Node>[];
 } | {
-    type: 'xyflow.applyEdgeChages';
+    type: 'xyflow.applyEdgeChanges';
     changes: EdgeChange<RelationshipsBrowserTypes.Edge>[];
 } | {
     type: 'xyflow.paneClick';

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

@@ -99,7 +99,7 @@ const relationshipsBrowserActor = setup({
       const currentSubjectNode = findRootSubject(currentNodes);
       const existingNode = navigateFromNode ? currentNodes.find((n) => n.id === navigateFromNode) : currentNodes.find((n) => n.type !== "empty" && n.data.column !== "subjects" && n.data.fqn === subjectId);
       if (!nextSubjectNode || !existingNode || nextSubjectNode.type === "empty" || !currentSubjectNode || nextSubjectNode.data.fqn === currentSubjectNode.data.fqn) {
-        xyflow.setViewport(nextviewport);
+        await xyflow.setViewport(nextviewport);
         return updateXYData();
       }
       const nextSubjectCenter = {
@@ -168,7 +168,7 @@ const relationshipsBrowserActor = setup({
         return updateXYData();
       }
       await xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration: 350 });
-      xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom });
+      await xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom });
       return updateXYData();
     })
   }
@@ -260,11 +260,11 @@ const relationshipsBrowserActor = setup({
                 xyedges: ({ event }) => event.xyedges
               })
             },
-            "xyflow.applyEdgeChages": {
-              // actions: log('layouting: ignore xyflow.applyEdgeChages'),
+            "xyflow.applyEdgeChanges": {
+              // actions: log('layouting: ignore xyflow.applyEdgeChanges'),
             },
-            "xyflow.applyNodeChages": {
-              // actions: log('layouting: ignore xyflow.applyNodeChages'),
+            "xyflow.applyNodeChanges": {
+              // actions: log('layouting: ignore xyflow.applyNodeChanges'),
             }
           }
         }
@@ -335,14 +335,14 @@ const relationshipsBrowserActor = setup({
     }
   },
   on: {
-    "xyflow.applyNodeChages": {
+    "xyflow.applyNodeChanges": {
       actions: assign({
         xynodes: ({ context, event }) => {
           return applyNodeChanges(event.changes, context.xynodes);
         }
       })
     },
-    "xyflow.applyEdgeChages": {
+    "xyflow.applyEdgeChanges": {
       actions: assign({
         xyedges: ({ context, event }) => {
           return applyEdgeChanges(event.changes, context.xyedges);

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

@@ -17,13 +17,13 @@ const nodeTypes = {
       /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
       /* @__PURE__ */ jsx(ElementActions, { ...props }),
       /* @__PURE__ */ jsx(ElementPorts, { ...props })
-    ] });
+    ] }, props.id);
   }),
   compound: customNode((props) => {
     return /* @__PURE__ */ jsxs(CompoundNodeContainer, { component: m.div, layoutId: props.id, nodeProps: props, children: [
       /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
       /* @__PURE__ */ jsx(CompoundPorts, { ...props })
-    ] });
+    ] }, props.id);
   }),
   empty: customNode((props) => {
     return /* @__PURE__ */ jsx(EmptyNode, { ...props });