@likec4/diagram 1.30.0 → 1.32.0

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,15 +1,16 @@
-import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+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: NamedExoticComponent<{
+export declare const RelationshipEdge: FunctionComponent<{
     id: string;
     selected?: boolean;
     selectable?: boolean;
     deletable?: boolean;
     style?: CSSProperties;
+    animated?: boolean;
     source: string;
     target: string;
-    animated?: boolean;
     sourceX: number;
     sourceY: number;
     targetX: number;
@@ -28,11 +29,10 @@ export declare const RelationshipEdge: NamedExoticComponent<{
     markerEnd?: string;
     pathOptions?: any;
     interactionWidth?: number;
-    data: {
+    data: EdgeData & {
         hovered?: boolean;
         active?: boolean;
-        dimmed?: import("../../../base").Base.Dimmed;
-    } & {
+        dimmed?: Dimmed;
         sourceFqn: Fqn;
         targetFqn: Fqn;
         relations: NonEmptyArray<RelationId>;
@@ -41,8 +41,5 @@ export declare const RelationshipEdge: NamedExoticComponent<{
         navigateTo: ViewId | null;
         line: RelationshipLineType;
         existsInCurrentView: boolean;
-        hovered?: boolean;
-        active?: boolean;
-        dimmed?: import("../../../base").Base.Dimmed;
     };
 }>;

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

@@ -5,7 +5,7 @@ import { getBezierPath } from '@xyflow/system';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { useRelationshipsBrowser } from '../hooks.js';
 import { customEdge } from '../../../base/primitives/customEdge.js';
-import { useEnabledFeature } from '../../../context/DiagramFeatures.js';
+import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { EdgeLabel } from '../../../base/primitives/edge/EdgeLabel.js';
 import { EdgeActionButton } from '../../../base/primitives/edge/EdgeActionButton.js';
 import { EdgeContainer } from '../../../base/primitives/edge/EdgeContainer.js';
@@ -14,7 +14,7 @@ import { EdgeLabelContainer } from '../../../base/primitives/edge/EdgeLabelConta
 
 const RelationshipEdge = customEdge((props) => {
   const browser = useRelationshipsBrowser();
-  const { enableNavigateTo } = useEnabledFeature("NavigateTo");
+  const { enableNavigateTo } = useEnabledFeatures();
   const {
     id,
     data: {

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

@@ -1,29 +1,34 @@
 import { NodeProps } from '../../../base';
 import { RelationshipsBrowserTypes } from '../_types';
-import { NamedExoticComponent } from 'react';
-import { ElementStyle, Color, ViewId, Fqn, IconUrl } from '@likec4/core';
-export declare const ElementNode: NamedExoticComponent<NodeProps<{
+import { MemoExoticComponent } from 'react';
+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?: Dimmed;
     width: number;
     height: number;
     style: ElementStyle;
-    title: string;
-    technology: string | null;
-    description: string | null;
     color: Color;
+    title: string;
     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;
     icon: string | null;
     ports: RelationshipsBrowserTypes.Ports;
     existsInCurrentView: boolean;
+}, string>) => import("react/jsx-runtime").JSX.Element>;
+export declare const CompoundNode: MemoExoticComponent<(props: NodeProps<{
     hovered?: boolean;
-    dimmed?: import("../../../base").Base.Dimmed;
-}>>;
-export declare const CompoundNode: NamedExoticComponent<NodeProps<{
+    dimmed?: Dimmed;
     style: ElementStyle;
-    title: string;
     color: Color;
+    title: string;
     shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
     column: RelationshipsBrowserTypes.Column;
     fqn: Fqn;
@@ -31,14 +36,8 @@ export declare const CompoundNode: NamedExoticComponent<NodeProps<{
     icon: IconUrl;
     ports: RelationshipsBrowserTypes.Ports;
     existsInCurrentView: boolean;
-    hovered?: boolean;
-    dimmed?: import("../../../base").Base.Dimmed;
-}>>;
-export declare const EmptyNode: NamedExoticComponent<NodeProps<{
-    column: RelationshipsBrowserTypes.Column;
-    hovered?: boolean;
-    dimmed?: import("../../../base").Base.Dimmed;
-}>>;
+}, string>) => import("react/jsx-runtime").JSX.Element>;
+export declare const EmptyNode: MemoExoticComponent<(props: NodeProps<RelationshipsBrowserTypes.EmptyNodeData, string>) => import("react/jsx-runtime").JSX.Element>;
 type ElementPortsProps = NodeProps<Pick<RelationshipsBrowserTypes.ElementNodeData, 'ports' | 'height'>>;
 export declare const ElementPorts: ({ data: { ports, height: h } }: ElementPortsProps) => import("react/jsx-runtime").JSX.Element;
 type CompoundPortsProps = NodeProps<Pick<RelationshipsBrowserTypes.CompoundNodeData, 'ports'>>;

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Handle } from '@xyflow/react';
 import { Position } from '@xyflow/system';
-import * as m from 'motion/react-m';
+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';
@@ -11,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) => {
@@ -27,9 +28,11 @@ const ElementDetailsButtonWithHandler = (props) => {
   );
 };
 const ElementNode = customNode((props) => {
-  return /* @__PURE__ */ jsxs(ElementNodeContainer, { component: m.div, layoutId: props.id, nodeProps: props, children: [
+  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/hooks.d.ts

@@ -1,71 +1,14 @@
-import { Fqn, ViewId, NonEmptyArray, RelationId, Color, RelationshipLineType } from '@likec4/core';
-import { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot, XYStoreApi, Events } from './actor';
+import { Fqn } from '@likec4/core';
+import { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot, Context, Events } from './actor';
 import { LayoutRelationshipsViewResult } from './layout';
-import { Context, ReactNode, CSSProperties } from 'react';
-import { GeneralHelpers, ViewportHelperFunctions } from '@xyflow/react';
-import { EdgeMarkerType, HandleType } from '@xyflow/system';
+import { Context } from 'react';
 export declare const RelationshipsBrowserActorContext: Context<RelationshipsBrowserActorRef | null>;
 export declare function useRelationshipsBrowserActor(): RelationshipsBrowserActorRef;
 export declare function useRelationshipsBrowserState<T>(selector: (state: RelationshipsBrowserSnapshot) => T, compare?: (a: T, b: T) => boolean): T;
 export declare function useRelationshipsBrowser(): {
     actor: RelationshipsBrowserActorRef;
     readonly rootElementId: string;
-    getState: () => Readonly<{
-        subject: Fqn;
-        viewId: ViewId | null;
-        scope: "global" | "view";
-        closeable: boolean;
-        enableSelectSubject: boolean;
-        enableChangeScope: boolean;
-        xyflow: ( GeneralHelpers<import("./_types").RelationshipsBrowserTypes.Node, {
-            id: string;
-            source: string;
-            target: string;
-            sourceHandle?: string | null;
-            targetHandle?: string | null;
-            animated?: boolean;
-            hidden?: boolean;
-            deletable?: boolean;
-            selectable?: boolean;
-            selected?: boolean;
-            markerStart?: EdgeMarkerType;
-            markerEnd?: EdgeMarkerType;
-            zIndex?: number;
-            ariaLabel?: string;
-            interactionWidth?: number;
-            label?: ReactNode;
-            labelStyle?: CSSProperties;
-            labelShowBg?: boolean;
-            labelBgStyle?: CSSProperties;
-            labelBgPadding?: [number, number];
-            labelBgBorderRadius?: number;
-            style?: CSSProperties;
-            className?: string;
-            reconnectable?: boolean | HandleType;
-            focusable?: boolean;
-            type: "relationship";
-            data: {
-                sourceFqn: Fqn;
-                targetFqn: Fqn;
-                relations: NonEmptyArray<RelationId>;
-                color: Color | undefined;
-                label: string | null;
-                navigateTo: ViewId | null;
-                line: RelationshipLineType;
-                existsInCurrentView: boolean;
-                hovered?: boolean;
-                active?: boolean;
-                dimmed?: import("../../base").Base.Dimmed;
-            };
-        }> & ViewportHelperFunctions & {
-            viewportInitialized: boolean;
-        }) | null;
-        xystore: XYStoreApi | null;
-        layouted: LayoutRelationshipsViewResult | null;
-        navigateFromNode: string | null;
-        xynodes: import("./_types").RelationshipsBrowserTypes.Node[];
-        xyedges: import("./_types").RelationshipsBrowserTypes.Edge[];
-    }>;
+    getState: () => Context;
     send: (event: Events) => void;
     updateView: (layouted: LayoutRelationshipsViewResult) => void;
     changeScope: (scope: "global" | "view") => void;

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

@@ -2,11 +2,11 @@ import { nonNullable } from '@likec4/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
-import { r as reactExports } from '../../_virtual/index.js';
+import { createContext, useMemo, useContext } from 'react';
 
-const RelationshipsBrowserActorContext = reactExports.createContext(null);
+const RelationshipsBrowserActorContext = createContext(null);
 function useRelationshipsBrowserActor() {
-  return nonNullable(reactExports.useContext(RelationshipsBrowserActorContext), "No RelationshipsBrowserActorContext");
+  return nonNullable(useContext(RelationshipsBrowserActorContext), "No RelationshipsBrowserActorContext");
 }
 function useRelationshipsBrowserState(selector, compare = shallowEqual) {
   const actor = useRelationshipsBrowserActor();
@@ -14,7 +14,7 @@ function useRelationshipsBrowserState(selector, compare = shallowEqual) {
 }
 function useRelationshipsBrowser() {
   const actor = useRelationshipsBrowserActor();
-  return reactExports.useMemo(() => ({
+  return useMemo(() => ({
     actor,
     get rootElementId() {
       return `relationships-browser-${actor.sessionId.replaceAll(":", "_")}`;

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,10 +1,9 @@
-import { r as reactExports } from '../../_virtual/index.js';
+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';
-import { computeRelationshipsView } from '../../packages/core/src/compute-view/relationships-view/compute.js';
-import { treeFromElements } from '../../packages/core/src/compute-view/relationships-view/utils.js';
 
 const Sizes = {
   dagre: {
@@ -326,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: {
@@ -368,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,
@@ -427,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;
@@ -453,8 +456,8 @@ function layoutRelationshipsView(data, scope) {
   };
 }
 function useRelationshipsView(subject, viewId, scope) {
-  const model = useLikeC4Model(true);
-  return reactExports.useMemo(() => {
+  const model = useLikeC4Model();
+  return useMemo(() => {
     const view = viewId ? model.findView(viewId) : null;
     const data = layoutRelationshipsView(
       computeRelationshipsView(subject, model, viewId, scope),

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,5 @@
+import { SearchActorRef } from './searchActor';
+import { NamedExoticComponent } from 'react';
+export declare const Search: NamedExoticComponent<{
+    searchActorRef: SearchActorRef;
+}>;

package/dist/search/Search.js

@@ -0,0 +1,192 @@
+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 { 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 { 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");
+const Search = memo(({ searchActorRef }) => {
+  const isOpened = useSelector(searchActorRef, selectIsOpened);
+  const openSearch = () => {
+    searchActorRef.send({ type: "open" });
+  };
+  const sendClose = () => {
+    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, {
+      preventDefault: true
+    }],
+    ["mod+f", openSearch, {
+      preventDefault: true
+    }]
+  ]);
+  return /* @__PURE__ */ jsx(
+    SearchActorContext,
+    {
+      value: {
+        searchActorRef,
+        close
+      },
+      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 })
+        }
+      ) }) }) }) })
+    }
+  );
+});
+const scrollArea = css({
+  height: [
+    "100%",
+    "100cqh"
+  ],
+  "& .mantine-ScrollArea-viewport": {
+    minHeight: "100%",
+    "& > div": {
+      minHeight: "100%",
+      height: "100%"
+    }
+  }
+});
+const SearchOverlay = ({ close, searchActorRef }) => {
+  const pickViewFor = usePickViewFor();
+  useTimeoutEffect(() => {
+    if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) {
+      focusToFirstFoundElement();
+    }
+  }, 150);
+  return /* @__PURE__ */ jsxs(FocusTrap, { children: [
+    /* @__PURE__ */ jsx(
+      Group,
+      {
+        className: "group",
+        wrap: "nowrap",
+        onClick: (e) => {
+          e.stopPropagation();
+          moveFocusToSearchInput();
+        },
+        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>;