likec4 1.32.0 → 1.32.2

package/__app__/src/main.js

@@ -1300,8 +1300,8 @@ function useHover$1() {
     [handleMouseEnter, handleMouseLeave]
   ), hovered };
 }
-function useDisclosure(initialState = !1, options = {}) {
-  const [opened, setOpened] = useState(initialState), open = useCallback(() => {
+function useDisclosure(initialState2 = !1, options = {}) {
+  const [opened, setOpened] = useState(initialState2), open = useCallback(() => {
     setOpened((isOpened) => isOpened || (options.onOpen?.(), !0));
   }, [options.onOpen]), close = useCallback(() => {
     setOpened((isOpened) => isOpened && (options.onClose?.(), !1));
@@ -12646,7 +12646,7 @@ const defaultProps$8 = {
     styles,
     unstyled,
     vars,
-    initialState,
+    initialState: initialState2,
     maxHeight,
     hideLabel,
     showLabel,
@@ -12670,7 +12670,7 @@ const defaultProps$8 = {
     varsResolver: varsResolver$5
   }), _id = useId$2(id2), regionId = `${_id}-region`, [show, setShowState] = useUncontrolled({
     value: expanded,
-    defaultValue: initialState,
+    defaultValue: initialState2,
     finalValue: !1,
     onChange: onExpandedChange
   }), { ref: contentRef, height } = useElementSize(), spoilerMoreContent = show ? hideLabel : showLabel, spoiler = spoilerMoreContent !== null && maxHeight < height;
@@ -13255,14 +13255,14 @@ function isNodeIndeterminate(value, data, checkedState) {
   return checkedState.length === 0 ? !1 : getAllCheckedNodes(data, checkedState).result.some((node2) => node2.value === value && node2.indeterminate);
 }
 const memoizedIsNodeIndeterminate = memoize(isNodeIndeterminate);
-function getInitialTreeExpandedState(initialState, data, value, acc = {}) {
+function getInitialTreeExpandedState(initialState2, data, value, acc = {}) {
   return data.forEach((node2) => {
-    acc[node2.value] = node2.value in initialState ? initialState[node2.value] : node2.value === value, Array.isArray(node2.children) && getInitialTreeExpandedState(initialState, node2.children, value, acc);
+    acc[node2.value] = node2.value in initialState2 ? initialState2[node2.value] : node2.value === value, Array.isArray(node2.children) && getInitialTreeExpandedState(initialState2, node2.children, value, acc);
   }), acc;
 }
-function getInitialCheckedState(initialState, data) {
+function getInitialCheckedState(initialState2, data) {
   const acc = [];
-  return initialState.forEach((node2) => acc.push(...getChildrenNodesValues(node2, data))), Array.from(new Set(acc));
+  return initialState2.forEach((node2) => acc.push(...getChildrenNodesValues(node2, data))), Array.from(new Set(acc));
 }
 function useTree({
   initialSelectedState = [],
@@ -13542,7 +13542,7 @@ function batch(fn) {
   }
 }
 class Store {
-  constructor(initialState, options) {
+  constructor(initialState2, options) {
     this.listeners = /* @__PURE__ */ new Set(), this.subscribe = (listener) => {
       var _a, _b;
       this.listeners.add(listener);
@@ -13553,7 +13553,7 @@ class Store {
     }, this.setState = (updater) => {
       var _a, _b, _c;
       this.prevState = this.state, this.state = (_a = this.options) != null && _a.updateFn ? this.options.updateFn(this.prevState)(updater) : updater(this.prevState), (_c = (_b = this.options) == null ? void 0 : _b.onUpdate) == null || _c.call(_b), __flush(this);
-    }, this.prevState = initialState, this.state = initialState, this.options = options;
+    }, this.prevState = initialState2, this.state = initialState2, this.options = options;
   }
 }
 class Derived {
@@ -26595,11 +26595,11 @@ const __vite_import_meta_env__ = {}, createStoreImpl = (createState2) => {
       const previousState = state;
       state = replace ?? (typeof nextState != "object" || nextState === null) ? nextState : Object.assign({}, state, nextState), listeners.forEach((listener) => listener(state, previousState));
     }
-  }, getState = () => state, api = { setState, getState, getInitialState: () => initialState, subscribe: (listener) => (listeners.add(listener), () => listeners.delete(listener)), destroy: () => {
+  }, getState = () => state, api = { setState, getState, getInitialState: () => initialState2, subscribe: (listener) => (listeners.add(listener), () => listeners.delete(listener)), destroy: () => {
     (__vite_import_meta_env__ ? "production" : void 0) !== "production" && console.warn(
       "[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected."
     ), listeners.clear();
-  } }, initialState = state = createState2(setState, getState, api);
+  } }, initialState2 = state = createState2(setState, getState, api);
   return api;
 }, createStore$1 = (createState2) => createState2 ? createStoreImpl(createState2) : createStoreImpl, { useDebugValue } = React__default, { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports, identity = (arg) => arg;
 function useStoreWithEqualityFn(api, selector3 = identity, equalityFn) {
@@ -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;
@@ -32472,8 +32466,8 @@ ${err.message}`);
   }
   function getInitialStateNodesWithTheirAncestors(stateNode) {
     const states = getInitialStateNodes(stateNode);
-    for (const initialState of states)
-      for (const ancestor of getProperAncestors(initialState, stateNode))
+    for (const initialState2 of states)
+      for (const ancestor of getProperAncestors(initialState2, stateNode))
         states.add(ancestor);
     return states;
   }
@@ -32737,8 +32731,8 @@ ${err.message}`);
           addProperAncestorStatesToEnter(s2, stateNode.parent, statesToEnter, historyValue, statesForDefaultEntry);
       }
     else if (stateNode.type === "compound") {
-      const [initialState] = stateNode.initial.target;
-      isHistoryNode(initialState) || (statesToEnter.add(initialState), statesForDefaultEntry.add(initialState)), addDescendantStatesToEnter(initialState, historyValue, statesForDefaultEntry, statesToEnter), addProperAncestorStatesToEnter(initialState, stateNode, statesToEnter, historyValue, statesForDefaultEntry);
+      const [initialState2] = stateNode.initial.target;
+      isHistoryNode(initialState2) || (statesToEnter.add(initialState2), statesForDefaultEntry.add(initialState2)), addDescendantStatesToEnter(initialState2, historyValue, statesForDefaultEntry, statesToEnter), addProperAncestorStatesToEnter(initialState2, stateNode, statesToEnter, historyValue, statesForDefaultEntry);
     } else if (stateNode.type === "parallel")
       for (const child of getChildren2(stateNode).filter((sn) => !isHistoryNode(sn)))
         [...statesToEnter].some((s2) => isDescendant(s2, child)) || (isHistoryNode(child) || (statesToEnter.add(child), statesForDefaultEntry.add(child)), addDescendantStatesToEnter(child, historyValue, statesForDefaultEntry, statesToEnter));
@@ -38385,131 +38379,90 @@ const select = (s2) => s2.children.search ?? null;
 function useSearchActorRef() {
   return useDiagramActorSnapshot(select, Object.is);
 }
-var reactErrorBoundary_cjs = {}, hasRequiredReactErrorBoundary_cjs;
-function requireReactErrorBoundary_cjs() {
-  if (hasRequiredReactErrorBoundary_cjs) return reactErrorBoundary_cjs;
-  hasRequiredReactErrorBoundary_cjs = 1, Object.defineProperty(reactErrorBoundary_cjs, "__esModule", { value: !0 });
-  var react = React__default;
-  const ErrorBoundaryContext = react.createContext(null), initialState = {
-    didCatch: !1,
-    error: null
-  };
-  class ErrorBoundary extends react.Component {
-    constructor(props2) {
-      super(props2), this.resetErrorBoundary = this.resetErrorBoundary.bind(this), this.state = initialState;
+const ErrorBoundaryContext = createContext(null), initialState = {
+  didCatch: !1,
+  error: null
+};
+class ErrorBoundary extends Component {
+  constructor(props2) {
+    super(props2), this.resetErrorBoundary = this.resetErrorBoundary.bind(this), this.state = initialState;
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      didCatch: !0,
+      error
+    };
+  }
+  resetErrorBoundary() {
+    const {
+      error
+    } = this.state;
+    if (error !== null) {
+      for (var _this$props$onReset, _this$props, _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++)
+        args[_key] = arguments[_key];
+      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 || _this$props$onReset.call(_this$props, {
+        args,
+        reason: "imperative-api"
+      }), this.setState(initialState);
     }
-    static getDerivedStateFromError(error) {
-      return {
-        didCatch: !0,
-        error
+  }
+  componentDidCatch(error, info) {
+    var _this$props$onError, _this$props2;
+    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 || _this$props$onError.call(_this$props2, error, info);
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      didCatch
+    } = this.state, {
+      resetKeys
+    } = this.props;
+    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
+      var _this$props$onReset2, _this$props3;
+      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 || _this$props$onReset2.call(_this$props3, {
+        next: resetKeys,
+        prev: prevProps.resetKeys,
+        reason: "keys"
+      }), this.setState(initialState);
+    }
+  }
+  render() {
+    const {
+      children: children2,
+      fallbackRender,
+      FallbackComponent,
+      fallback
+    } = this.props, {
+      didCatch,
+      error
+    } = this.state;
+    let childToRender = children2;
+    if (didCatch) {
+      const props2 = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
       };
+      if (typeof fallbackRender == "function")
+        childToRender = fallbackRender(props2);
+      else if (FallbackComponent)
+        childToRender = createElement(FallbackComponent, props2);
+      else if (fallback !== void 0)
+        childToRender = fallback;
+      else
+        throw error;
     }
-    resetErrorBoundary() {
-      const {
-        error
-      } = this.state;
-      if (error !== null) {
-        for (var _this$props$onReset, _this$props, _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++)
-          args[_key] = arguments[_key];
-        (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 || _this$props$onReset.call(_this$props, {
-          args,
-          reason: "imperative-api"
-        }), this.setState(initialState);
-      }
-    }
-    componentDidCatch(error, info) {
-      var _this$props$onError, _this$props2;
-      (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 || _this$props$onError.call(_this$props2, error, info);
-    }
-    componentDidUpdate(prevProps, prevState) {
-      const {
-        didCatch
-      } = this.state, {
-        resetKeys
-      } = this.props;
-      if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
-        var _this$props$onReset2, _this$props3;
-        (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 || _this$props$onReset2.call(_this$props3, {
-          next: resetKeys,
-          prev: prevProps.resetKeys,
-          reason: "keys"
-        }), this.setState(initialState);
-      }
-    }
-    render() {
-      const {
-        children: children2,
-        fallbackRender,
-        FallbackComponent,
-        fallback
-      } = this.props, {
+    return createElement(ErrorBoundaryContext.Provider, {
+      value: {
         didCatch,
-        error
-      } = this.state;
-      let childToRender = children2;
-      if (didCatch) {
-        const props2 = {
-          error,
-          resetErrorBoundary: this.resetErrorBoundary
-        };
-        if (typeof fallbackRender == "function")
-          childToRender = fallbackRender(props2);
-        else if (FallbackComponent)
-          childToRender = react.createElement(FallbackComponent, props2);
-        else if (fallback !== void 0)
-          childToRender = fallback;
-        else
-          throw error;
-      }
-      return react.createElement(ErrorBoundaryContext.Provider, {
-        value: {
-          didCatch,
-          error,
-          resetErrorBoundary: this.resetErrorBoundary
-        }
-      }, childToRender);
-    }
-  }
-  function hasArrayChanged() {
-    let a2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], b2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
-    return a2.length !== b2.length || a2.some((item, index2) => !Object.is(item, b2[index2]));
-  }
-  function assertErrorBoundaryContext(value) {
-    if (value == null || typeof value.didCatch != "boolean" || typeof value.resetErrorBoundary != "function")
-      throw new Error("ErrorBoundaryContext not found");
-  }
-  function useErrorBoundary() {
-    const context2 = react.useContext(ErrorBoundaryContext);
-    assertErrorBoundaryContext(context2);
-    const [state, setState] = react.useState({
-      error: null,
-      hasError: !1
-    }), memoized = react.useMemo(() => ({
-      resetBoundary: () => {
-        context2.resetErrorBoundary(), setState({
-          error: null,
-          hasError: !1
-        });
-      },
-      showBoundary: (error) => setState({
         error,
-        hasError: !0
-      })
-    }), [context2.resetErrorBoundary]);
-    if (state.hasError)
-      throw state.error;
-    return memoized;
-  }
-  function withErrorBoundary(component, errorBoundaryProps) {
-    const Wrapped = react.forwardRef((props2, ref) => react.createElement(ErrorBoundary, errorBoundaryProps, react.createElement(component, {
-      ...props2,
-      ref
-    }))), name = component.displayName || component.name || "Unknown";
-    return Wrapped.displayName = "withErrorBoundary(".concat(name, ")"), Wrapped;
+        resetErrorBoundary: this.resetErrorBoundary
+      }
+    }, childToRender);
   }
-  return reactErrorBoundary_cjs.ErrorBoundary = ErrorBoundary, reactErrorBoundary_cjs.ErrorBoundaryContext = ErrorBoundaryContext, reactErrorBoundary_cjs.useErrorBoundary = useErrorBoundary, reactErrorBoundary_cjs.withErrorBoundary = withErrorBoundary, reactErrorBoundary_cjs;
 }
-var reactErrorBoundary_cjsExports = /* @__PURE__ */ requireReactErrorBoundary_cjs();
+function hasArrayChanged() {
+  let a2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], b2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
+  return a2.length !== b2.length || a2.some((item, index2) => !Object.is(item, b2[index2]));
+}
 function ErrorFallback({ error, resetErrorBoundary }) {
   const errorString = error instanceof Error ? error.message : "Unknown error";
   return /* @__PURE__ */ jsx(Box, { pos: "fixed", top: 0, left: 0, w: "100%", p: 0, style: { zIndex: 1e3 }, children: /* @__PURE__ */ jsxs(
@@ -43115,7 +43068,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 +43090,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 +43156,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 })
+        }
+      ) })
     }
   );
 });
@@ -44130,11 +44102,11 @@ function Overlays({ overlaysActorRef }) {
         nonexhaustive(overlay2);
     }
   });
-  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(reactErrorBoundary_cjsExports.ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: () => overlaysActorRef.send({ type: "close.all" }), children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: overlaysReact }) }) }) });
+  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: () => overlaysActorRef.send({ type: "close.all" }), children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: overlaysReact }) }) }) });
 }
 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 +44116,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 +44339,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 +44398,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 +44423,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 +44440,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 +44453,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 +44462,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 +44540,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 +44653,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 +44722,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 +44751,7 @@ function PickView({ elementFqn }) {
       },
       "pickview-backdrop"
     ),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsxs(
       MotionDiv,
       {
         initial: {
@@ -44791,7 +44791,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 +44822,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 +44842,7 @@ function SearchByTags() {
   return /* @__PURE__ */ jsxs(
     HStack,
     {
+      ref,
       css: {
         gap: "md",
         paddingLeft: 48,
@@ -44900,7 +44902,7 @@ function SearchByTags() {
                   }),
                   onClick: (e2) => {
                     e2.stopPropagation(), setSearch(`#${tag}`), setTimeout(() => {
-                      focusToFirstFoundElement();
+                      focusToFirstFoundElement(ref.current);
                     }, 350);
                   }
                 },
@@ -44915,7 +44917,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 +44931,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 +44939,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 +44958,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 +44984,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 +45000,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 +45018,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 +45059,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 +45103,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 +45117,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(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 +45148,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 +46685,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 +49615,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 +49764,7 @@ function DiagramActorProvider({
       "trigger:NavigateTo": (_, { viewId }) => {
         setTimeout(() => {
           handlersRef.current.onNavigateTo?.(viewId);
-        }, 30);
+        }, 40);
       },
       "trigger:OnChange": (_, params) => {
         handlersRef.current.onChange?.(params);
@@ -49843,7 +49835,7 @@ function LikeC4Diagram({
   pannable = !0,
   zoomable = !0,
   background = "dots",
-  enableElementTags = !0,
+  enableElementTags = !1,
   enableFocusMode = !1,
   enableElementDetails = !1,
   enableRelationshipDetails = enableElementDetails,
@@ -50068,7 +50060,7 @@ const cssWebcomponentView = css({
   component: RouteComponent$2
 });
 function RouteComponent$2() {
-  return /* @__PURE__ */ jsx(Box$1, { className: cssViewOutlet, children: /* @__PURE__ */ jsx(reactErrorBoundary_cjsExports.ErrorBoundary, { FallbackComponent: Fallback$1, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box$1, { className: cssViewOutlet, children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback$1, children: /* @__PURE__ */ jsx(
     LikeC4ModelContext,
     {
       likec4data: $likec4data,
@@ -50191,7 +50183,7 @@ const Route$h = createFileRoute("/project/$projectId")({
 });
 function RouteComponent() {
   const { $likec4data: $likec4data2, $likec4model: $likec4model2, IconRenderer: IconRenderer2 } = Route$h.useLoaderData();
-  return /* @__PURE__ */ jsx(Box$1, { className: cssViewOutlet, children: /* @__PURE__ */ jsx(reactErrorBoundary_cjsExports.ErrorBoundary, { FallbackComponent: Fallback$1, children: /* @__PURE__ */ jsx(LikeC4ModelContext, { likec4data: $likec4data2, likec4model: $likec4model2, children: /* @__PURE__ */ jsx(IconRendererProvider, { value: IconRenderer2, children: /* @__PURE__ */ jsx(Outlet, {}) }) }) }) });
+  return /* @__PURE__ */ jsx(Box$1, { className: cssViewOutlet, children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback$1, children: /* @__PURE__ */ jsx(LikeC4ModelContext, { likec4data: $likec4data2, likec4model: $likec4model2, children: /* @__PURE__ */ jsx(IconRendererProvider, { value: IconRenderer2, children: /* @__PURE__ */ jsx(Outlet, {}) }) }) }) });
 }
 const Route$g = createFileRoute("/project/$projectId/")({
   component: () => {
@@ -50353,7 +50345,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 +50372,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 +50385,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 +50408,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 +50419,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 +51474,7 @@ function ViewReact() {
       enableElementDetails: !0,
       enableRelationshipDetails: !0,
       enableRelationshipBrowser: !0,
+      enableElementTags: !0,
       experimentalEdgeEditing: !1,
       showNotations: hasNotations,
       nodesDraggable: !1,
@@ -53231,6 +53222,7 @@ function ViewEditor() {
       enableElementDetails: !0,
       enableRelationshipDetails: !0,
       enableRelationshipBrowser: !0,
+      enableElementTags: !0,
       onNavigateTo,
       onChange: (e2) => console.log(e2),
       onBurgerMenuClick: withOverviewGraph ? () => {