@likec4/diagram 1.47.0 → 1.48.0

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

@@ -1,12 +1,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
-import { ActionIcon, Group } from '@mantine/core';
-import { useStateHistory } from '@mantine/hooks';
-import { useRafEffect } from '@react-hookz/web';
+import { Group, ActionIcon, Tooltip as Tooltip$1 } from '@mantine/core';
+import { useStateHistory, useClipboard } from '@mantine/hooks';
 import { ReactFlowProvider, useStoreApi, useReactFlow, Panel } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
 import { LayoutGroup, AnimatePresence, m } from 'motion/react';
-import { useRef, memo, useEffect } from 'react';
+import { useRef, memo, useEffect, useState } from 'react';
 import { BaseXYFlow } from '../../base/BaseXYFlow.js';
 import { useCallbackRef } from '../../hooks/useCallbackRef.js';
 import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
@@ -15,9 +14,12 @@ import { SelectElement } from './SelectElement.js';
 import { RelationshipEdge } from './custom/edgeTypes.js';
 import { EmptyNode } from './custom/EmptyNode.js';
 import { CompoundNode, ElementNode } from './custom/nodeTypes.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
-import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconChevronLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconCheck from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
+import IconAlertTriangle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
+import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
 
 const nodeTypes = {
   element: ElementNode,
@@ -144,7 +146,7 @@ const RelationshipsBrowserInner = memo(() => {
       browser.navigateTo(historySubjectId);
     }
   }, [historySubjectId, browser]);
-  useRafEffect(() => {
+  useEffect(() => {
     browser.updateView(layouted);
   }, [layouted, browser]);
   const hasStepBack = current > 0;
@@ -159,18 +161,21 @@ const RelationshipsBrowserInner = memo(() => {
         onStepForward: () => historyOps.forward()
       }
     ),
-    closeable && /* @__PURE__ */ jsx(Panel, { position: "top-right", children: /* @__PURE__ */ jsx(
-      ActionIcon,
-      {
-        variant: "default",
-        color: "gray",
-        onClick: (e) => {
-          e.stopPropagation();
-          browser.close();
-        },
-        children: /* @__PURE__ */ jsx(IconX, {})
-      }
-    ) })
+    closeable && /* @__PURE__ */ jsx(Panel, { position: "top-right", children: /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx(CopyLinkButton, { subjectId }),
+      /* @__PURE__ */ jsx(
+        ActionIcon,
+        {
+          variant: "default",
+          color: "gray",
+          onClick: (e) => {
+            e.stopPropagation();
+            browser.close();
+          },
+          children: /* @__PURE__ */ jsx(IconX, {})
+        }
+      )
+    ] }) })
   ] });
 });
 const TopLeftPanel = ({
@@ -235,5 +240,95 @@ const TopLeftPanel = ({
     /* @__PURE__ */ jsx(SelectElement, {})
   ] }) });
 };
