@likec4/diagram 1.28.0 → 1.29.0

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

@@ -1,13 +1,13 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { ifilter, toArray, sortParentsFirst, isAncestor, nameFromFqn } from '@likec4/core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ifilter, sortParentsFirst, isAncestor, nameFromFqn } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
 import { useTree, Tree, ActionIcon, UnstyledButton, Box, Group, Highlight, Tooltip, Text } from '@mantine/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { IconChevronRight } from '@tabler/icons-react';
 import clsx from 'clsx';
-import { m } from 'framer-motion';
-import { useMemo, useEffect } from 'react';
-import { isEmpty, pipe, reduce, indexBy, prop, first, only, partition } from 'remeda';
+import * as m from 'motion/react-m';
+import { r as reactExports } from '../../../_virtual/index.js';
+import { isEmpty, pipe, reduce, only, partition, first } from 'remeda';
 import { IconOrShapeRenderer } from '../../../context/IconRenderer.js';
 import { sortByLabel } from '../../../likec4model/useLikeC4ElementsTree.js';
 import { useLikeC4Model } from '../../../likec4model/useLikeC4Model.js';
@@ -21,11 +21,7 @@ const btn = buttonsva();
 function ElementsColumn() {
   const search = useNormalizedSearch();
   const model = useLikeC4Model(true);
-  const {
-    all,
-    byid,
-    roots: data
-  } = useMemo(() => {
+  const data = reactExports.useMemo(() => {
     const searchTerms = search.split(".");
     let elements;
     if (isEmpty(search) || search === "kind:") {
@@ -41,9 +37,9 @@ function ElementsColumn() {
         return (element.title + " " + element.id + " " + (element.description ?? "")).toLocaleLowerCase().includes(search);
       });
     }
-    const { all: all2, roots } = pipe(
-      elements,
-      toArray(),
+    const byid = {};
+    const { all, roots } = pipe(
+      [...elements],
       sortParentsFirst,
       reduce((acc, element) => {
         const treeItem = {
@@ -53,6 +49,7 @@ function ElementsColumn() {
           searchTerms,
           children: []
         };
+        byid[treeItem.value] = treeItem;
         const parent = acc.all.findLast((root) => isAncestor(root.value, treeItem.value));
         if (parent) {
           parent.children.push(treeItem);
@@ -70,15 +67,32 @@ function ElementsColumn() {
       })
     );
     return {
-      all: all2,
-      byid: indexBy(all2, prop("value")),
+      all,
+      byid,
       roots: roots.sort(sortByLabel)
     };
   }, [model, search]);
+  const handleClick = useHandleElementSelection();
+  if (data.all.length === 0) {
+    return /* @__PURE__ */ jsx(NothingFound, {});
+  }
+  return /* @__PURE__ */ jsx(ElementsTree, { data, handleClick });
+}
+const setHoveredNode = () => {
+};
+function ElementsTree({
+  data: {
+    all,
+    byid,
+    roots
+  },
+  handleClick
+}) {
   const tree = useTree({
     multiple: false
   });
-  useEffect(() => {
+  tree.setHoveredNode = setHoveredNode;
+  reactExports.useEffect(() => {
     tree.collapseAllNodes();
     for (const nd of all) {
       if (nd.children.length > 0) {
@@ -86,65 +100,62 @@ function ElementsColumn() {
       }
     }
   }, [all]);
-  const handleClick = useHandleElementSelection();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    data.length === 0 && /* @__PURE__ */ jsx(NothingFound, {}),
-    /* @__PURE__ */ jsx(
-      Tree,
-      {
-        "data-likec4-search-elements": true,
-        allowRangeSelection: false,
-        clearSelectionOnOutsideClick: true,
-        selectOnClick: false,
-        tree,
-        data,
-        levelOffset: "lg",
-        classNames: {
-          root: treeRoot,
-          node: cx(focusable, treeNode),
-          label: treeLabel,
-          subtree: treeSubtree
-        },
-        onKeyDownCapture: (e) => {
-          const target = e.target;
-          const id = target.getAttribute("data-value");
-          const node = !!id && byid[id];
-          if (!node) return;
-          if (e.key === "ArrowUp") {
-            if (id === data[0]?.value) {
-              stopAndPrevent(e);
-              moveFocusToSearchInput();
-            }
-            return;
-          }
-          if (e.key === "ArrowRight") {
-            const hasChildren = node.children.length > 0;
-            if (hasChildren && tree.expandedState[id] === false) {
-              return;
-            }
-            const label = e.target.querySelector(".mantine-Tree-label") ?? target;
-            const maxY = label.getBoundingClientRect().y;
-            const viewButtons = [...document.querySelectorAll(
-              `[data-likec4-search-views] .${focusable}`
-            )];
-            let view = viewButtons.length > 1 ? viewButtons.find((el, i, all2) => centerY(el) > maxY || i === all2.length - 1) : null;
-            view ??= first(viewButtons);
-            if (view) {
-              stopAndPrevent(e);
-              view.focus();
-            }
-            return;
-          }
-          if (e.key === " " || e.key === "Enter") {
-            stopAndPrevent(e);
-            handleClick(node.element);
-            return;
-          }
-        },
-        renderNode: ElementTreeNode
+  const onKeyDownCapture = useCallbackRef((e) => {
+    const target = e.target;
+    const id = target.getAttribute("data-value");
+    const node = !!id && byid[id];
+    if (!node) return;
+    if (e.key === "ArrowUp") {
+      if (id === roots[0]?.value) {
+        stopAndPrevent(e);
+        moveFocusToSearchInput();
       }
-    )
-  ] });
+      return;
+    }
+    if (e.key === "ArrowRight") {
+      const hasChildren = node.children.length > 0;
+      if (hasChildren && tree.expandedState[id] === false) {
+        return;
+      }
+      const label = e.target.querySelector(".mantine-Tree-label") ?? target;
+      const maxY = label.getBoundingClientRect().y;
+      const viewButtons = [...document.querySelectorAll(
+        `[data-likec4-search-views] .${focusable}`
+      )];
+      let view = viewButtons.length > 1 ? viewButtons.find((el, i, all2) => centerY(el) > maxY || i === all2.length - 1) : null;
+      view ??= first(viewButtons);
+      if (view) {
+        stopAndPrevent(e);
+        view.focus();
+      }
+      return;
+    }
+    if (e.key === " " || e.key === "Enter") {
+      stopAndPrevent(e);
+      handleClick(node.element);
+      return;
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    Tree,
+    {
+      "data-likec4-search-elements": true,
+      allowRangeSelection: false,
+      clearSelectionOnOutsideClick: true,
+      selectOnClick: false,
+      tree,
+      data: roots,
+      levelOffset: "lg",
+      classNames: {
+        root: treeRoot,
+        node: cx(focusable, treeNode),
+        label: treeLabel,
+        subtree: treeSubtree
+      },
+      onKeyDownCapture,
+      renderNode: ElementTreeNode
+    }
+  );
 }
 function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
   const { element, searchTerms } = node;
@@ -224,11 +235,11 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
         ]
       }
     )
-  ] }, key);
+  ] });
 }
 function useHandleElementSelection() {
   const navigateTo = useCloseSearchAndNavigateTo();
-  return useCallbackRef((element) => {
+  return reactExports.useCallback((element) => {
     const views = [...element.views()];
     if (views.length === 0) {
       return;
@@ -244,7 +255,7 @@ function useHandleElementSelection() {
       scoped,
       others
     });
-  });
+  }, [setPickView, navigateTo]);
 }
 
 export { ElementsColumn };

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

