@likec4/diagram 1.32.0 → 1.32.2

package/dist/LikeC4Diagram.js

@@ -33,7 +33,7 @@ function LikeC4Diagram({
   pannable = true,
   zoomable = true,
   background = "dots",
-  enableElementTags = true,
+  enableElementTags = false,
   enableFocusMode = false,
   enableElementDetails = false,
   enableRelationshipDetails = enableElementDetails,

package/dist/LikeC4Diagram.props.d.ts

@@ -73,7 +73,15 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
      * @default false if readonly
      */
     nodesDraggable?: boolean | undefined;
+    /**
+     * Initial width of the diagram
+     * (supposed to be used during SSR)
+     */
     initialWidth?: number | undefined;
+    /**
+     * Initial height of the diagram
+     * (supposed to be used during SSR)
+     */
     initialHeight?: number | undefined;
     /**
      * Background pattern
@@ -91,7 +99,9 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
      */
     showNavigationButtons?: undefined | boolean;
     /**
-     * Display notations of the view
+     * Display notations in the bottom right corner
+     * (Active if only notations are present)
+     *
      * @default true
      */
     showNotations?: boolean | undefined;
@@ -128,7 +138,7 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
     enableDynamicViewWalkthrough?: boolean | undefined;
     /**
      * Display element tags in the bottom left corner
-     * @default true
+     * @default false
      */
     enableElementTags?: boolean | undefined;
     /**
@@ -138,8 +148,9 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
     experimentalEdgeEditing?: boolean | undefined;
     /**
      * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
+     * Enable it if you have a large or static view
      *
-     * @default 'auto' - will be set to true if view has more then 3000 * 2000 pixels
+     * @default 'auto' - will be `true` if view has more then 3000 * 2000 pixels
      */
     reduceGraphics?: 'auto' | boolean | undefined;
     /**

package/dist/bundle/LikeC4View.js

@@ -11,23 +11,24 @@ import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
 import { Overlay } from '../overlays/overlay/Overlay.js';
 import { ShadowRoot } from './ShadowRoot.js';
 import { useColorScheme, useShadowRootStyle, cssInteractive } from './styles.css.js';
-import { ErrorMessage, ViewNotFound } from './ViewNotFound.js';
+import { ViewNotFound, ErrorMessage } from './ViewNotFound.js';
 
 function LikeC4View({
   viewId,
   ...props
 }) {
   const likec4model = useLikeC4Model();
-  const view = likec4model?.findView(viewId);
-  if (!likec4model) {
-    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you have LikeC4ModelProvider." });
-  }
-  if (likec4model.stage !== "layouted") {
-    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model is not layouted. Make sure you have LikeC4ModelProvider with layouted model." });
-  }
-  if (!view || !view.isDiagram()) {
+  const view = likec4model.findView(viewId);
+  if (!view) {
     return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
   }
+  if (!view.isDiagram()) {
+    return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+      'LikeC4 View "$',
+      viewId,
+      '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
+    ] });
+  }
   return /* @__PURE__ */ jsx(LikeC4ViewInner, { view: view.$view, ...props });
 }
 const LikeC4ViewInner = memo(({
@@ -40,7 +41,7 @@ const LikeC4ViewInner = memo(({
   injectFontCss = true,
   controls = false,
   fitView = true,
-  fitViewPadding = "8px",
+  fitViewPadding = "16px",
   background = "transparent",
   browser = true,
   showDiagramTitle = false,
@@ -134,13 +135,13 @@ const LikeC4ViewInner = memo(({
               ...props
             }
           ),
-          browserView && /* @__PURE__ */ jsxs(Overlay, { onClose: () => onNavigateTo(null), children: [
+          browserView && /* @__PURE__ */ jsxs(Overlay, { openDelay: 0, onClose: () => onNavigateTo(null), children: [
             /* @__PURE__ */ jsx(
               LikeC4Diagram,
               {
                 view: browserView,
                 background: "dots",
-                onNavigateTo: (to) => onNavigateTo(to),
+                onNavigateTo,
                 enableDynamicViewWalkthrough: true,
                 enableFocusMode: true,
                 enableRelationshipBrowser: true,
@@ -151,11 +152,11 @@ const LikeC4ViewInner = memo(({
                 controls: true,
                 readonly: true,
                 fitView: true,
-                fitViewPadding: "16px",
-                renderNodes,
+                fitViewPadding: "32px",
                 ...props,
                 ...browserProps,
-                showNotations: (browserProps.showNotations ?? true) && (browserView.notation?.nodes.length ?? 0) > 0
+                showNotations: (browserProps.showNotations ?? true) && (browserView.notation?.nodes.length ?? 0) > 0,
+                renderNodes
               }
             ),
             /* @__PURE__ */ jsx(Box, { pos: "absolute", top: "1rem", right: "1rem", children: /* @__PURE__ */ jsx(

package/dist/bundle/ReactLikeC4.js

@@ -5,22 +5,23 @@ import { LikeC4Diagram } from '../LikeC4Diagram.js';
 import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
 import { ShadowRoot } from './ShadowRoot.js';
 import { useColorScheme, useShadowRootStyle } from './styles.css.js';
-import { ErrorMessage, ViewNotFound } from './ViewNotFound.js';
+import { ViewNotFound, ErrorMessage } from './ViewNotFound.js';
 
 function ReactLikeC4({
   viewId,
   ...props
 }) {
   const likec4model = useLikeC4Model();
-  const view = likec4model?.findView(viewId);
-  if (!likec4model) {
-    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model not found. Make sure you have LikeC4ModelProvider." });
-  }
+  const view = likec4model.findView(viewId);
   if (!view) {
     return /* @__PURE__ */ jsx(ViewNotFound, { viewId });
   }
   if (!view.isDiagram()) {
-    return /* @__PURE__ */ jsx(ErrorMessage, { children: "LikeC4Model is not layouted. Make sure you have LikeC4ModelProvider with layouted model." });
+    return /* @__PURE__ */ jsxs(ErrorMessage, { children: [
+      'LikeC4 View "$',
+      viewId,
+      '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
+    ] });
   }
   return /* @__PURE__ */ jsx(ReactLikeC4Inner, { view: view.$view, ...props });
 }

package/dist/bundle/index.js

@@ -7,7 +7,7 @@ export { useEnabledFeatures } from '../context/DiagramFeatures.js';
 export { useCurrentViewId } from '../hooks/useCurrentViewId.js';
 export { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
 export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from '../hooks/useXYFlow.js';
-export { useLikeC4Model, useLikeC4Specification } from '../likec4model/useLikeC4Model.js';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from '../likec4model/useLikeC4Model.js';
 export { useMantinePortalProps } from '../hooks/useMantinePortalProps.js';
 export { useSetState } from '../hooks/useSetState.js';
 export { useUpdateEffect } from '../hooks/useUpdateEffect.js';

package/dist/custom/customNodes.d.ts

@@ -26,15 +26,20 @@ export type CustomElementNodeProps<M extends Any = Any> = {
  *   ElementTitle,
  *   ElementActions,
  *   ElementDetailsButtonWithHandler,
+ *   IfEnabled,
  *   IfNotReadOnly,
  *   ElementToolbar,
  *   DefaultHandles,
+ *   ElementTags
  * } from '@likec4/diagram/custom'
  *
  * const CustomElementNode = elementNode(({ nodeProps, nodeModel }) => (
  *   <ElementNodeContainer nodeProps={nodeProps}>
  *     <ElementShape {...nodeProps} />
  *     <ElementTitle {...nodeProps} />
+ *     <IfEnabled feature="ElementTags">
+ *       <ElementTags {...nodeProps} />
+ *     </IfEnabled>
  *     <ElementActions
  *       {...nodeProps}
  *       extraButtons={[

package/dist/custom/hooks.d.ts

@@ -4,7 +4,7 @@ export { type EnabledFeatures, useEnabledFeatures, } from '../context/DiagramFea
 export { useCurrentViewId, } from '../hooks/useCurrentViewId';
 export { useDiagram, useDiagramContext, } from '../hooks/useDiagram';
 export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi, } from '../hooks/useXYFlow';
-export { useLikeC4Model, useLikeC4Specification, } from '../likec4model/useLikeC4Model';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from '../likec4model/useLikeC4Model';
 export { useMantinePortalProps } from '../hooks/useMantinePortalProps';
 export { useSetState } from '../hooks/useSetState';
 export { useUpdateEffect } from '../hooks/useUpdateEffect';

package/dist/index.js

@@ -9,7 +9,7 @@ export { useEnabledFeatures } from './context/DiagramFeatures.js';
 export { useCurrentViewId } from './hooks/useCurrentViewId.js';
 export { useDiagram, useDiagramContext } from './hooks/useDiagram.js';
 export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './hooks/useXYFlow.js';
-export { useLikeC4Model, useLikeC4Specification } from './likec4model/useLikeC4Model.js';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from './likec4model/useLikeC4Model.js';
 export { useMantinePortalProps } from './hooks/useMantinePortalProps.js';
 export { useSetState } from './hooks/useSetState.js';
 export { useUpdateEffect } from './hooks/useUpdateEffect.js';

package/dist/likec4diagram/DiagramXYFlow.js

@@ -59,12 +59,12 @@ function LikeC4DiagramXYFlow({
   } = useDiagramEventHandlers();
   const notReadOnly = !enableReadOnly, isReducedGraphics = useIsReducedGraphics(), layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
     $isPanning.set(true);
-  }, isReducedGraphics ? 100 : 200), notPanning = useDebouncedCallback(() => {
+  }, isReducedGraphics ? 120 : 200), notPanning = useDebouncedCallback(() => {
     isPanning.clear();
     if ($isPanning.get()) {
       $isPanning.set(false);
     }
-  }, 200), onMove = useCallbackRef((event) => {
+  }, isReducedGraphics ? 350 : 200), onMove = useCallbackRef((event) => {
     if (!event) {
       return;
     }
@@ -73,7 +73,7 @@ function LikeC4DiagramXYFlow({
     }
     notPanning();
   }), onMoveEnd = useCallbackRef((event, viewport) => {
-    if (!!event) {
+    if (!!event && !isReducedGraphics) {
       notPanning.flush();
     }
     diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });

package/dist/likec4diagram/custom/nodes/toolbar/_shared.d.ts

@@ -1,4 +1,4 @@
-import { DeploymentFqn, Fqn, ThemeColor, ViewChange } from '@likec4/core';
+import { DeploymentFqn, Fqn, ThemeColor, ViewChange, ColorLiteral } from '@likec4/core';
 import { MergeExclusive } from 'type-fest';
 import { NodeProps } from '../../../../base';
 import { Types } from '../../../types';
@@ -7,17 +7,17 @@ import { TooltipProps } from '@mantine/core';
 export type OnStyleChange = (style: ViewChange.ChangeElementStyle['style']) => void;
 export declare const themedColors: ({
     key: "primary";
-    value: `#${string}`;
+    value: ColorLiteral;
 } | {
     key: "secondary";
-    value: `#${string}`;
+    value: ColorLiteral;
 } | {
     key: "muted";
-    value: `#${string}`;
+    value: ColorLiteral;
 })[];
 export declare const colors: {
     key: "blue" | "gray" | "green" | "indigo" | "red" | "amber" | "slate" | "sky";
-    value: `#${string}`;
+    value: ColorLiteral;
 }[];
 export type ThemeColorKey = typeof themedColors[0]['key'];
 export type ColorKey = typeof colors[0]['key'];

package/dist/likec4model/index.d.ts

@@ -1,2 +1,2 @@
 export { useLikeC4ElementsTree, } from './useLikeC4ElementsTree';
-export { useLikeC4Model, } from './useLikeC4Model';
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from './useLikeC4Model';

package/dist/likec4model/useLikeC4Model.d.ts

@@ -1,9 +1,10 @@
-import { aux, LikeC4Model } from '@likec4/core/model';
+import { aux, LikeC4Model, LikeC4ViewModel } from '@likec4/core/model';
 import { TagSpecification, ElementSpecification, RelationshipSpecification, CustomColorDefinitions } from '@likec4/core';
 export declare function useLikeC4Model<A extends aux.Any = aux.Unknown>(): LikeC4Model<A>;
 export declare function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'layouted'): LikeC4Model.Layouted<A>;
 export declare function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'computed'): LikeC4Model.Computed<A>;
 export declare function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'layouted' | 'computed' | undefined): LikeC4Model<A>;
+export declare function useLikeC4ViewModel<A extends aux.Any = aux.Unknown>(viewId: aux.LooseViewId<A>): LikeC4ViewModel<aux.toLayouted<A>> | null;
 export declare function useLikeC4Specification(): {
     tags: {
         [x: string]: TagSpecification;

package/dist/likec4model/useLikeC4Model.js

@@ -5,16 +5,27 @@ import { LikeC4ModelContext } from './LikeC4ModelContext.js';
 function useLikeC4Model(type) {
   const model = useContext(LikeC4ModelContext);
   if (!model) {
-    throw new Error("No LikeC4Model found in context");
+    throw new Error("LikeC4Model not found. Make sure you have LikeC4ModelProvider.");
   }
   if (isString(type) && model.stage !== type) {
     throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.stage}" in context`);
   }
   return model;
 }
+function useLikeC4ViewModel(viewId) {
+  const model = useLikeC4Model("layouted");
+  const view = model.findView(viewId);
+  if (!view) {
+    return null;
+  }
+  if (!view.isDiagram()) {
+    throw new Error(`View "${viewId}" is not layouted`);
+  }
+  return view;
+}
 function useLikeC4Specification() {
   const model = useLikeC4Model();
   return model.$data.specification;
 }
 
-export { useLikeC4Model, useLikeC4Specification };
+export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel };

package/dist/overlays/overlay/Overlay.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { RemoveScroll } from '@mantine/core';
-import { useMergedRef } from '@mantine/hooks';
+import { useFocusTrap, useMergedRef } from '@mantine/hooks';
 import { useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
 import { useReducedMotionConfig, m } from 'motion/react';
 import { forwardRef, useState, useRef, useLayoutEffect } from 'react';
@@ -21,6 +21,7 @@ const Overlay = forwardRef(({
   ...rest
 }, ref) => {
   const [opened, setOpened] = useState(openDelay === 0);
+  const focusTrapRef = useFocusTrap(opened);
   const dialogRef = useRef(null);
   const isClosingRef = useRef(false);
   const motionNotReduced = useReducedMotionConfig() !== true;
@@ -54,8 +55,17 @@ const Overlay = forwardRef(({
   return /* @__PURE__ */ jsx(
     m.dialog,
     {
-      ref: useMergedRef(dialogRef, ref),
-      className: cx(RemoveScroll.classNames.fullWidth, classes?.dialog, className, styles.dialog),
+      ref: useMergedRef(
+        dialogRef,
+        focusTrapRef,
+        ref
+      ),
+      className: cx(
+        classes?.dialog,
+        className,
+        styles.dialog,
+        fullscreen && RemoveScroll.classNames.fullWidth
+      ),
       layout: true,
       style: {
         // @ts-ignore
@@ -115,7 +125,17 @@ const Overlay = forwardRef(({
         close();
       },
       ...rest,
-      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, removeScrollBar: false, children: /* @__PURE__ */ jsx("div", { className: cx(classes?.body, styles.body, "overlay-body"), children: opened && /* @__PURE__ */ jsx(Fragment, { children }) }) })
+      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cx(
+            classes?.body,
+            styles.body,
+            "overlay-body"
+          ),
+          children: opened && /* @__PURE__ */ jsx(Fragment, { children })
+        }
+      ) })
     }
   );
 });

package/dist/search/Search.d.ts

@@ -1,5 +1,4 @@
 import { SearchActorRef } from './searchActor';
-import { NamedExoticComponent } from 'react';
-export declare const Search: NamedExoticComponent<{
+export declare function Search({ searchActorRef }: {
     searchActorRef: SearchActorRef;
-}>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/search/Search.js

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { css } from '@likec4/styles/css';
-import { VStack } from '@likec4/styles/jsx';
-import { FocusTrap, Group, Grid, GridCol, Title, ScrollArea } from '@mantine/core';
+import { Box, VStack } from '@likec4/styles/jsx';
+import { Group, Grid, GridCol, Title, ScrollArea } from '@mantine/core';
 import { useCallbackRef, useHotkeys } from '@mantine/hooks';
 import { useTimeoutEffect } from '@react-hookz/web';
 import { useSelector } from '@xstate/react';
-import { LayoutGroup, AnimatePresence } from 'motion/react';
-import { memo, useRef } from 'react';
+import { AnimatePresence, LayoutGroup } from 'motion/react';
+import { useRef } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { isTruthy } from 'remeda';
 import { ErrorFallback } from '../components/ErrorFallback.js';
@@ -57,24 +57,13 @@ const body = css({
   // },
 });
 const selectIsOpened = (s) => !s.matches("inactive");
-const Search = memo(({ searchActorRef }) => {
+function Search({ searchActorRef }) {
   const isOpened = useSelector(searchActorRef, selectIsOpened);
   const openSearch = () => {
     searchActorRef.send({ type: "open" });
   };
-  const sendClose = () => {
+  const close = useCallbackRef(() => {
     searchActorRef.send({ type: "close" });
-  };
-  const afterCloseCbRef = useRef(null);
-  const close = useCallbackRef((cb) => {
-    afterCloseCbRef.current = cb ?? null;
-    sendClose();
-  });
-  const onExitComplete = useCallbackRef(() => {
-    if (afterCloseCbRef.current) {
-      afterCloseCbRef.current();
-      afterCloseCbRef.current = null;
-    }
   });
   useHotkeys([
     ["mod+k", openSearch, {
@@ -84,34 +73,25 @@ const Search = memo(({ searchActorRef }) => {
       preventDefault: true
     }]
   ]);
-  return /* @__PURE__ */ jsx(
-    SearchActorContext,
+  return /* @__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: true,
+      withBackdrop: false,
+      backdrop: {
+        opacity: 0.9
       },
-      children: /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: sendClose, children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete, children: isOpened && /* @__PURE__ */ jsx(
-        Overlay,
-        {
-          fullscreen: true,
-          withBackdrop: false,
-          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 })
     }
-  );
-});
+  ) }) }) }) });
+}
 const scrollArea = css({
   height: [
     "100%",
@@ -125,14 +105,15 @@ const scrollArea = css({
     }
   }
 });
-const SearchOverlay = ({ close, searchActorRef }) => {
+const SearchOverlay = ({ searchActorRef }) => {
+  const ref = useRef(null);
   const pickViewFor = usePickViewFor();
   useTimeoutEffect(() => {
     if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) {
-      focusToFirstFoundElement();
+      focusToFirstFoundElement(ref.current);
     }
   }, 150);
-  return /* @__PURE__ */ jsxs(FocusTrap, { children: [
+  return /* @__PURE__ */ jsxs(Box, { ref, display: "contents", children: [
     /* @__PURE__ */ jsx(
       Group,
       {
@@ -140,7 +121,7 @@ const SearchOverlay = ({ close, searchActorRef }) => {
         wrap: "nowrap",
         onClick: (e) => {
           e.stopPropagation();
-          moveFocusToSearchInput();
+          moveFocusToSearchInput(ref.current);
         },
         children: /* @__PURE__ */ jsxs(VStack, { flex: 1, px: "sm", children: [
           /* @__PURE__ */ jsx(LikeC4SearchInput, {}),

package/dist/search/components/ElementsColumn.js

@@ -5,7 +5,7 @@ import { useTree, Tree, ActionIcon, UnstyledButton, Box, Group, Highlight, Toolt
 import { useCallbackRef } from '@mantine/hooks';
 import { IconChevronRight } from '@tabler/icons-react';
 import * as m from 'motion/react-m';
-import { memo, useMemo, useCallback, useEffect } from 'react';
+import { memo, useMemo, useEffect } from 'react';
 import { isEmpty, pipe, reduce, only, first } from 'remeda';
 import { IconOrShapeRenderer } from '../../context/IconRenderer.js';
 import { useDiagram } from '../../hooks/useDiagram.js';
@@ -14,7 +14,7 @@ import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
 import { useNormalizedSearch, useSearchActor } from '../hooks.js';
 import { focusable, buttonsva } from './_shared.css.js';
 import { treeSubtree, treeLabel, treeRoot, treeNode, elementIcon, elementExpandIcon, elementTitleAndId, elementId, elementViewsCount } from './ElementsColumn.css.js';
-import { stopAndPrevent, moveFocusToSearchInput, centerY } from './utils.js';
+import { stopAndPrevent, moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
 import { NothingFound } from './ViewsColum.js';
 
 const btn = buttonsva();
@@ -108,7 +108,7 @@ function ElementsTree({
     if (e.key === "ArrowUp") {
       if (id === roots[0]?.value) {
         stopAndPrevent(e);
-        moveFocusToSearchInput();
+        moveFocusToSearchInput(target);
       }
       return;
     }
@@ -119,9 +119,7 @@ function ElementsTree({
       }
       const label = e.target.querySelector(".mantine-Tree-label") ?? target;
       const maxY = label.getBoundingClientRect().y;
-      const viewButtons = [...document.querySelectorAll(
-        `[data-likec4-search-views] .${focusable}`
-      )];
+      const viewButtons = queryAllFocusable(target, "views");
       let view = viewButtons.length > 1 ? viewButtons.find((el, i, all2) => centerY(el) > maxY || i === all2.length - 1) : null;
       view ??= first(viewButtons);
       if (view) {
@@ -240,23 +238,24 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
 }
 function useHandleElementSelection() {
   const diagram = useDiagram();
-  const { searchActorRef } = useSearchActor();
-  return useCallback((element) => {
+  const searchActorRef = useSearchActor();
+  return useCallbackRef((element) => {
     const views = [...element.views()];
     if (views.length === 0) {
       return;
     }
     const singleView = only(views);
     if (singleView) {
-      if (singleView.id === diagram.currentView.id) {
-        searchActorRef.send({ type: "close" });
-      } else {
-        diagram.navigateTo(singleView.id);
+      searchActorRef.send({ type: "close" });
+      if (singleView.id !== diagram.currentView.id) {
+        setTimeout(() => {
+          diagram.navigateTo(singleView.id);
+        }, 100);
       }
       return;
     }
     searchActorRef.send({ type: "pickview.open", elementFqn: element.id });
-  }, []);
+  });
 }
 
 export { ElementsColumn };

package/dist/search/components/PickView.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Group, Title, ActionIcon, FocusTrap, ScrollAreaAutosize, Stack } from '@mantine/core';
+import { FocusTrap, Group, Title, ActionIcon, ScrollAreaAutosize, Stack } from '@mantine/core';
 import { useWindowEvent } from '@mantine/hooks';
 import { IconX } from '@tabler/icons-react';
 import * as m from 'motion/react-m';
@@ -9,7 +9,7 @@ import { ViewButton } from './ViewsColum.js';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
 
 function PickView({ elementFqn }) {
-  const { searchActorRef } = useSearchActor();
+  const searchActorRef = useSearchActor();
   const element = useLikeC4Model().element(elementFqn);
   const scoped = [];
   const others = [];
@@ -52,7 +52,7 @@ function PickView({ elementFqn }) {
       },
       "pickview-backdrop"
     ),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(FocusTrap, { children: /* @__PURE__ */ jsxs(
       m.div,
       {
         initial: {
@@ -93,7 +93,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, i) => /* @__PURE__ */ jsx(
@@ -124,11 +124,11 @@ function PickView({ elementFqn }) {
                 view.id
               ))
             ] })
-          ] }) })
+          ] })
         ]
       },
       "pickview"
-    )
+    ) })
   ] });
 }