+const Tooltip = Tooltip$1.withProps({
+  color: "dark",
+  fz: "xs",
+  openDelay: 400,
+  closeDelay: 150,
+  label: "",
+  children: null,
+  offset: 4,
+  withinPortal: false
+});
+function buildRelationshipUrl(subjectId) {
+  const currentUrl = new URL(window.location.href);
+  if (currentUrl.hash.startsWith("#/")) {
+    const hashUrl = new URL(currentUrl.hash.substring(1), currentUrl.origin);
+    hashUrl.searchParams.set("relationships", subjectId);
+    const cleanPath = hashUrl.pathname.replace(/\/$/, "");
+    return `${currentUrl.origin}${currentUrl.pathname}${currentUrl.search}#${cleanPath}${hashUrl.search}`;
+  }
+  currentUrl.searchParams.set("relationships", subjectId);
+  return currentUrl.href;
+}
+const CopyLinkButton = ({ subjectId }) => {
+  const clipboard = useClipboard({ timeout: 2e3 });
+  const [copyError, setCopyError] = useState(false);
+  const errorTimeoutRef = useRef(null);
+  const handleCopy = async (e) => {
+    e.stopPropagation();
+    setCopyError(false);
+    if (errorTimeoutRef.current) {
+      clearTimeout(errorTimeoutRef.current);
+      errorTimeoutRef.current = null;
+    }
+    const url = buildRelationshipUrl(subjectId);
+    if (!window.isSecureContext) {
+      setCopyError(true);
+      errorTimeoutRef.current = window.setTimeout(() => {
+        setCopyError(false);
+      }, 2e3);
+      return;
+    }
+    clipboard.copy(url);
+  };
+  useEffect(() => {
+    if (clipboard.error) {
+      setCopyError(true);
+      if (errorTimeoutRef.current) {
+        clearTimeout(errorTimeoutRef.current);
+      }
+      errorTimeoutRef.current = window.setTimeout(() => {
+        setCopyError(false);
+      }, 2e3);
+    }
+  }, [clipboard.error]);
+  useEffect(() => {
+    return () => {
+      if (errorTimeoutRef.current) {
+        clearTimeout(errorTimeoutRef.current);
+      }
+    };
+  }, []);
+  const getButtonState = () => {
+    if (clipboard.copied) {
+      return {
+        icon: /* @__PURE__ */ jsx(IconCheck, {}),
+        tooltip: "Link copied!"
+      };
+    }
+    if (copyError) {
+      return {
+        icon: /* @__PURE__ */ jsx(IconAlertTriangle, {}),
+        tooltip: "Copy failed - Clipboard requires HTTPS or localhost"
+      };
+    }
+    return {
+      icon: /* @__PURE__ */ jsx(IconLink, {}),
+      tooltip: "Copy link to this relationship view"
+    };
+  };
+  const buttonState = getButtonState();
+  return /* @__PURE__ */ jsx(Tooltip, { label: buttonState.tooltip, withArrow: true, position: "top", withinPortal: false, children: /* @__PURE__ */ jsx(
+    ActionIcon,
+    {
+      variant: "default",
+      color: "gray",
+      onClick: handleCopy,
+      "aria-label": "Copy link to this relationship view",
+      children: buttonState.icon
+    }
+  ) });
+};
 
-export { RelationshipsBrowser, edgeTypes };
+export { RelationshipsBrowser };

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

@@ -7,8 +7,8 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
 import * as SelectElement_css from './SelectElement.css.js';
 import { scrollArea } from './SelectElement.css.js';
