@likec4/diagram 1.21.0 → 1.22.0

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

@@ -0,0 +1,196 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { compareNatural } from "@likec4/core";
+import { useCombobox, ComboboxOption, Text, Combobox, ComboboxTarget, Input, rem, ComboboxDropdown, ComboboxOptions, ScrollAreaAutosize, ComboboxEmpty } from "@mantine/core";
+import { useFocusWithin, useIsFirstRender, useDebouncedValue, useWindowEvent } from "@mantine/hooks";
+import { usePreviousDistinct } from "@react-hookz/web";
+import { IconSearch } from "@tabler/icons-react";
+import "react";
+import { isString, keys, only } from "remeda";
+import { useLikeC4Model } from "../../../likec4model/useLikeC4Model.js";
+import { input, root, focusable } from "./LikeC4Search.css.js";
+import { useIsPickViewActive, useSearch, setSearch } from "./state.js";
+import { moveFocusToSearchInput, stopAndPrevent } from "./utils.js";
+function startingWithKind(search) {
+  return search.match(/^(k|ki|kin|kind|kind:)$/) != null;
+}
+const SEARCH_PREFIXES = ["#", "kind:"];
+function LikeC4SearchInput() {
+  var _a, _b;
+  const isPickViewActive = useIsPickViewActive();
+  const likec4model = useLikeC4Model(true);
+  const combobox = useCombobox({
+    scrollBehavior: "smooth"
+  });
+  const { ref, focused } = useFocusWithin();
+  const search = useSearch();
+  const previous = usePreviousDistinct(search);
+  const isFirstRender = useIsFirstRender();
+  const [isEmptyForSomeTime] = useDebouncedValue(search === "" && !isFirstRender, isString(previous) ? 400 : 1e3);
+  useWindowEvent(
+    "keydown",
+    (event) => {
+      try {
+        if (!focused && !isPickViewActive && (event.key === "Backspace" || event.key.startsWith("Arrow") || event.key.match(new RegExp("^\\p{L}$", "u")))) {
+          moveFocusToSearchInput();
+        }
+      } catch (e) {
+        console.warn(e);
+      }
+    }
+  );
+  let options = [];
+  let isExactMatch = false;
+  switch (true) {
+    case (search === "" && (isEmptyForSomeTime || SEARCH_PREFIXES.includes(previous ?? ""))): {
+      options = SEARCH_PREFIXES.map((prefix) => /* @__PURE__ */ jsxs(ComboboxOption, { value: prefix, children: [
+        /* @__PURE__ */ jsx(Text, { component: "span", opacity: 0.5, mr: 4, fz: "sm", children: "Search by" }),
+        prefix
+      ] }, prefix));
+      break;
+    }
+    case search.startsWith("#"): {
+      const searchTag = search.toLocaleLowerCase().slice(1);
+      const alloptions = likec4model.allTags().filter((tag) => tag.toLocaleLowerCase().includes(searchTag)).sort(
+        compareNatural
+      );
+      isExactMatch = ((_a = only(alloptions)) == null ? void 0 : _a.toLocaleLowerCase()) === searchTag;
+      if (alloptions.length === 0) {
+        options = [
+          /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No tags found" }, "empty-tags")
+        ];
+      } else {
+        options = alloptions.map((tag) => /* @__PURE__ */ jsxs(ComboboxOption, { value: `#${tag}`, children: [
+          /* @__PURE__ */ jsx(Text, { component: "span", opacity: 0.5, mr: 1, fz: "sm", children: "#" }),
+          tag
+        ] }, tag));
+      }
+      break;
+    }
+    case search.startsWith("kind:"):
+    case startingWithKind(search): {
+      const term = search.length > 5 ? search.slice(5).toLocaleLowerCase() : "";
+      let alloptions = keys(likec4model.$model.specification.elements);
+      if (term) {
+        alloptions = alloptions.filter((kind) => kind.toLocaleLowerCase().includes(term));
+        isExactMatch = ((_b = only(alloptions)) == null ? void 0 : _b.toLocaleLowerCase()) === term;
+      }
+      if (alloptions.length === 0) {
+        options = [
+          /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No kinds found" }, "empty-kinds")
+        ];
+      } else {
+        options = alloptions.map((kind) => /* @__PURE__ */ jsxs(ComboboxOption, { value: `kind:${kind}`, children: [
+          /* @__PURE__ */ jsx(Text, { component: "span", opacity: 0.5, mr: 1, fz: "sm", children: "kind:" }),
+          kind
+        ] }, kind));
+      }
+      break;
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    Combobox,
+    {
+      onOptionSubmit: (optionValue) => {
+        setSearch(optionValue);
+        combobox.resetSelectedOption();
+        if (!SEARCH_PREFIXES.includes(optionValue)) {
+          combobox.closeDropdown();
+          setTimeout(() => {
+            var _a2;
+            (_a2 = document.querySelector(`.${root} .${focusable}`)) == null ? void 0 : _a2.focus();
+          }, 50);
+        }
+      },
+      width: "max-content",
+      position: "bottom-start",
+      shadow: "md",
+      offset: {
+        mainAxis: 4,
+        crossAxis: 50
+      },
+      store: combobox,
+      withinPortal: false,
+      children: [
+        /* @__PURE__ */ jsx(ComboboxTarget, { children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref,
+            id: "likec4searchinput",
+            placeholder: "Search by title, description or start with # or kind:",
+            tabIndex: 0,
+            classNames: {
+              input
+            },
+            size: "xl",
+            value: search,
+            leftSection: /* @__PURE__ */ jsx(IconSearch, { style: { width: rem(20) }, stroke: 2 }),
+            onChange: (event) => {
+              setSearch(event.currentTarget.value);
+              combobox.openDropdown();
+              combobox.updateSelectedOptionIndex();
+            },
+            onClick: () => combobox.openDropdown(),
+            onFocus: () => combobox.openDropdown(),
+            onBlur: () => combobox.closeDropdown(),
+            onKeyDownCapture: (e) => {
+              var _a2;
+              if (e.key === "Tab") {
+                switch (true) {
+                  case combobox.getSelectedOptionIndex() >= 0: {
+                    combobox.clickSelectedOption();
+                    return stopAndPrevent(e);
+                  }
+                  case options.length === 1: {
+                    const firstOption = combobox.selectFirstOption();
+                    if (firstOption) {
+                      combobox.clickSelectedOption();
+                    }
+                    return stopAndPrevent(e);
+                  }
+                  case startingWithKind(search): {
+                    setSearch("kind:");
+                    return stopAndPrevent(e);
+                  }
+                }
+                return;
+              }
+              if (e.key === "Backspace" && combobox.dropdownOpened) {
+                if (search === "kind:") {
+                  setSearch("");
+                  combobox.resetSelectedOption();
+                  return stopAndPrevent(e);
+                }
+                if (search.startsWith("kind:") && isExactMatch) {
+                  setSearch("kind:");
+                  combobox.resetSelectedOption();
+                  return stopAndPrevent(e);
+                }
+                if (search.startsWith("#") && isExactMatch) {
+                  setSearch("#");
+                  combobox.resetSelectedOption();
+                  return stopAndPrevent(e);
+                }
+              }
+              if (e.key === "Escape" && combobox.dropdownOpened && options.length > 0) {
+                stopAndPrevent(e);
+                combobox.closeDropdown();
+                return;
+              }
+              if (e.key === "ArrowDown" && (!combobox.dropdownOpened || options.length === 0 || isExactMatch || // reached the last option and the search is empty
+              search === "" && combobox.getSelectedOptionIndex() === options.length - 1)) {
+                combobox.closeDropdown();
+                stopAndPrevent(e);
+                (_a2 = document.querySelector(`.${root} .${focusable}`)) == null ? void 0 : _a2.focus();
+                return;
+              }
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(ComboboxDropdown, { hidden: options.length === 0, style: { minWidth: 300 }, children: /* @__PURE__ */ jsx(ComboboxOptions, { children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { mah: "min(322px, calc(100cqh - 50px))", type: "scroll", children: options }) }) })
+      ]
+    }
+  );
+}
+export {
+  LikeC4SearchInput
+};

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

@@ -0,0 +1,9 @@
+import { LikeC4Model } from '@likec4/core';
+import { ElementProps, UnstyledButtonProps } from '@mantine/core';
+export declare const NothingFound: () => import("react/jsx-runtime").JSX.Element;
+export declare function ViewsColumn(): import("react/jsx-runtime").JSX.Element;
+export declare function ViewButton({ className, view, loop, search, ...props }: {
+    view: LikeC4Model.View;
+    search: string;
+    loop?: boolean;
+} & UnstyledButtonProps & ElementProps<'button'>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,130 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isDeploymentView } from "@likec4/core";
+import { Stack, VisuallyHidden, UnstyledButton, Box, createScopedKeydownHandler, ThemeIcon, Group, Highlight, Badge } from "@mantine/core";
+import { IconStack2, IconZoomScan } from "@tabler/icons-react";
+import clsx from "clsx";
+import { m } from "framer-motion";
+import { first } from "remeda";
+import { useLikeC4Model } from "../../../likec4model/useLikeC4Model.js";
+import { emptyBoX } from "./_shared.css.js";
+import { useNormalizedSearch, useCloseSearchAndNavigateTo } from "./state.js";
+import { moveFocusToSearchInput, centerY } from "./utils.js";
+import { viewTitle, viewDescription, focusable, viewButton } from "./ViewsColumn.css.js";
+import { useCurrentViewId } from "../../../hooks/useCurrentViewId.js";
+const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" });
+function ViewsColumn() {
+  const search = useNormalizedSearch();
+  let views = [...useLikeC4Model(true).views()];
+  if (search) {
+    if (search.startsWith("kind:")) {
+      views = [];
+    } else {
+      views = views.filter((view) => {
+        if (search.startsWith("#")) {
+          return view.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1)));
+        }
+        return (view.title ?? "" + view.$view.description ?? "").toLocaleLowerCase().includes(search);
+      });
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      renderRoot: (props) => /* @__PURE__ */ jsx(m.div, { layout: true, ...props }),
+      gap: 8,
+      "data-likec4-search-views": true,
+      onKeyDown: (e) => {
+        if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+          const maxY = e.target.getBoundingClientRect().y;
+          const elementButtons = [...document.querySelectorAll(
+            `[data-likec4-search-elements] .likec4-element-button`
+          )];
+          let elementButton = elementButtons.length > 1 ? elementButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1) : null;
+          elementButton ?? (elementButton = first(elementButtons));
+          if (elementButton) {
+            e.stopPropagation();
+            elementButton.focus();
+          }
+          return;
+        }
+      },
+      children: [
+        views.length === 0 && /* @__PURE__ */ jsx(NothingFound, {}),
+        views.length > 0 && /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
+          UnstyledButton,
+          {
+            "data-likec4-view": true,
+            tabIndex: -1,
+            onFocus: (e) => {
+              e.stopPropagation();
+              moveFocusToSearchInput();
+            }
+          }
+        ) }),
+        views.map((view, i) => /* @__PURE__ */ jsx(m.div, { layoutId: `@view${view.id}`, children: /* @__PURE__ */ jsx(
+          ViewButton,
+          {
+            view,
+            search,
+            tabIndex: i === 0 ? 0 : -1
+          }
+        ) }, view.id))
+      ]
+    }
+  );
+}
+function ViewButton({ className, view, loop = false, search, ...props }) {
+  const navigateTo = useCloseSearchAndNavigateTo();
+  const currentViewId = useCurrentViewId();
+  const isCurrentView = view.id === currentViewId;
+  return /* @__PURE__ */ jsxs(
+    UnstyledButton,
+    {
+      ...props,
+      className: clsx(focusable, viewButton, className),
+      "data-likec4-view": view.id,
+      ...isCurrentView && { "data-disabled": true },
+      onClick: (e) => {
+        e.stopPropagation();
+        navigateTo(view.id);
+      },
+      onKeyDown: createScopedKeydownHandler({
+        siblingSelector: "[data-likec4-view]",
+        parentSelector: "[data-likec4-search-views]",
+        activateOnFocus: false,
+        loop,
+        orientation: "vertical",
+        onKeyDown: (e) => {
+          if (e.nativeEvent.code === "Space") {
+            e.stopPropagation();
+            navigateTo(view.id);
+          }
+        }
+      }),
+      children: [
+        /* @__PURE__ */ jsx(ThemeIcon, { variant: "transparent", children: isDeploymentView(view) ? /* @__PURE__ */ jsx(IconStack2, { stroke: 1.8 }) : /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8 }) }),
+        /* @__PURE__ */ jsxs(Box, { style: { flexGrow: 1 }, children: [
+          /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", align: "center", children: [
+            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: search, className: viewTitle, children: view.title || "untitled" }),
+            isCurrentView && /* @__PURE__ */ jsx(Badge, { size: "xs", fz: 9, radius: "sm", children: "current" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Highlight,
+            {
+              highlight: view.$view.description ? search : "",
+              component: "div",
+              className: viewDescription,
+              lineClamp: 1,
+              children: view.$view.description || "No description"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  NothingFound,
+  ViewButton,
+  ViewsColumn
+};

package/dist/likec4diagram/ui/search/ViewsColumn.css.d.ts

@@ -0,0 +1,5 @@
+export { focusable } from './_shared.css';
+export declare const viewButton: string;
+export declare const viewTitle: string;
+export declare const viewDescription: string;
+export declare const viewButtonDescription: string;

package/dist/likec4diagram/ui/search/ViewsColumn.css.js

@@ -0,0 +1,12 @@
+/* empty css                           */
+/* empty css                               */
+var focusable = "_1cfw8gr4";
+var viewButton = "ia79t50 _1cfw8gr3";
+var viewTitle = "ia79t51 _1cfw8gr5";
+var viewDescription = "ia79t52 _1cfw8gr6";
+export {
+  focusable,
+  viewButton,
+  viewDescription,
+  viewTitle
+};

package/dist/likec4diagram/ui/search/_shared.css.d.ts

@@ -0,0 +1,16 @@
+export declare const titleColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const descriptionColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const iconColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const buttonFocused: {
+    outline: "none";
+    backgroundColor: string;
+    borderColor: string;
+    vars: {
+        [x: string]: string;
+    };
+};
+export declare const button: string;
+export declare const focusable: string;
+export declare const title: string;
+export declare const description: string;
+export declare const emptyBoX: string;

package/dist/likec4diagram/ui/search/_shared.css.js

@@ -0,0 +1,5 @@
+/* empty css                           */
+var emptyBoX = "_1cfw8gr7";
+export {
+  emptyBoX
+};

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

@@ -0,0 +1,19 @@
+import { Fqn, LikeC4Model, ViewId } from '@likec4/core';
+export declare function setSearch(term: string): void;
+export declare function useSearch(): string;
+export declare function useNormalizedSearch(): string;
+export declare const LikeC4SearchContext: ({ children, value }: {
+    value: (cb?: () => void) => void;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useCloseSearch: () => (cb?: () => void) => void;
+type PickView = {
+    elementFqn: Fqn;
+    scoped: LikeC4Model.View[];
+    others: LikeC4Model.View[];
+};
+export declare function usePickView(): PickView | null;
+export declare function setPickView(data: PickView | null): void;
+export declare function wasResetPickView(): boolean;
+export declare function useIsPickViewActive(): boolean;
+export declare function useCloseSearchAndNavigateTo(): (viewId: ViewId, fromElementFqn?: Fqn) => void;
+export {};

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";
@@ -64,7 +64,7 @@ const Overlays = memo(() => {
     rectFromNode
   } = useDiagramActorState(selector, equals);
   const isMotionReduced = useReducedMotion() ?? false;
-  const isActiveOverlay = !!activeElementDetailsOf;
+  const isActiveOverlay = !!activeElementDetailsOf || !!relationshipsBrowserActor || !!relationshipDetailsActor;
   useEffect(() => {
     if (!xyflowRendererDom || isMotionReduced) return;
     animate(xyflowRendererDom, {
@@ -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";