likec4 1.32.0 → 1.32.1

package/__app__/src/main.js

@@ -28903,7 +28903,7 @@ function useDebouncedCallback(callback, deps, delay2, maxWait = 0) {
   }, [delay2, maxWait, ...deps]);
 }
 const noop$1 = () => {
-}, isBrowser$1 = typeof globalThis < "u" && typeof navigator < "u" && typeof document < "u", isStrictEqual = (previous, next) => previous === next, basicDepsComparator = (d1, d2) => {
+}, isBrowser$1 = typeof globalThis < "u" && typeof navigator < "u" && typeof document < "u", basicDepsComparator = (d1, d2) => {
   if (d1 === d2)
     return !0;
   if (d1.length !== d2.length)
@@ -29011,12 +29011,6 @@ const useCustomCompareMemo = (factory2, deps, comparator) => {
 function useDeepCompareMemo(factory2, deps) {
   return useCustomCompareMemo(factory2, deps, isEqual);
 }
-function usePreviousDistinct(value, predicate = isStrictEqual) {
-  const [previousState, setPreviousState] = useState(), currentRef = useRef(value);
-  return useUpdateEffect$1(() => {
-    predicate(currentRef.current, value) || (setPreviousState(currentRef.current), currentRef.current = value);
-  }, [value]), previousState;
-}
 function useAsync(asyncFn, initialValue) {
   const [state, setState] = useState({
     status: "not-executed",
@@ -30014,7 +30008,7 @@ const LikeC4ModelContext$1 = createContext(null);
 function useLikeC4Model$1(type) {
   const model = useContext(LikeC4ModelContext$1);
   if (!model)
-    throw new Error("No LikeC4Model found in context");
+    throw new Error("LikeC4Model not found. Make sure you have LikeC4ModelProvider.");
   if (t$3(type) && model.stage !== type)
     throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.stage}" in context`);
   return model;
@@ -43115,7 +43109,7 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_leve
   openDelay = 130,
   ...rest
 }, ref) => {
-  const [opened, setOpened] = useState(openDelay === 0), dialogRef = useRef(null), isClosingRef = useRef(!1), motionNotReduced = useReducedMotionConfig() !== !0, onCloseRef = useRef(onClose);
+  const [opened, setOpened] = useState(openDelay === 0), focusTrapRef = useFocusTrap(opened), dialogRef = useRef(null), isClosingRef = useRef(!1), motionNotReduced = useReducedMotionConfig() !== !0, onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
   const close = useDebouncedCallback(
     () => {
@@ -43137,8 +43131,17 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_leve
   return backdrop?.opacity !== void 0 && (targetBackdropOpacity = `${backdrop.opacity * 100}%`), /* @__PURE__ */ jsx(
     m$3.dialog,
     {
-      ref: useMergedRef(dialogRef, ref),
-      className: cx(RemoveScroll.classNames.fullWidth, classes2?.dialog, className, styles.dialog),
+      ref: useMergedRef(
+        dialogRef,
+        focusTrapRef,
+        ref
+      ),
+      className: cx(
+        classes2?.dialog,
+        className,
+        styles.dialog,
+        fullscreen && RemoveScroll.classNames.fullWidth
+      ),
       layout: !0,
       style: {
         // @ts-ignore
@@ -43194,7 +43197,17 @@ const backdropBlur = "--_blur", backdropOpacity = "--_opacity", level = "--_leve
         e2.stopPropagation(), close();
       },
       ...rest,
-      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: !0, removeScrollBar: !1, children: /* @__PURE__ */ jsx("div", { className: cx(classes2?.body, styles.body, "overlay-body"), children: opened && /* @__PURE__ */ jsx(Fragment$1, { children: children2 }) }) })
+      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: !0, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cx(
+            classes2?.body,
+            styles.body,
+            "overlay-body"
+          ),
+          children: opened && /* @__PURE__ */ jsx(Fragment$1, { children: children2 })
+        }
+      ) })
     }
   );
 });