-import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const selector2 = (state) => {
   const subjectExistsInScope = state.context.layouted?.subjectExistsInScope ?? false;

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

@@ -6,9 +6,9 @@ import '@xstate/react';
 import 'fast-equals';
 import { useDiagram } from '../../../hooks/safeContext.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from '../hooks.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
-import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
 
 const selectSubject = (state) => state.context.subject;

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

@@ -1,16 +1,31 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Box, Text } from '@mantine/core';
-import { emptyNode } from './styles.css.js';
+import { Box } from '@likec4/styles/jsx';
+import { Text } from '@mantine/core';
 
 function EmptyNode({
   data: {
     column
   }
 }) {
-  return /* @__PURE__ */ jsx(Box, { className: emptyNode, children: /* @__PURE__ */ jsxs(Text, { c: "dimmed", fz: "lg", fw: 500, children: [
-    "No ",
-    column === "incomers" ? "incoming" : "outgoing"
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      css: {
+        width: "100%",
+        height: "100%",
+        border: `3px dashed`,
+        borderColor: `mantine.colors.defaultBorder`,
+        borderRadius: "md",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      children: /* @__PURE__ */ jsxs(Text, { c: "dimmed", fz: "lg", fw: 500, children: [
+        "No ",
+        column === "incomers" ? "incoming" : "outgoing"
+      ] })
+    }
+  );
 }
 
 export { EmptyNode };

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

@@ -5,6 +5,7 @@ import '@xstate/react';
 import 'fast-equals';
 import 'react';
 import { useDiagram } from '../../../hooks/safeContext.js';
+import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
 import { ElementActions } from './ElementActions.js';
 import { CompoundNodeContainer } from '../../../base-primitives/compound/CompoundNodeContainer.js';
 import { CompoundTitle } from '../../../base-primitives/compound/CompoundTitle.js';
@@ -12,9 +13,21 @@ import { CompoundDetailsButton } from '../../../base-primitives/compound/Compoun
 import { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
 import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
 import { ElementData } from '../../../base-primitives/element/ElementData.js';
-import { ElementTags } from '../../../base-primitives/element/ElementTags.js';
+import { ElementTags as ElementTags$1 } from '../../../base-primitives/element/ElementTags.js';
 import { ElementDetailsButton } from '../../../base-primitives/element/ElementDetailsButton.js';
 
+function ElementTags(props) {
+  const diagram = useDiagram();
+  return /* @__PURE__ */ jsx(
+    ElementTags$1,
+    {
+      onTagClick: useCallbackRef((tag) => {
+        diagram.openSearch(tag);
+      }),
+      ...props
+    }
+  );
+}
 const ElementDetailsButtonWithHandler = (props) => {
   const diagram = useDiagram();
   return /* @__PURE__ */ jsx(

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

@@ -1,4 +1,4 @@
-import { RelationshipsViewData } from '@likec4/core/compute-view/relationships';
+import { RelationshipsViewData } from '@likec4/core/compute-view';
 import { DiagramEdge, DiagramNode, DiagramView, ElementKind, Fqn, MarkdownOrString, ViewId } from '@likec4/core/types';
 import { LikeC4ViewModel } from '@likec4/core/model';
 import { RelationshipsBrowserTypes } from './_types';

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

@@ -1,4 +1,4 @@
-import { computeRelationshipsView, treeFromElements } from '@likec4/core/compute-view/relationships';
+import { computeRelationshipsView, treeFromElements } from '@likec4/core/compute-view';
 import { useMemo } from 'react';
 import dagre from '@dagrejs/dagre';
 import { preferSummary, exact } from '@likec4/core/types';

package/dist/projects-overview/actor.js

@@ -20,8 +20,7 @@ const machine = setup({
   guards: {
     isReady: ({ context }) => context.initialized.xydata && context.initialized.xyflow && !!context.xystore && !!context.xyflow,
     "click: selected node": ({ event }) => {
-      assertEvent(event, ["xyflow.click.node"]);
-      return event.node.selected === true;
+      return event.type === "xyflow.click.node" && event.node.selected === true;
     }
   }
 });
@@ -91,32 +90,11 @@ const saveViewport = () => machine.createAction(({ context }) => {
 });
 const handleClick = () => machine.enqueueActions(({ event, enqueue }) => {
   if (event.type === "xyflow.click.double") {
-    enqueue(cancelFitDiagram());
-    enqueue(raiseFitDiagram());
+    enqueue(fitDiagram());
     return;
   }
-  if (event.type === "xyflow.click.pane") {
-    enqueue(cancelFitDiagram());
-    return;
-  }
-  console.warn("Unknown event", event);
 });
-const cancelFitDiagram = () => machine.cancel("fitDiagram");
-const raiseFitDiagram = (params) => {
-  const { delay = 30, ...rest } = {};
-  return machine.raise(
-    {
-      type: "xyflow.fitDiagram",
-      ...rest
-    },
-    {
-      id: "fitDiagram",
-      delay
-    }
-  );
-};
-const fitDiagram = (params) => machine.enqueueActions(({ context, event, enqueue }) => {
-  enqueue(cancelFitDiagram());
+const fitDiagram = (params) => machine.enqueueActions(({ context, event }) => {
   let bounds = context.view.bounds, duration;
   if (params) {
     bounds = params.bounds ?? context.view.bounds;
@@ -261,16 +239,16 @@ const _projectOverviewLogic = machine.createMachine({
         "xyflow.mouse.*": {
           actions: onMouseEnterOrLeave()
         },
-        "xyflow.click.node": [
+        "xyflow.click.*": [
           {
             guard: "click: selected node",
             actions: assignNavigateTo(),
             target: "navigate"
+          },
+          {
+            actions: handleClick()
           }
         ],
-        "xyflow.click.*": {
-          actions: handleClick()
-        },
         "xyflow.fitDiagram": {
           actions: fitDiagram()
         },
@@ -282,7 +260,6 @@ const _projectOverviewLogic = machine.createMachine({
     navigate: {
       tags: "active",
       entry: [
-        cancelFitDiagram(),
         saveViewport(),
         xstateActions_cjsExports.assign({
           xyedges: []
@@ -292,7 +269,7 @@ const _projectOverviewLogic = machine.createMachine({
           const { width, domNode } = nonNullable(xystore).getState();
           const nextZoom = clamp(
             Math.min(
-              width * 2 / 3 / navigateTo.data.width
+              width * 7 / 9 / navigateTo.data.width
               // (height - 200) / (navigateTo.data.height),
             ),
             { min: MinZoom, max: 2.5 }

package/dist/projects-overview/custom/nodeTypes.js

@@ -5,7 +5,7 @@ import { ElementNodeContainer } from '../../base-primitives/element/ElementNodeC
 import { ElementShape } from '../../base-primitives/element/ElementShape.js';
 import { ElementData } from '../../base-primitives/element/ElementData.js';
 import { ElementActionButtons } from '../../base-primitives/element/ElementActionButtons.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 import { DefaultHandles } from '../../base-primitives/NodeHandles.js';
 
 function ProjectNode(props) {

package/dist/projects-overview/panel/ProjectsOverviewPanel.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { NavigationPanel } from '../../components/NavigationPanel.js';
 
 const ProjectsOverviewPanel = () => {
-  return /* @__PURE__ */ jsx(NavigationPanel.Root, { size: "lg", children: /* @__PURE__ */ jsxs(NavigationPanel.Body, { children: [
+  return /* @__PURE__ */ jsx(NavigationPanel.Root, { children: /* @__PURE__ */ jsxs(NavigationPanel.Body, { children: [
     /* @__PURE__ */ jsx(NavigationPanel.Logo, {}),
     /* @__PURE__ */ jsx(NavigationPanel.Label, { children: "Projects Overview" })
   ] }) });

package/dist/search/Search.d.ts

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

package/dist/search/Search.js

@@ -6,12 +6,10 @@ import { 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 { memo, useRef } from 'react';
 import { isTruthy } from 'remeda';
-import { ErrorFallback } from '../components/ErrorFallback.js';
-import { DiagramFeatures } from '../context/DiagramFeatures.js';
 import { useCallbackRef } from '../hooks/useCallbackRef.js';
+import { useSearchActorRef } from '../hooks/useSearchActor.js';
 import { Overlay } from '../overlays/overlay/Overlay.js';
 import { ElementsColumn } from './components/ElementsColumn.js';
 import { PickView } from './components/PickView.js';
@@ -19,7 +17,6 @@ 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%))]`,
@@ -51,15 +48,43 @@ const body = css({
   paddingLeft: "md",
   paddingRight: "md",
   paddingBottom: "sm",
-  background: "[transparent]"
+  background: "transparent"
   // backgroundColor: {
   //   _dark: `[rgb(34 34 34 / 0.95)]`,
   //   _light: `[rgb(255 255 255/ 0.95)]`,
   // },
 });
+const scrollArea = css({
+  height: [
+    "100%",
+    "100cqh"
+  ],
+  "& .mantine-ScrollArea-viewport": {
+    minHeight: "100%",
+    "& > div": {
+      minHeight: "100%",
+      height: "100%"
+    }
+  }
+});
 const selectIsOpened = (s) => !s.matches("inactive");
-function Search({ searchActorRef }) {
+function Search() {
+  const searchActorRef = useSearchActorRef();
+  if (!searchActorRef) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(SearchOverlayCtx, { searchActorRef });
+}
+const selectPickViewFor = (s) => s.context.pickViewFor ?? null;
+const SearchOverlayCtx = memo(({ searchActorRef }) => {
   const isOpened = useSelector(searchActorRef, selectIsOpened);
+  const ref = useRef(null);
+  const pickViewFor = useSelector(searchActorRef, selectPickViewFor);
+  useTimeoutEffect(() => {
+    if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) {
+      focusToFirstFoundElement(ref.current);
+    }
+  }, isOpened ? 150 : void 0);
   const openSearch = () => {
     searchActorRef.send({ type: "open" });
   };
@@ -74,7 +99,7 @@ function Search({ searchActorRef }) {
       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(
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpened && /* @__PURE__ */ jsx(
     Overlay,
     {
       fullscreen: true,
@@ -89,86 +114,63 @@ function Search({ searchActorRef }) {
       openDelay: 0,
       onClose: close,
       "data-likec4-search": "true",
-      children: /* @__PURE__ */ jsx(SearchOverlay, { searchActorRef })
+      children: /* @__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, { searchActorRef, elementFqn: pickViewFor })
+      ] })
     }
-  ) }) }) }) });
-}
-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/search/components/ElementsColumn.css.js

@@ -39,10 +39,10 @@ const elementId = css({
   fontSize: "10px",
   lineHeight: "1.3",
   display: "block",
-  fontWeight: 500,
+  fontWeight: "medium",
   whiteSpace: "nowrap",
   padding: "[1px 5px]",
-  borderRadius: "4px",
+  borderRadius: "sm",
   background: `mantine.colors.dark[9]/30`,
   _light: {
     background: `mantine.colors.gray[3]/20`
@@ -58,7 +58,7 @@ const elementViewsCount = css({
   flex: 0,
   // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
   fontSize: "10px",
-  fontWeight: 500,
+  fontWeight: "medium",
   whiteSpace: "nowrap",
   lineHeight: "1.1",
   [whenContainerIsNarrow]: {