@@ -1 +1,2 @@
-export declare function LikeC4Search(): import("react/jsx-runtime").JSX.Element;
+import { MemoExoticComponent } from 'react';
+export declare const LikeC4Search: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

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

@@ -1,19 +1,21 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Portal, RemoveScroll, Group, Box, ActionIcon, Grid, GridCol, Title, ScrollArea, ScrollAreaAutosize, Stack } from '@mantine/core';
-import { useDisclosure, useHotkeys, useCallbackRef, useFocusTrap, useWindowEvent, useFocusReturn } from '@mantine/hooks';
+import { css } from '@likec4/styles/css';
+import { Box } from '@likec4/styles/jsx';
+import { Portal, Group, ActionIcon, Grid, GridCol, Title, ScrollArea, ScrollAreaAutosize, Stack } from '@mantine/core';
+import { useDisclosure, useHotkeys, useCallbackRef, useWindowEvent, useFocusTrap, useFocusReturn } from '@mantine/hooks';
 import { IconX } from '@tabler/icons-react';
-import { AnimatePresence, m, LayoutGroup } from 'framer-motion';
-import { useRef } from 'react';
+import { AnimatePresence, m, LayoutGroup } from 'motion/react';
+import { r as reactExports } from '../../../_virtual/index.js';
 import { SearchControl } from '../../../components/SearchControl.js';
 import { ElementsColumn } from './ElementsColumn.js';
 import { backdrop, root, scrollArea, pickviewBackdrop, pickview, pickviewGroup } from './LikeC4Search.css.js';
 import { LikeC4SearchInput } from './SearchInput.js';