@@ -44134,7 +44147,7 @@ function Overlays({ overlaysActorRef }) {
 }
 const [SearchActorContext, useSearchActor] = createSafeContext("SearchActorContext"), selectSearchValue = (s2) => s2.context.searchValue;
 function useSearch() {
-  const { searchActorRef } = useSearchActor(), searchValue = xstateReact_cjsExports.useSelector(searchActorRef, selectSearchValue), updateSearch = useCallback((search) => {
+  const searchActorRef = useSearchActor(), searchValue = xstateReact_cjsExports.useSelector(searchActorRef, selectSearchValue), updateSearch = useCallback((search) => {
     searchActorRef.send({ type: "change.search", search });
   }, [searchActorRef]);
   return [searchValue, updateSearch];
@@ -44144,18 +44157,18 @@ const selectNormalizedSearchValue = (s2) => {
   return v.length > 1 ? v : "";
 };
 function useNormalizedSearch() {
-  const { searchActorRef } = useSearchActor();
+  const searchActorRef = useSearchActor();
   return useDeferredValue(xstateReact_cjsExports.useSelector(searchActorRef, selectNormalizedSearchValue));
 }
 function useUpdateSearch() {
-  const { searchActorRef } = useSearchActor();
+  const searchActorRef = useSearchActor();
   return useCallback((search) => {
     searchActorRef.send({ type: "change.search", search });
   }, [searchActorRef]);
 }
 const selectPickViewFor = (s2) => s2.context.pickViewFor;
 function usePickViewFor() {
-  const { searchActorRef } = useSearchActor();
+  const searchActorRef = useSearchActor();
   return xstateReact_cjsExports.useSelector(searchActorRef, selectPickViewFor);
 }
 const buttonFocused = css.raw({
@@ -44367,15 +44380,39 @@ function centerY(element) {
   const rect = element.getBoundingClientRect();
   return rect.y + Math.floor(rect.height / 2);
 }
-function moveFocusToSearchInput() {
-  const input2 = document.getElementById("likec4searchinput");
+function moveFocusToSearchInput(from) {
+  if (!from) {
+    console.error("moveFocusToSearchInput: from is null or undefined");
+    return;
+  }
+  const root2 = from.getRootNode();
+  if (!t$2(root2.querySelector)) {
+    console.error("moveFocusToSearchInput: root.querySelector is not a function");
+    return;
+  }
+  let input2 = root2.querySelector("[data-likec4-search-input]");
   if (input2) {
     const length = input2.value.length;
     input2.focus(), input2.setSelectionRange(length, length);
   }
 }
-function focusToFirstFoundElement() {
-  document.querySelector(`[data-likec4-search] .${focusable}`)?.focus();
+function focusToFirstFoundElement(from) {
+  if (!from) {
+    console.error("focusToFirstFoundElement: from is null or undefined");
+    return;
+  }
+  const root2 = from.getRootNode();
+  if (!t$2(root2.querySelector)) {
+    console.error("focusToFirstFoundElement: root.querySelector is not a function");
+    return;
+  }
+  root2.querySelector(`[data-likec4-search] .${focusable}`)?.focus();
+}
+function queryAllFocusable(from, where, selector3 = `.${focusable}`) {
+  if (!from)
+    return console.error("queryAllFocusable: from is null or undefined"), [];
+  const root2 = from.getRootNode();
+  return t$2(root2.querySelectorAll) ? [...root2.querySelectorAll(`[data-likec4-search-${where}] ${selector3}`)] : (console.error("queryAllFocusable: root.querySelectorAll is not a function"), []);
 }
 const _viewBtn = "likec4-view-btn", viewButton = cx(
   css({
@@ -44402,18 +44439,18 @@ css({
   }
 });
 const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" }), ViewsColumn = memo$2(() => {
+  const ref = useRef(null);
   let views = [...useLikeC4Model$1().views()], search = useNormalizedSearch();
   return search && (search.startsWith("kind:") ? views = [] : views = views.filter((view) => search.startsWith("#") ? view.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1))) : (view.title ?? "" + view.$view.description ?? "").toLocaleLowerCase().includes(search))), /* @__PURE__ */ jsxs(
     Stack,
     {
+      ref,
       renderRoot: (props2) => /* @__PURE__ */ jsx(MotionDiv, { layout: !0, ...props2 }),
       gap: 8,
       "data-likec4-search-views": !0,
       onKeyDown: (e2) => {
         if (e2.key === "ArrowLeft" || e2.key === "ArrowRight") {
-          const maxY = e2.target.getBoundingClientRect().y, elementButtons = [...document.querySelectorAll(
-            "[data-likec4-search-elements] .likec4-focusable"
-          )];
+          const maxY = e2.target.getBoundingClientRect().y, elementButtons = queryAllFocusable(ref.current, "elements", ".likec4-element-button");
           let elementButton = elementButtons.length > 1 ? elementButtons.find((el, i2, all) => centerY(el) > maxY || i2 === all.length - 1) : null;
           elementButton ??= d(elementButtons), elementButton && (e2.stopPropagation(), elementButton.focus());
           return;
@@ -44427,7 +44464,7 @@ const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, child
             "data-likec4-view": !0,
             tabIndex: -1,
             onFocus: (e2) => {
-              e2.stopPropagation(), moveFocusToSearchInput();
+              e2.stopPropagation(), moveFocusToSearchInput(ref.current);
             }
           }
         ) }),
@@ -44444,7 +44481,11 @@ const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, child
   );
 }), btn$2 = buttonsva();
 function ViewButton({ className, view, loop = !1, search, ...props2 }) {
-  const diagram = useDiagram(), currentViewId = useCurrentViewId$1(), isCurrentView = view.id === currentViewId;
+  const searchActorRef = useSearchActor(), diagram = useDiagram(), currentViewId = useCurrentViewId$1(), isCurrentView = view.id === currentViewId, navigate = () => {
+    searchActorRef.send({ type: "close" }), setTimeout(() => {
+      diagram.navigateTo(view.id);
+    }, 100);
+  };
   return /* @__PURE__ */ jsxs(
     UnstyledButton,
     {
@@ -44453,7 +44494,7 @@ function ViewButton({ className, view, loop = !1, search, ...props2 }) {
       "data-likec4-view": view.id,
       ...isCurrentView && { "data-disabled": !0 },
       onClick: (e2) => {
-        e2.stopPropagation(), diagram.navigateTo(view.id);
+        e2.stopPropagation(), navigate();
       },
       onKeyDown: createScopedKeydownHandler({
         siblingSelector: "[data-likec4-view]",
@@ -44462,7 +44503,7 @@ function ViewButton({ className, view, loop = !1, search, ...props2 }) {
         loop,
         orientation: "vertical",
         onKeyDown: (e2) => {
-          e2.nativeEvent.code === "Space" && (e2.stopPropagation(), diagram.navigateTo(view.id));
+          e2.nativeEvent.code === "Space" && (e2.stopPropagation(), navigate());
         }
       }),
       children: [
@@ -44540,15 +44581,13 @@ function ElementsTree({
     const target = e2.target, id2 = target.getAttribute("data-value"), node2 = !!id2 && byid[id2];
     if (node2) {
       if (e2.key === "ArrowUp") {
-        id2 === roots[0]?.value && (stopAndPrevent(e2), moveFocusToSearchInput());
+        id2 === roots[0]?.value && (stopAndPrevent(e2), moveFocusToSearchInput(target));
         return;
       }
       if (e2.key === "ArrowRight") {
         if (node2.children.length > 0 && tree.expandedState[id2] === !1)
           return;
-        const maxY = (e2.target.querySelector(".mantine-Tree-label") ?? target).getBoundingClientRect().y, viewButtons = [...document.querySelectorAll(
-          `[data-likec4-search-views] .${focusable}`
-        )];
+        const maxY = (e2.target.querySelector(".mantine-Tree-label") ?? target).getBoundingClientRect().y, viewButtons = queryAllFocusable(target, "views");
         let view = viewButtons.length > 1 ? viewButtons.find((el, i2, all2) => centerY(el) > maxY || i2 === all2.length - 1) : null;
         view ??= d(viewButtons), view && (stopAndPrevent(e2), view.focus());
         return;
@@ -44655,18 +44694,20 @@ function ElementTreeNode({ node: node2, elementProps, hasChildren, expanded }) {
   ] });
 }
 function useHandleElementSelection() {
-  const diagram = useDiagram(), { searchActorRef } = useSearchActor();
-  return useCallback((element) => {
+  const diagram = useDiagram(), searchActorRef = useSearchActor();
+  return useCallbackRef((element) => {
     const views = [...element.views()];
     if (views.length === 0)
       return;
     const singleView = t$6(views);
     if (singleView) {
-      singleView.id === diagram.currentView.id ? searchActorRef.send({ type: "close" }) : diagram.navigateTo(singleView.id);
+      searchActorRef.send({ type: "close" }), singleView.id !== diagram.currentView.id && setTimeout(() => {
+        diagram.navigateTo(singleView.id);
+      }, 100);
       return;
     }
     searchActorRef.send({ type: "pickview.open", elementFqn: element.id });
-  }, []);
+  });
 }
 const input = css({
   border: "transparent",
@@ -44722,7 +44763,7 @@ css({
   }
 });
 function PickView({ elementFqn }) {
-  const { searchActorRef } = useSearchActor(), element = useLikeC4Model$1().element(elementFqn), scoped = [], others = [];
+  const searchActorRef = useSearchActor(), element = useLikeC4Model$1().element(elementFqn), scoped = [], others = [];
   for (const view of element.views())
     view.viewOf === element ? scoped.push(view) : others.push(view);
   const closePickView = () => {
@@ -44751,7 +44792,7 @@ function PickView({ elementFqn }) {
       },
       "pickview-backdrop"
     ),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsxs(
       MotionDiv,
       {
         initial: {
@@ -44791,7 +44832,7 @@ function PickView({ elementFqn }) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsxs(ScrollAreaAutosize, { mah: "calc(100vh - 8rem - 50px)", type: "never", children: [
+          /* @__PURE__ */ jsxs(ScrollAreaAutosize, { mah: "calc(100vh - 110px)", type: "never", children: [
             scoped.length > 0 && /* @__PURE__ */ jsxs(Stack, { gap: "sm", px: "sm", className: pickviewGroup, children: [
               /* @__PURE__ */ jsx(Title, { order: 6, c: "dimmed", children: "scoped views of the element" }),
               scoped.map((view, i2) => /* @__PURE__ */ jsx(
@@ -44822,14 +44863,15 @@ function PickView({ elementFqn }) {
                 view.id
               ))
             ] })
-          ] }) })
+          ] })
         ]
       },
       "pickview"
-    )
+    ) })
   ] });
 }
 function SearchByTags() {
+  const ref = useRef(null);
   let tags = useLikeC4Model$1().tagsSortedByUsage, setSearch = useUpdateSearch(), search = useNormalizedSearch(), countBefore = tags.length;
   if (search.startsWith("#")) {
     const searchTag = search.slice(1);
@@ -44841,6 +44883,7 @@ function SearchByTags() {
   return /* @__PURE__ */ jsxs(
     HStack,
     {
+      ref,
       css: {
         gap: "md",
         paddingLeft: 48,
@@ -44900,7 +44943,7 @@ function SearchByTags() {
                   }),
                   onClick: (e2) => {
                     e2.stopPropagation(), setSearch(`#${tag}`), setTimeout(() => {
-                      focusToFirstFoundElement();
+                      focusToFirstFoundElement(ref.current);
                     }, 350);
                   }
                 },
@@ -44915,7 +44958,7 @@ function SearchByTags() {
             size: "compact-xs",
             variant: "light",
             onClick: (e2) => {
-              e2.stopPropagation(), setSearch(""), moveFocusToSearchInput();
+              e2.stopPropagation(), setSearch(""), moveFocusToSearchInput(ref.current);
             },
             rightSection: /* @__PURE__ */ jsx(IconX, { size: 14 }),
             children: "Clear"
@@ -44929,9 +44972,7 @@ function startingWithKind(search) {
   return search.match(/^(k|ki|kin|kind|kind:)$/) != null;
 }
 const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
-  const { close, searchActorRef } = useSearchActor(), likec4model = useLikeC4Model$1(), { ref, focused } = useFocusWithin(), [search, setSearch] = useSearch();
-  usePreviousDistinct(search);
-  const combobox = useCombobox({
+  const searchActorRef = useSearchActor(), likec4model = useLikeC4Model$1(), inputRef = useRef(null), { ref, focused } = useFocusWithin(), [search, setSearch] = useSearch(), combobox = useCombobox({
     scrollBehavior: "smooth",
     loop: !1
   });
@@ -44939,7 +44980,7 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
     "keydown",
     (event) => {
       try {
-        !focused && (event.key === "Backspace" || event.key.startsWith("Arrow") || event.key.match(/^\p{L}$/u)) && moveFocusToSearchInput();
+        !focused && (event.key === "Backspace" || event.key.startsWith("Arrow") || event.key.match(/^\p{L}$/u)) && moveFocusToSearchInput(inputRef.current);
       } catch (e2) {
         console.warn(e2);
       }
@@ -44958,24 +44999,24 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
     // }
     case search.startsWith("#"): {
       const searchTag = search.toLocaleLowerCase().slice(1), alloptions = likec4model.tags.filter((tag) => tag.toLocaleLowerCase().includes(searchTag));
-      isExactMatch = t$6(alloptions)?.toLocaleLowerCase() === searchTag, alloptions.length === 0 ? options = [
+      alloptions.length === 0 ? (isExactMatch = !1, options = [
         /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No tags found" }, "empty-tags")
-      ] : options = alloptions.map((tag) => /* @__PURE__ */ jsxs(ComboboxOption, { value: `#${tag}`, children: [
+      ]) : (isExactMatch = likec4model.tags.some((tag) => tag.toLocaleLowerCase() === searchTag), 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));
+      ] }, tag)));
       break;
     }
     case search.startsWith("kind:"):
     case startingWithKind(search): {
       const term = search.length > 5 ? search.slice(5).toLocaleLowerCase() : "";
       let alloptions = t$4(likec4model.specification.elements);
-      term && (alloptions = alloptions.filter((kind) => kind.toLocaleLowerCase().includes(term)), isExactMatch = t$6(alloptions)?.toLocaleLowerCase() === term), alloptions.length === 0 ? options = [
+      term && (alloptions = alloptions.filter((kind) => kind.toLocaleLowerCase().includes(term))), alloptions.length === 0 ? (isExactMatch = !1, options = [
         /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No kinds found" }, "empty-kinds")
-      ] : options = alloptions.map((kind) => /* @__PURE__ */ jsxs(ComboboxOption, { value: `kind:${kind}`, children: [
+      ]) : (isExactMatch = alloptions.some((kind) => kind.toLocaleLowerCase() === term), 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));
+      ] }, kind)));
       break;
     }
   }
@@ -44984,7 +45025,7 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
     {
       onOptionSubmit: (optionValue) => {
         setSearch(optionValue), combobox.resetSelectedOption(), SEARCH_PREFIXES.includes(optionValue) || (combobox.closeDropdown(), setTimeout(() => {
-          focusToFirstFoundElement();
+          focusToFirstFoundElement(inputRef.current);
         }, 350));
       },
       width: "max-content",
@@ -45000,10 +45041,11 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
         /* @__PURE__ */ jsx(ComboboxTarget, { children: /* @__PURE__ */ jsx(
           Input,
           {
-            ref,
-            id: "likec4searchinput",
+            ref: useMergedRef(inputRef, ref),
             placeholder: "Search by title, description or start with # or kind:",
             autoFocus: !0,
+            "data-autofocus": !0,
+            "data-likec4-search-input": !0,
             tabIndex: 0,
             classNames: {
               input
@@ -45017,7 +45059,7 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
                 onClick: (e2) => {
                   e2.stopPropagation();
                   const openedWithSearch = searchActorRef.getSnapshot().context.openedWithSearch;
-                  search === "" || search === openedWithSearch ? close() : setSearch("");
+                  search === "" || search === openedWithSearch ? searchActorRef.send({ type: "close" }) : setSearch("");
                 }
               }
             ),
@@ -45058,7 +45100,7 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
               }
               if (e2.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(e2), focusToFirstFoundElement();
+                combobox.closeDropdown(), stopAndPrevent(e2), focusToFirstFoundElement(inputRef.current);
                 return;
               }
             }
@@ -45102,15 +45144,12 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
   //   _dark: `[rgb(34 34 34 / 0.95)]`,
   //   _light: `[rgb(255 255 255/ 0.95)]`,
   // },
-}), selectIsOpened = (s2) => !s2.matches("inactive"), Search = memo$2(({ searchActorRef }) => {
+}), selectIsOpened = (s2) => !s2.matches("inactive");
+function Search({ searchActorRef }) {
   const isOpened = xstateReact_cjsExports.useSelector(searchActorRef, selectIsOpened), openSearch = () => {
     searchActorRef.send({ type: "open" });
-  }, sendClose = () => {
+  }, close = useCallbackRef(() => {
     searchActorRef.send({ type: "close" });
-  }, afterCloseCbRef = useRef(null), close = useCallbackRef((cb) => {
-    afterCloseCbRef.current = cb ?? null, sendClose();
-  }), onExitComplete = useCallbackRef(() => {
-    afterCloseCbRef.current && (afterCloseCbRef.current(), afterCloseCbRef.current = null);
   });
   return useHotkeys([
     ["mod+k", openSearch, {
@@ -45119,34 +45158,26 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
     ["mod+f", openSearch, {
       preventDefault: !0
     }]
-  ]), /* @__PURE__ */ jsx(
-    SearchActorContext,
+  ]), /* @__PURE__ */ jsx(SearchActorContext, { value: searchActorRef, children: /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(reactErrorBoundary_cjsExports.ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: close, children: /* @__PURE__ */ jsx(AnimatePresence, { children: isOpened && /* @__PURE__ */ jsx(
+    Overlay,
     {
-      value: {
-        searchActorRef,
-        close
+      fullscreen: !0,
+      withBackdrop: !1,
+      backdrop: {
+        opacity: 0.9
       },
-      children: /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(reactErrorBoundary_cjsExports.ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: sendClose, children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete, children: isOpened && /* @__PURE__ */ jsx(
-        Overlay,
-        {
-          fullscreen: !0,
-          withBackdrop: !1,
-          backdrop: {
-            opacity: 0.9
-          },
-          classes: {
-            dialog,
-            body
-          },
-          openDelay: 0,
-          onClose: close,
-          "data-likec4-search": "true",
-          children: /* @__PURE__ */ jsx(SearchOverlay, { close, searchActorRef })
-        }
-      ) }) }) }) })
+      classes: {
+        dialog,
+        body
+      },
+      openDelay: 0,
+      onClose: close,
+      "data-likec4-search": "true",
+      children: /* @__PURE__ */ jsx(SearchOverlay, { searchActorRef })
     }
-  );
-}), scrollArea = css({
+  ) }) }) }) });
+}
+const scrollArea = css({
   height: [
     "100%",
     "100cqh"
@@ -45158,18 +45189,18 @@ const SEARCH_PREFIXES = ["#", "kind:"], LikeC4SearchInput = memo$2(() => {
       height: "100%"
     }
   }
-}), SearchOverlay = ({ close, searchActorRef }) => {
-  const pickViewFor = usePickViewFor();
+}), SearchOverlay = ({ searchActorRef }) => {
+  const ref = useRef(null), pickViewFor = usePickViewFor();
   return useTimeoutEffect(() => {
-    n$5(searchActorRef.getSnapshot().context.openedWithSearch) && focusToFirstFoundElement();
-  }, 150), /* @__PURE__ */ jsxs(FocusTrap, { children: [
+    n$5(searchActorRef.getSnapshot().context.openedWithSearch) && focusToFirstFoundElement(ref.current);
+  }, 150), /* @__PURE__ */ jsxs(Box, { ref, display: "contents", children: [
     /* @__PURE__ */ jsx(
       Group,
       {
         className: "group",
         wrap: "nowrap",
         onClick: (e2) => {
-          e2.stopPropagation(), moveFocusToSearchInput();
+          e2.stopPropagation(), moveFocusToSearchInput(ref.current);
         },
         children: /* @__PURE__ */ jsxs(VStack, { flex: 1, px: "sm", children: [
           /* @__PURE__ */ jsx(LikeC4SearchInput, {}),
@@ -46695,12 +46726,12 @@ function LikeC4DiagramXYFlow({
     onCanvasDblClick
   } = useDiagramEventHandlers(), notReadOnly = !enableReadOnly, isReducedGraphics = useIsReducedGraphics(), layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
     $isPanning.set(!0);
-  }, isReducedGraphics ? 100 : 200), notPanning = useDebouncedCallback$1(() => {
+  }, isReducedGraphics ? 120 : 200), notPanning = useDebouncedCallback$1(() => {
     isPanning.clear(), $isPanning.get() && $isPanning.set(!1);
-  }, 200), onMove = useCallbackRef((event) => {
+  }, isReducedGraphics ? 350 : 200), onMove = useCallbackRef((event) => {
     event && ($isPanning.get() || isPanning.start(), notPanning());
   }), onMoveEnd = useCallbackRef((event, viewport) => {
-    event && notPanning.flush(), diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
+    event && !isReducedGraphics && notPanning.flush(), diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
   }), onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });
   }), nodeTypes2 = useCustomCompareMemo(
@@ -49625,12 +49656,14 @@ const _diagramMachine = xstate_cjsExports.setup({
         "closeAllOverlays",
         "closeSearch",
         "stopSyncLayout",
-        {
-          type: "trigger:NavigateTo",
-          params: ({ context: context2 }) => ({
-            viewId: nonNullable(context2.lastOnNavigate, "Invalid state, lastOnNavigate is null").toView
-          })
-        }
+        xstate_cjsExports.enqueueActions(({ enqueue, context: context2 }) => {
+          enqueue({
+            type: "trigger:NavigateTo",
+            params: {
+              viewId: nonNullable(context2.lastOnNavigate, "Invalid state, lastOnNavigate is null").toView
+            }
+          });
+        })
       ],
       on: {
         "update.view": {
@@ -49772,7 +49805,7 @@ function DiagramActorProvider({
       "trigger:NavigateTo": (_, { viewId }) => {
         setTimeout(() => {
           handlersRef.current.onNavigateTo?.(viewId);
-        }, 30);
+        }, 40);
       },
       "trigger:OnChange": (_, params) => {
         handlersRef.current.onChange?.(params);
@@ -49843,7 +49876,7 @@ function LikeC4Diagram({
   pannable = !0,
   zoomable = !0,
   background = "dots",
-  enableElementTags = !0,
+  enableElementTags = !1,
   enableFocusMode = !1,
   enableElementDetails = !1,
   enableRelationshipDetails = enableElementDetails,
@@ -50353,7 +50386,16 @@ function useDiagramsTreeData(groupBy = "by-files") {
 }
 const isFile = (node2) => isTreeNodeData(node2) && node2.type === "file", FolderIcon = ({ node: node2, expanded }) => isFile(node2) ? /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", color: "indigo", children: /* @__PURE__ */ jsx(IconFileCode, { size: 16 }) }) : /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", color: "violet", children: expanded ? /* @__PURE__ */ jsx(IconFolderOpen, { size: 16 }) : /* @__PURE__ */ jsx(IconFolderFilled, { size: 16 }) }), setHoveredNode = () => {
 }, DiagramsTree = /* @__PURE__ */ memo$2(({ groupBy }) => {
-  const data = useDiagramsTreeData(groupBy), router = useRouter(), diagram = useCurrentDiagram(), viewId = diagram?.id ?? null, tree = useTree({
+  const views = useLikeC4Views(), data = useDiagramsTreeData(groupBy), navigate = useNavigate(), navigateTo = (viewId2) => {
+    navigate({
+      to: "./",
+      viewTransition: !1,
+      params: (p2) => ({
+        ...p2,
+        viewId: viewId2
+      })
+    });
+  }, diagram = useCurrentDiagram(), viewId = diagram?.id ?? null, tree = useTree({
     multiple: !1
   });
   tree.setHoveredNode = setHoveredNode;
@@ -50371,7 +50413,7 @@ const isFile = (node2) => isTreeNodeData(node2) && node2.type === "file", Folder
     viewId && tree.select(viewId);
   }, [viewId]);
   const theme2 = useComputedColorScheme();
-  return /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
     Tree,
     {
       allowRangeSelection: !1,
@@ -50384,7 +50426,7 @@ const isFile = (node2) => isTreeNodeData(node2) && node2.type === "file", Folder
         }
       },
       levelOffset: "md",
-      renderNode: ({ node: node2, selected: selected2, expanded, elementProps, hasChildren }) => /* @__PURE__ */ jsx(DiagramPreviewHoverCard, { viewId: hasChildren ? null : node2.value, ...elementProps, children: /* @__PURE__ */ jsx(
+      renderNode: ({ node: node2, selected: selected2, expanded, elementProps, hasChildren }) => /* @__PURE__ */ jsx(DiagramPreviewHoverCard, { diagram: hasChildren ? void 0 : views.find((v) => v.id === node2.value), children: /* @__PURE__ */ jsx(
         Button,
         {
           fullWidth: !0,
@@ -50407,16 +50449,10 @@ const isFile = (node2) => isTreeNodeData(node2) && node2.type === "file", Folder
             ] }),
             hasChildren && /* @__PURE__ */ jsx(FolderIcon, { node: node2, expanded })
           ] }),
+          ...elementProps,
           ...!hasChildren && {
             onClick: (e2) => {
-              e2.stopPropagation(), router.buildAndCommitLocation({
-                to: ".",
-                viewTransition: !1,
-                params: (p2) => ({
-                  ...p2,
-                  viewId: node2.value
-                })
-              });
+              e2.stopPropagation(), navigateTo(node2.value);
             }
           },
           children: node2.label
@@ -50424,20 +50460,15 @@ const isFile = (node2) => isTreeNodeData(node2) && node2.type === "file", Folder
       ) })
     }
   ) });
-});
-function DiagramPreviewHoverCard({
-  viewId,
-  children: children2,
-  onClick,
-  ...props2
-}) {
-  const diagram = useLikeC4Views().find((v) => v.id === viewId), ratio = diagram ? Math.max(diagram.bounds.width / 400, diagram.bounds.height / 300) : 1, width = diagram ? Math.round(diagram.bounds.width / ratio) : 0, height = diagram ? Math.round(diagram.bounds.height / ratio) : 0;
-  return /* @__PURE__ */ jsxs(Box$1, { ...props2, children: [
+}, (prev, next) => prev.groupBy === next.groupBy);
+function DiagramPreviewHoverCard({ diagram, children: children2 }) {
+  const ratio = diagram ? Math.max(diagram.bounds.width / 400, diagram.bounds.height / 300) : 1, width = diagram ? Math.round(diagram.bounds.width / ratio) : 0, height = diagram ? Math.round(diagram.bounds.height / ratio) : 0;
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     diagram && /* @__PURE__ */ jsxs(HoverCard, { position: "right-start", openDelay: 400, closeDelay: 100, keepMounted: !1, shadow: "lg", children: [
       /* @__PURE__ */ jsx(HoverCardTarget, { children: children2 }),
-      /* @__PURE__ */ jsx(HoverCardDropdown, { style: { width, height }, p: "xs", onClick, children: /* @__PURE__ */ jsx(DiagramPreview, { diagram }) })
+      /* @__PURE__ */ jsx(HoverCardDropdown, { style: { width, height }, p: "xs", children: /* @__PURE__ */ jsx(DiagramPreview, { diagram }) })
     ] }),
-    !diagram && /* @__PURE__ */ jsx(Fragment$1, { children: children2 })
+    !diagram && children2
   ] });
 }
 const DiagramPreview = memo$2(({ diagram }) => {
@@ -51484,6 +51515,7 @@ function ViewReact() {
       enableElementDetails: !0,
       enableRelationshipDetails: !0,
       enableRelationshipBrowser: !0,
+      enableElementTags: !0,
       experimentalEdgeEditing: !1,
       showNotations: hasNotations,
       nodesDraggable: !1,
@@ -53231,6 +53263,7 @@ function ViewEditor() {
       enableElementDetails: !0,
       enableRelationshipDetails: !0,
       enableRelationshipBrowser: !0,
+      enableElementTags: !0,
       onNavigateTo,
       onChange: (e2) => console.log(e2),
       onBurgerMenuClick: withOverviewGraph ? () => {

package/dist/cli/index.d.mts

@@ -1 +1,2 @@
 
+import '@likec4/core/builder';