@likec4/diagram 1.31.0 → 1.32.1

package/dist/overlays/relationship-details/layout.js

@@ -236,11 +236,13 @@ function layoutRelationshipDetails(data, scope) {
     return {
       id,
       parent: parentId ?? null,
+      x: position.x,
+      y: position.y,
       position: [position.x, position.y],
       title: element.title,
       description: element.description,
       technology: element.technology,
-      tags: null,
+      tags: [...element.tags],
       links: null,
       color: inheritFromNodeOrAncestor?.color ?? element.color,
       shape: inheritFromNode?.shape ?? element.shape,

package/dist/overlays/relationships-browser/RelationshipsBrowser.d.ts

@@ -1,6 +1,7 @@
 import { RelationshipsBrowserActorRef } from './actor';
 import { FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
+import { EdgeData, Dimmed } from '../../base/types.Base';
 import { Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const edgeTypes: {
     relationship: FunctionComponent<{
@@ -30,10 +31,10 @@ export declare const edgeTypes: {
         markerEnd?: string;
         pathOptions?: any;
         interactionWidth?: number;
-        data: import("../../base").Base.EdgeData & {
+        data: EdgeData & {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: import("../../base").Base.Dimmed;
+            dimmed?: Dimmed;
             sourceFqn: Fqn;
             targetFqn: Fqn;
             relations: NonEmptyArray<RelationId>;

package/dist/overlays/relationships-browser/SelectElement.js

@@ -34,7 +34,7 @@ const SelectElement = memo(() => {
   } = useRelationshipsBrowserState(selector2);
   const root = useRef(null);
   const viewport = useRef(null);
-  const model = useLikeC4Model(true);
+  const model = useLikeC4Model();
   const subject = model.findElement(subjectId);
   const data = useLikeC4ElementsTree(scope === "view" && viewId ? viewId : void 0);
   const tree = useTree({

package/dist/overlays/relationships-browser/_types.d.ts

@@ -1,4 +1,4 @@
-import { Color, DiagramNode, Fqn, IconUrl, NonEmptyArray, RelationId, RelationshipLineType, ViewId } from '@likec4/core';
+import { Color, DiagramNode, Fqn, IconUrl, NonEmptyArray, RelationId, RelationshipLineType, ViewId } from '@likec4/core/types';
 import { Simplify } from 'type-fest';
 import { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types';
 export declare namespace RelationshipsBrowserTypes {
@@ -10,7 +10,7 @@ export declare namespace RelationshipsBrowserTypes {
         in: string[];
         out: string[];
     };
-    type ElementNodeData = Simplify<Base.NodeData & NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'style' | 'width' | 'height' | 'navigateTo'>> & {
+    type ElementNodeData = Simplify<Base.NodeData & NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'style' | 'width' | 'height' | 'tags' | 'navigateTo'>> & {
         column: Column;
         fqn: Fqn;
         icon: string | null;

package/dist/overlays/relationships-browser/actor.d.ts

@@ -352,7 +352,7 @@ export declare const relationshipsBrowserLogic: StateMachine<Context, Events, {
     }) => {
         subject: Fqn;
         viewId: ViewId | null;
-        scope: "global" | "view";
+        scope: "view" | "global";
         closeable: boolean;
         enableSelectSubject: boolean;
         enableChangeScope: boolean;

package/dist/overlays/relationships-browser/actor.js

@@ -9,8 +9,8 @@ import { updateNodes } from '../../base/updateNodes.js';
 import { typedSystem } from '../../state/utils.js';
 import { ViewPadding } from './const.js';
 import { viewToNodesEdge } from './useViewToNodesEdges.js';
-import { Base } from '../../base/types.js';
 import { centerXYInternalNode } from '../../utils/xyflow.js';
+import { setDimmed, setHovered, setData } from '../../base/types.Base.js';
 
 const findRootSubject = (nodes) => nodes.find(
   (n) => n.data.column === "subjects" && isNullish(n.parentId)
@@ -104,7 +104,7 @@ const layouter = fromPromise(async ({ input, self, signal }) => {
     xyedges: []
   });
   await delay(120);
-  next.xynodes = next.xynodes.map(Base.setDimmed(false));
+  next.xynodes = next.xynodes.map(setDimmed(false));
   if (signal.aborted) {
     return updateXYData();
   }
@@ -334,12 +334,12 @@ const relationshipsBrowserLogic = setup({
                     const hasDimmed = context.xyedges.some((edge) => edge.data.dimmed !== false || edge.selected);
                     return context.xyedges.map((edge) => {
                       if (edge.id === event.edge.id) {
-                        return Base.setData(edge, {
+                        return setData(edge, {
                           hovered: true,
                           dimmed: false
                         });
                       }
-                      return hasDimmed && !edge.selected ? Base.setDimmed(edge, "immediate") : edge;
+                      return hasDimmed && !edge.selected ? setDimmed(edge, "immediate") : edge;
                     });
                   }
                 }),
@@ -354,7 +354,7 @@ const relationshipsBrowserLogic = setup({
                   xyedges: ({ context, event }) => {
                     return context.xyedges.map((edge) => {
                       if (edge.id === event.edge.id) {
-                        return Base.setHovered(edge, false);
+                        return setHovered(edge, false);
                       }
                       return edge;
                     });
@@ -367,14 +367,14 @@ const relationshipsBrowserLogic = setup({
             "dim.nonhovered.edges": {
               actions: assign({
                 xyedges: ({ context }) => context.xyedges.map(
-                  (edge) => edge.data.hovered ? edge : Base.setDimmed(edge, edge.data.dimmed === "immediate" ? "immediate" : true)
+                  (edge) => edge.data.hovered ? edge : setDimmed(edge, edge.data.dimmed === "immediate" ? "immediate" : true)
                 )
               })
             },
             "undim.edges": {
               actions: assign({
                 xyedges: ({ context }) => {
-                  return context.xyedges.map(Base.setDimmed(false));
+                  return context.xyedges.map(setDimmed(false));
                 }
               })
             },

package/dist/overlays/relationships-browser/custom/edgeTypes.d.ts

@@ -1,5 +1,6 @@
 import { FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
+import { EdgeData, Dimmed } from '../../../base/types.Base';
 import { Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const RelationshipEdge: FunctionComponent<{
     id: string;
@@ -28,10 +29,10 @@ export declare const RelationshipEdge: FunctionComponent<{
     markerEnd?: string;
     pathOptions?: any;
     interactionWidth?: number;
-    data: import("../../../base").Base.EdgeData & {
+    data: EdgeData & {
         hovered?: boolean;
         active?: boolean;
-        dimmed?: import("../../../base").Base.Dimmed;
+        dimmed?: Dimmed;
         sourceFqn: Fqn;
         targetFqn: Fqn;
         relations: NonEmptyArray<RelationId>;

package/dist/overlays/relationships-browser/custom/nodeTypes.d.ts

@@ -1,18 +1,21 @@
 import { NodeProps } from '../../../base';
 import { RelationshipsBrowserTypes } from '../_types';
 import { MemoExoticComponent } from 'react';
-import { ElementStyle, Color, ViewId, Fqn, IconUrl } from '@likec4/core';
+import { Dimmed } from '../../../base/types.Base';
+import { ElementStyle, Color, Any, ViewId, Fqn, IconUrl } from '@likec4/core';
+import { Tags } from '@likec4/core/types/aux';
 export declare const ElementNode: MemoExoticComponent<(props: NodeProps<{
     hovered?: boolean;
-    dimmed?: import("../../../base").Base.Dimmed;
+    dimmed?: Dimmed;
     width: number;
     height: number;
     style: ElementStyle;
     color: Color;
     title: string;
-    technology: string | null;
-    description: string | null;
     shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
+    tags: Tags<Any>;
+    technology: string | null | undefined;
+    description: string | null | undefined;
     navigateTo: ViewId<string> | null | undefined;
     column: RelationshipsBrowserTypes.Column;
     fqn: Fqn;
@@ -22,7 +25,7 @@ export declare const ElementNode: MemoExoticComponent<(props: NodeProps<{
 }, string>) => import("react/jsx-runtime").JSX.Element>;
 export declare const CompoundNode: MemoExoticComponent<(props: NodeProps<{
     hovered?: boolean;
-    dimmed?: import("../../../base").Base.Dimmed;
+    dimmed?: Dimmed;
     style: ElementStyle;
     color: Color;
     title: string;

package/dist/overlays/relationships-browser/custom/nodeTypes.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Handle } from '@xyflow/react';
 import { Position } from '@xyflow/system';
+import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { ElementActions } from './ElementActions.js';
 import { EmptyNode as EmptyNode$1 } from './EmptyNode.js';
@@ -10,6 +11,7 @@ import { CompoundTitle } from '../../../base/primitives/compound/CompoundTitle.j
 import { ElementNodeContainer } from '../../../base/primitives/element/ElementNodeContainer.js';
 import { ElementShape } from '../../../base/primitives/element/ElementShape.js';
 import { ElementTitle } from '../../../base/primitives/element/ElementTitle.js';
+import { ElementTags } from '../../../base/primitives/element/ElementTags.js';
 import { ElementDetailsButton } from '../../../base/primitives/element/ElementDetailsButton.js';
 
 const ElementDetailsButtonWithHandler = (props) => {
@@ -26,9 +28,11 @@ const ElementDetailsButtonWithHandler = (props) => {
   );
 };
 const ElementNode = customNode((props) => {
+  const { enableElementTags } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { layoutId: props.id, nodeProps: props, children: [
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
     /* @__PURE__ */ jsx(ElementTitle, { ...props }),
+    enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
     /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
     /* @__PURE__ */ jsx(ElementPorts, { ...props })

package/dist/overlays/relationships-browser/layout.d.ts

@@ -1,6 +1,6 @@
 import { RelationshipsViewData } from '@likec4/core/compute-view/relationships';
 import { DiagramEdge, DiagramNode, DiagramView, ElementKind, Fqn, ViewId } from '@likec4/core/types';
-import { AnyAux, LikeC4ViewModel } from '@likec4/core/model';
+import { LikeC4ViewModel } from '@likec4/core/model';
 import { RelationshipsBrowserTypes } from './_types';
 export type LayoutRelationshipsViewResult = {
     subject: Fqn;
@@ -24,5 +24,5 @@ export declare namespace LayoutRelationshipsViewResult {
         existsInCurrentView: boolean;
     };
 }
-export declare function layoutRelationshipsView(data: RelationshipsViewData, scope: LikeC4ViewModel<AnyAux> | null): Omit<LayoutRelationshipsViewResult, 'subject'>;
+export declare function layoutRelationshipsView(data: RelationshipsViewData, scope: LikeC4ViewModel | null): Omit<LayoutRelationshipsViewResult, 'subject'>;
 export declare function useRelationshipsView(subject: Fqn, viewId: ViewId | null, scope: 'global' | 'view'): LayoutRelationshipsViewResult;

package/dist/overlays/relationships-browser/layout.js

@@ -1,7 +1,7 @@
 import { computeRelationshipsView, treeFromElements } from '@likec4/core/compute-view/relationships';
 import { useMemo } from 'react';
 import dagre from '@dagrejs/dagre';
-import { toArray, invariant, ifind, DefaultMap } from '@likec4/core';
+import { toArray, invariant, ifind, nonNullable, DefaultMap } from '@likec4/core';
 import { pipe, concat, map, groupBy, prop, forEachObj, filter, mapToObj, find, only, unique, tap, reduce, sortBy } from 'remeda';
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
 
@@ -325,12 +325,14 @@ function layoutRelationshipsView(data, scope) {
       return {
         id,
         parent: null,
+        x: position.x,
+        y: position.y,
         position: [position.x, position.y],
         title: "empty node",
         description: null,
         technology: null,
-        tags: null,
-        links: null,
+        tags: [],
+        links: [],
         color: "muted",
         shape: "rectangle",
         style: {
@@ -367,11 +369,13 @@ function layoutRelationshipsView(data, scope) {
     return {
       id,
       parent: parentId ?? null,
+      x: position.x,
+      y: position.y,
       position: [position.x, position.y],
       title: element.title,
       description: element.description,
       technology: element.technology,
-      tags: null,
+      tags: [...element.tags],
       links: null,
       color: inheritFromNodeOrAncestor?.color ?? element.color,
       shape: inheritFromNode?.shape ?? element.shape,
@@ -426,7 +430,7 @@ function layoutRelationshipsView(data, scope) {
         relations,
         sourceHandle,
         targetHandle
-      } = find(edges, (e2) => e2.name === ename);
+      } = nonNullable(find(edges, (e2) => e2.name === ename));
       const onlyRelation = only(relations);
       const label = onlyRelation?.title ?? "untitled";
       const isMultiple = relations.length > 1;
@@ -452,7 +456,7 @@ function layoutRelationshipsView(data, scope) {
   };
 }
 function useRelationshipsView(subject, viewId, scope) {
-  const model = useLikeC4Model(true);
+  const model = useLikeC4Model();
   return useMemo(() => {
     const view = viewId ? model.findView(viewId) : null;
     const data = layoutRelationshipsView(

package/dist/overlays/relationships-browser/useViewToNodesEdges.js

@@ -1,4 +1,4 @@
-import { Queue, ElementKind, nonNullable, DiagramNode, invariant } from '@likec4/core';
+import { Queue, GroupElementKind, nonNullable, invariant } from '@likec4/core';
 import '@react-hookz/web';
 import { hasAtLeast } from 'remeda';
 import { ZIndexes } from '../../base/const.js';
@@ -21,7 +21,7 @@ function viewToNodesEdge(view) {
   let next;
   while (next = queue.dequeue()) {
     const { node, parent } = next;
-    const isCompound = hasAtLeast(node.children, 1) || node.kind == ElementKind.Group;
+    const isCompound = hasAtLeast(node.children, 1) || node.kind == GroupElementKind;
     if (isCompound) {
       for (const child of node.children) {
         queue.enqueue({ node: nodeById(child), parent: node });
@@ -53,7 +53,7 @@ function viewToNodesEdge(view) {
         parentId: ns + parent.id
       }
     };
-    const fqn = DiagramNode.modelRef(node);
+    const fqn = node.modelRef ?? null;
     const navigateTo = { navigateTo: node.navigateTo ?? null };
     switch (true) {
       case node.kind === LayoutRelationshipsViewResult.Empty: {
@@ -110,6 +110,7 @@ function viewToNodesEdge(view) {
               ports: node.ports,
               style: node.style,
               existsInCurrentView: node.existsInCurrentView,
+              tags: node.tags,
               ...navigateTo
             }
           }

package/dist/search/Search.d.ts

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

package/dist/search/Search.js

@@ -0,0 +1,173 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { css } from '@likec4/styles/css';
+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 { 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';
+import { DiagramFeatures } from '../context/DiagramFeatures.js';
+import { Overlay } from '../overlays/overlay/Overlay.js';
+import { ElementsColumn } from './components/ElementsColumn.js';
+import { PickView } from './components/PickView.js';
+import { SearchByTags } from './components/SearchByTags.js';
+import { LikeC4SearchInput } from './components/SearchInput.js';
+import { focusToFirstFoundElement, moveFocusToSearchInput } from './components/utils.js';
+import { ViewsColumn } from './components/ViewsColum.js';
+import { SearchActorContext, usePickViewFor } from './hooks.js';
+
+const dialog = css({
+  backgroundColor: `[rgb(34 34 34 / var(--_opacity, 95%))]`,
+  _light: {
+    backgroundColor: `[rgb(250 250 250 / var(--_opacity, 95%))]`
+  },
+  backdropFilter: "auto",
+  backdropBlur: "var(--_blur, 10px)"
+  //   base: `[rgb(34 34 34 / var(${backdropOpacity}))]`,
+  //   _light: `[rgb(255 255 255/ var(${backdropOpacity}))]`,
+  // },
+});
+const body = css({
+  // containerName: 'likec4-search',
+  // containerType: 'size',
+  // position: 'fixed',
+  // zIndex: 901,
+  // top: 0,
+  // left: 0,
+  width: "100%",
+  height: "100%",
+  maxHeight: "100vh",
+  overflow: "hidden",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "stretch",
+  gap: "sm",
+  paddingTop: 20,
+  paddingLeft: 16,
+  paddingRight: 16,
+  paddingBottom: 8,
+  background: "[transparent]"
+  // backgroundColor: {
+  //   _dark: `[rgb(34 34 34 / 0.95)]`,
+  //   _light: `[rgb(255 255 255/ 0.95)]`,
+  // },
+});
+const selectIsOpened = (s) => !s.matches("inactive");
+function Search({ searchActorRef }) {
+  const isOpened = useSelector(searchActorRef, selectIsOpened);
+  const openSearch = () => {
+    searchActorRef.send({ type: "open" });
+  };
+  const close = useCallbackRef(() => {
+    searchActorRef.send({ type: "close" });
+  });
+  useHotkeys([
+    ["mod+k", openSearch, {
+      preventDefault: true
+    }],
+    ["mod+f", openSearch, {
+      preventDefault: true
+    }]
+  ]);
+  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,
+    {
+      fullscreen: true,
+      withBackdrop: false,
+      backdrop: {
+        opacity: 0.9
+      },
+      classes: {
+        dialog,
+        body
+      },
+      openDelay: 0,
+      onClose: close,
+      "data-likec4-search": "true",
+      children: /* @__PURE__ */ jsx(SearchOverlay, { searchActorRef })
+    }
+  ) }) }) }) });
+}
+const scrollArea = css({
+  height: [
+    "100%",
+    "100cqh"
+  ],
+  "& .mantine-ScrollArea-viewport": {
+    minHeight: "100%",
+    "& > div": {
+      minHeight: "100%",
+      height: "100%"
+    }
+  }
+});
+const SearchOverlay = ({ searchActorRef }) => {
+  const ref = useRef(null);
+  const pickViewFor = usePickViewFor();
+  useTimeoutEffect(() => {
+    if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) {
+      focusToFirstFoundElement(ref.current);
+    }
+  }, 150);
+  return /* @__PURE__ */ jsxs(Box, { ref, display: "contents", children: [
+    /* @__PURE__ */ jsx(
+      Group,
+      {
+        className: "group",
+        wrap: "nowrap",
+        onClick: (e) => {
+          e.stopPropagation();
+          moveFocusToSearchInput(ref.current);
+        },
+        children: /* @__PURE__ */ jsxs(VStack, { flex: 1, px: "sm", children: [
+          /* @__PURE__ */ jsx(LikeC4SearchInput, {}),
+          /* @__PURE__ */ jsx(SearchByTags, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Grid, { children: [
+      /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(Title, { component: "div", order: 6, c: "dimmed", pl: "sm", children: "Elements" }) }),
+      /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(Title, { component: "div", order: 6, c: "dimmed", pl: "sm", children: "Views" }) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Grid,
+      {
+        className: css({
+          containerName: "likec4-search-elements",
+          containerType: "size",
+          overflow: "hidden",
+          flexGrow: 1
+        }),
+        children: [
+          /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
+            ScrollArea,
+            {
+              type: "scroll",
+              className: scrollArea,
+              pr: "xs",
+              scrollbars: "y",
+              children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-elements", children: /* @__PURE__ */ jsx(ElementsColumn, {}) }) })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(GridCol, { span: 6, children: /* @__PURE__ */ jsx(
+            ScrollArea,
+            {
+              type: "scroll",
+              className: scrollArea,
+              pr: "xs",
+              scrollbars: "y",
+              children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: "likec4-search-views", children: /* @__PURE__ */ jsx(ViewsColumn, {}) }) })
+            }
+          ) })
+        ]
+      }
+    ),
+    pickViewFor && /* @__PURE__ */ jsx(PickView, { elementFqn: pickViewFor })
+  ] });
+};
+
+export { Search };

package/dist/{likec4diagram/ui/search → search/components}/ElementsColumn.css.js

@@ -11,7 +11,6 @@ const treeRoot = css(
     containerName: "likec4-tree"
   }),
   {
-    overflow: "hidden",
     containerType: "inline-size",
     height: "100%"
   }

package/dist/search/components/ElementsColumn.d.ts

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

package/dist/{likec4diagram/ui/search → search/components}/ElementsColumn.js

@@ -5,25 +5,26 @@ 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 { useMemo, useCallback, useEffect } from 'react';
-import { isEmpty, pipe, reduce, only, partition, first } from 'remeda';
-import { IconOrShapeRenderer } from '../../../context/IconRenderer.js';
-import { sortByLabel } from '../../../likec4model/useLikeC4ElementsTree.js';
-import { useLikeC4Model } from '../../../likec4model/useLikeC4Model.js';
+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';
+import { sortByLabel } from '../../likec4model/useLikeC4ElementsTree.js';
+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 { useNormalizedSearch, useCloseSearchAndNavigateTo, setPickView } from './state.js';
-import { stopAndPrevent, moveFocusToSearchInput, centerY } from './utils.js';
+import { stopAndPrevent, moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
 import { NothingFound } from './ViewsColum.js';
 
 const btn = buttonsva();
-function ElementsColumn() {
+const ElementsColumn = memo(() => {
+  const model = useLikeC4Model();
   const search = useNormalizedSearch();
-  const model = useLikeC4Model(true);
   const data = useMemo(() => {
     const searchTerms = search.split(".");
     let elements;
-    if (isEmpty(search) || search === "kind:") {
+    if (isEmpty(searchTerms) || searchTerms[0] === "kind:") {
       elements = model.elements();
     } else {
       elements = ifilter(model.elements(), (element) => {
@@ -76,7 +77,7 @@ function ElementsColumn() {
     return /* @__PURE__ */ jsx(NothingFound, {});
   }
   return /* @__PURE__ */ jsx(ElementsTree, { data, handleClick });
-}
+});
 const setHoveredNode = () => {
 };
 function ElementsTree({
@@ -107,7 +108,7 @@ function ElementsTree({
     if (e.key === "ArrowUp") {
       if (id === roots[0]?.value) {
         stopAndPrevent(e);
-        moveFocusToSearchInput();
+        moveFocusToSearchInput(target);
       }
       return;
     }
@@ -118,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) {
@@ -200,6 +199,7 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
         component: m.button,
         layout: true,
         tabIndex: -1,
+        "data-value": element.id,
         className: cx(btn.root, "group", "likec4-element-button"),
         ...views.length > 0 && {
           onClick: (e) => {
@@ -237,24 +237,25 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
   ] });
 }
 function useHandleElementSelection() {
-  const navigateTo = useCloseSearchAndNavigateTo();
-  return useCallback((element) => {
+  const diagram = useDiagram();
+  const searchActorRef = useSearchActor();
+  return useCallbackRef((element) => {
     const views = [...element.views()];
     if (views.length === 0) {
       return;
     }
     const singleView = only(views);
     if (singleView) {
-      navigateTo(singleView.id, element.id);
+      searchActorRef.send({ type: "close" });
+      if (singleView.id !== diagram.currentView.id) {
+        setTimeout(() => {
+          diagram.navigateTo(singleView.id);
+        }, 100);
+      }
       return;
     }
-    const [scoped, others] = partition(views, (v) => v.viewOf?.id === element.id);
-    setPickView({
-      elementFqn: element.id,
-      scoped,
-      others
-    });
-  }, [setPickView, navigateTo]);
+    searchActorRef.send({ type: "pickview.open", elementFqn: element.id });
+  });
 }
 
 export { ElementsColumn };

package/dist/search/components/PickView.d.ts

@@ -0,0 +1,4 @@
+import { Fqn } from '@likec4/core/types';
+export declare function PickView({ elementFqn }: {
+    elementFqn: Fqn;
+}): import("react/jsx-runtime").JSX.Element;