-import { LikeC4SearchContext, useCloseSearch, wasResetPickView, usePickView, setPickView } from './state.js';
+import { LikeC4SearchContext, useCloseSearch, useIsPickViewActive, wasResetPickView, usePickView, setPickView } from './state.js';
 import { stopAndPrevent } from './utils.js';
 import { ViewsColumn, ViewButton } from './ViewsColum.js';
 import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
 
-function LikeC4Search() {
+const LikeC4Search = reactExports.memo(() => {
   const [searchOpened, searchOps] = useDisclosure(false);
   useHotkeys([
     ["mod+k", () => searchOps.toggle(), {
@@ -23,7 +25,7 @@ function LikeC4Search() {
       preventDefault: true
     }]
   ]);
-  const afterCloseCbRef = useRef(null);
+  const afterCloseCbRef = reactExports.useRef(null);
   const close = useCallbackRef((cb) => {
     afterCloseCbRef.current = cb ?? null;
     searchOps.close();
@@ -45,8 +47,8 @@ function LikeC4Search() {
         }
       }
     ),
-    /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsx(RemoveScroll, { enabled: searchOpened, children: /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete, children: searchOpened && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Portal, { ...portalProps, reuseTargetNode: true, children: /* @__PURE__ */ jsxs(AnimatePresence, { onExitComplete, children: [
+      searchOpened && /* @__PURE__ */ jsx(
         m.div,
         {
           className: backdrop,
@@ -54,25 +56,26 @@ function LikeC4Search() {
           animate: {
             opacity: 1,
             transition: {
-              duration: 0.1
+              duration: 0.13
             }
           },
           exit: {
             opacity: 0,
             transition: {
-              duration: 0.075
+              duration: 0.13
             }
           }
         },
         "backdrop"
       ),
-      /* @__PURE__ */ jsx(LikeC4SearchOverlay, {}, "overlay")
-    ] }) }) }) })
+      searchOpened && /* @__PURE__ */ jsx(LikeC4SearchOverlay, {}, "overlay")
+    ] }) })
   ] });
-}
-function LikeC4SearchOverlay() {
+});
+LikeC4Search.displayName = "LikeC4Search";
+const LikeC4SearchOverlay = () => {
   const close = useCloseSearch();
-  const ref = useFocusTrap();
+  const pickViewActive = useIsPickViewActive();
   useWindowEvent(
     "keydown",
     (event) => {
@@ -88,9 +91,9 @@ function LikeC4SearchOverlay() {
   return /* @__PURE__ */ jsxs(
     m.div,
     {
-      ref,
       className: root,
-      "data-likec4-search": true,
+      "data-likec4-search": "true",
+      initial: false,
       animate: {
         opacity: 1,
         scale: 1,
@@ -99,8 +102,9 @@ function LikeC4SearchOverlay() {
       exit: {
         opacity: 0,
         scale: 0.9,
+        translateY: -30,
         transition: {
-          duration: 0.1
+          duration: 0.13
         }
       },
       children: [
@@ -126,12 +130,12 @@ function LikeC4SearchOverlay() {
         /* @__PURE__ */ jsxs(
           Grid,
           {
-            style: {
+            className: css({
               containerName: "likec4-search-elements",
               containerType: "size",
               overflow: "hidden",
               flexGrow: 1
-            },
+            }),
             children: [
               /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
                 ScrollArea,
@@ -156,12 +160,11 @@ function LikeC4SearchOverlay() {
             ]
           }
         ),
-        /* @__PURE__ */ jsx(Box, {}),
-        /* @__PURE__ */ jsx(PickView, {})
+        pickViewActive && /* @__PURE__ */ jsx(PickView, {})
       ]
     }
   );
-}
+};
 function PickView() {
   const pickview$1 = usePickView();
   const focusTrapRef = useFocusTrap(!!pickview$1);

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

@@ -4,7 +4,7 @@ import { useCombobox, ComboboxOption, Text, Combobox, ComboboxTarget, Input, rem
 import { useFocusWithin, useIsFirstRender, useDebouncedValue, useWindowEvent } from '@mantine/hooks';
 import { usePreviousDistinct } from '@react-hookz/web';
 import { IconSearch } from '@tabler/icons-react';
-import 'react';
+import '../../../_virtual/index.js';
 import { isString, keys, only } from 'remeda';
 import { useLikeC4Model } from '../../../likec4model/useLikeC4Model.js';
 import { input } from './LikeC4Search.css.js';

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

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { isDeploymentView } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
-import { Stack, VisuallyHidden, UnstyledButton, Box, createScopedKeydownHandler, ThemeIcon, Group, Highlight, Badge } from '@mantine/core';
+import { Box } from '@likec4/styles/jsx';
+import { Stack, VisuallyHidden, UnstyledButton, createScopedKeydownHandler, ThemeIcon, Group, Highlight, Badge } from '@mantine/core';
 import { IconStack2, IconZoomScan } from '@tabler/icons-react';
-import { m } from 'framer-motion';
+import * as m from 'motion/react-m';
 import { first } from 'remeda';
 import { useCurrentViewId } from '../../../hooks/useCurrentViewId.js';
 import { useLikeC4Model } from '../../../likec4model/useLikeC4Model.js';

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

@@ -1,9 +1,9 @@
 import { DiagramNode } from '@likec4/core';
 import { createSafeContext } from '@mantine/core';
-import { useCallbackRef } from '@mantine/hooks';
+import '@mantine/hooks';
 import { useStore } from '@nanostores/react';
-import { atom, computed, onMount } from 'nanostores';
-import { useDeferredValue } from 'react';
+import { computed, atom, onMount } from 'nanostores';
+import { r as reactExports } from '../../../_virtual/index.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 
 const $search = atom("");
@@ -18,7 +18,7 @@ const $normalizedSearch = computed($search, (search) => {
   return v.length > 1 ? v : "";
 });
 function useNormalizedSearch() {
-  return useDeferredValue(useStore($normalizedSearch));
+  return reactExports.useDeferredValue(useStore($normalizedSearch));
 }
 const [LikeC4SearchContext, useCloseSearch] = createSafeContext("LikeC4Search");
 const $pickView = atom(null);
@@ -45,18 +45,20 @@ function useIsPickViewActive() {
 function useCloseSearchAndNavigateTo() {
   const diagram = useDiagram();
   const close = useCloseSearch();
-  return useCallbackRef((viewId, fromElementFqn) => {
+  return reactExports.useCallback((viewId, fromElementFqn) => {
     close(() => {
       fromElementFqn ??= $pickView.get()?.elementFqn;
       setPickView(null);
       const fromNode = fromElementFqn ? diagram.getContext().view.nodes.find((n) => DiagramNode.modelRef(n) === fromElementFqn)?.id : void 0;
-      if (diagram.currentView.id === viewId && fromNode) {
-        diagram.focusNode(fromNode);
+      if (diagram.currentView.id !== viewId) {
+        diagram.navigateTo(viewId, fromNode);
         return;
       }
-      diagram.navigateTo(viewId, fromNode);
+      if (fromNode) {
+        diagram.focusNode(fromNode);
+      }
     });
-  });
+  }, [close, diagram]);
 }
 
 export { LikeC4SearchContext, setPickView, setSearch, useCloseSearch, useCloseSearchAndNavigateTo, useIsPickViewActive, useNormalizedSearch, usePickView, useSearch, wasResetPickView };

package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Box, Button, Badge, ButtonGroup } from '@mantine/core';
 import { IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerStopFilled, IconPlayerSkipForwardFilled } from '@tabler/icons-react';
 import clsx from 'clsx';
-import { AnimatePresence, m } from 'framer-motion';
+import { AnimatePresence, m } from 'motion/react';
 import { isTruthy, isNonNull } from 'remeda';
 import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
 import { parallelStateFrame, btn, buttons, container } from './DynamicViewWalkthrough.css.js';

package/dist/likec4diagram/useLayoutConstraints.js

@@ -1,7 +1,7 @@
 import { nonNullable } from '@likec4/core';
 import '@xyflow/react';
 import { getNodeDimensions } from '@xyflow/system';
-import { useRef, useMemo } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 import { pipe, filter, hasAtLeast, map } from 'remeda';
 import { useDiagram } from '../hooks/useDiagram.js';
 import { useXYStoreApi } from '../hooks/useXYFlow.js';
@@ -186,8 +186,8 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
 function useLayoutConstraints() {
   const xystore = useXYStoreApi();
   const diagram = useDiagram();
-  const solverRef = useRef(void 0);
-  return useMemo(() => {
+  const solverRef = reactExports.useRef(void 0);
+  return reactExports.useMemo(() => {
     let wasPending = false;
     const initial = { x: 0, y: 0 };
     let moved = false;

package/dist/likec4model/LikeC4ModelContext.js

@@ -1,5 +1,5 @@
-import { createContext } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 
-const LikeC4ModelContext = createContext(null);
+const LikeC4ModelContext = reactExports.createContext(null);
 
 export { LikeC4ModelContext };

package/dist/likec4model/useLikeC4ElementsTree.js

@@ -1,5 +1,5 @@
 import { compareNatural } from '@likec4/core';
-import { useMemo } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 import { useLikeC4Model } from './useLikeC4Model.js';
 
 const sortByLabel = (a, b) => compareNatural(a.label, b.label);
@@ -12,7 +12,7 @@ function buildNode(element) {
 }
 function useLikeC4ElementsTree(viewId) {
   const model = useLikeC4Model(true);
-  return useMemo(() => {
+  return reactExports.useMemo(() => {
     if (viewId) {
       const view = model.view(viewId);
       return [...view.roots()].map(buildNode).sort(sortByLabel);

package/dist/likec4model/useLikeC4Model.js

@@ -1,9 +1,9 @@
-import { useContext } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 import { isString, isNonNullish, isDefined } from 'remeda';
 import { LikeC4ModelContext } from './LikeC4ModelContext.js';
 
 function useLikeC4Model(strict, type) {
-  const model = useContext(LikeC4ModelContext);
+  const model = reactExports.useContext(LikeC4ModelContext);
   if (isString(type) && isNonNullish(model) && model.type !== type) {
     throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.type}" in context`);
   }