@likec4/diagram 1.47.0 → 1.49.0

package/dist/overlays/element-details/TabPanelRelationships.js

@@ -1,17 +1,16 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { nameFromFqn } from '@likec4/core';
-import { Stack, Group, Box, ThemeIcon, Text, Tooltip as Tooltip$1, ActionIcon, Paper } from '@mantine/core';
+import { Stack, Group, Box, ThemeIcon, Text, ActionIcon, Paper, Tooltip as Tooltip$1 } from '@mantine/core';
 import { useSelector } from '@xstate/react';
 import { useCallback } from 'react';
 import { unique } from 'remeda';
 import { RelationshipsBrowser } from '../relationships-browser/RelationshipsBrowser.js';
 import { useElementDetailsActorRef } from './actorContext.js';
 import { fqn, xyflow, relationshipStat } from './TabPanelRelationships.css.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
 import { useDiagram } from '../../hooks/safeContext.js';
-import 'fast-equals';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
-import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",

package/dist/overlays/element-details/TabPanelStructure.css.js

@@ -8,7 +8,7 @@ const elementLabel = css({
   display: "inline-flex",
   transition: "fast",
   border: `1px dashed`,
-  borderColor: "mantine.colors.defaultBorder",
+  borderColor: "default.border",
   borderRadius: "sm",
   px: "md",
   py: "xs",
@@ -24,8 +24,8 @@ const elementLabel = css({
   _hover: {
     transitionTimingFunction: "out",
     borderStyle: "solid",
-    color: "mantine.colors.defaultColor",
-    background: "mantine.colors.defaultHover",
+    color: "default.color",
+    background: "default.hover",
     "& > *": {
       transitionTimingFunction: "out",
       transform: "translateX(1px)"

package/dist/overlays/element-details/TabPanelStructure.js

@@ -2,11 +2,12 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTree, Alert, Anchor, Tree, Box, Text, Pill } from '@mantine/core';
 import { useMemo, useEffect } from 'react';
 import { treeNodeLabel, elementLabel } from './TabPanelStructure.css.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
 
 const ElementLabel = ({
   element
 }) => /* @__PURE__ */ jsx(Box, { className: elementLabel, children: /* @__PURE__ */ jsx(Text, { component: "div", fz: "sm", fw: "500", children: element.title }) });
+const infoIcon = /* @__PURE__ */ jsx(IconInfoCircle, {});
 const setHoveredNode = () => {
 };
 function TabPanelStructure({
@@ -57,7 +58,7 @@ function TabPanelStructure({
     tree.expandAllNodes();
   }, [data]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Alert, { variant: "light", color: "orange", title: "In development", icon: /* @__PURE__ */ jsx(IconInfoCircle, {}), children: [
+    /* @__PURE__ */ jsxs(Alert, { variant: "light", color: "orange", title: "In development", icon: infoIcon, children: [
       "We need your feedback. Share your thoughts and ideas -",
       " ",
       /* @__PURE__ */ jsx(

package/dist/overlays/overlaysActor.js

@@ -1,6 +1,6 @@
 import { getHotkeyHandler } from '@mantine/hooks';
 import { last, isString, reverse } from 'remeda';
-import { setup, fromCallback, assertEvent } from 'xstate';
+import { setup, assertEvent, fromCallback } from 'xstate';
 import { elementDetailsLogic } from './element-details/actor.js';
 import { relationshipDetailsLogic } from './relationship-details/actor.js';
 import { relationshipsBrowserLogic } from './relationships-browser/actor.js';
@@ -49,6 +49,15 @@ const machine = setup({
     }
   }
 });
+const emitOpened = (overlay) => machine.emit({
+  type: "opened",
+  overlay: overlay.split("-")[0]
+});
+const emitClosed = (overlay) => machine.emit({
+  type: "closed",
+  overlay: overlay.split("-")[0]
+});
+const emitIdle = () => machine.emit({ type: "idle" });
 const closeLastOverlay = () => machine.enqueueActions(({ context, enqueue }) => {
   if (context.overlays.length === 0) {
     return;
@@ -62,6 +71,7 @@ const closeLastOverlay = () => machine.enqueueActions(({ context, enqueue }) =>
   enqueue.assign({
     overlays: context.overlays.filter((o) => o.id !== lastOverlay)
   });
+  enqueue(emitClosed(lastOverlay));
 });
 const closeSpecificOverlay = () => machine.enqueueActions(({ context, enqueue, event }) => {
   assertEvent(event, "close");
@@ -76,12 +86,14 @@ const closeSpecificOverlay = () => machine.enqueueActions(({ context, enqueue, e
     enqueue.assign({
       overlays: context.overlays.filter((o) => o.id !== toClose)
     });
+    enqueue(emitClosed(toClose));
   }
 });
 const closeAllOverlays = () => machine.enqueueActions(({ context, enqueue }) => {
   for (const { id } of reverse(context.overlays)) {
     enqueue.sendTo(id, { type: "close" });
     enqueue.stopChild(id);
+    enqueue(emitClosed(id));
   }
   enqueue.assign({ overlays: [] });
 });
@@ -107,6 +119,7 @@ const openElementDetails = () => machine.enqueueActions(({ context, enqueue, eve
       }
     ]
   });
+  enqueue(emitOpened(id));
 });
 const openRelationshipDetails = () => machine.enqueueActions(({ context, enqueue, event }) => {
   assertEvent(event, "open.relationshipDetails");
@@ -134,6 +147,7 @@ const openRelationshipDetails = () => machine.enqueueActions(({ context, enqueue
       }
     ]
   });
+  enqueue(emitOpened(id));
 });
 const openRelationshipsBrowser = () => machine.enqueueActions(({ context, enqueue, event }) => {
   assertEvent(event, "open.relationshipsBrowser");
@@ -163,6 +177,7 @@ const openRelationshipsBrowser = () => machine.enqueueActions(({ context, enqueu
       }
     ]
   });
+  enqueue(emitOpened(id));
 });
 const openOverlay = () => machine.enqueueActions(({ enqueue, event }) => {
   assertEvent(event, [
@@ -200,6 +215,9 @@ const _overlaysActorLogic = machine.createMachine({
   initial: "idle",
   states: {
     idle: {
+      entry: [
+        emitIdle()
+      ],
       on: {
         "open.*": {
           actions: openOverlay(),

package/dist/overlays/relationship-details/RelationshipDetails.d.ts

@@ -1,9 +1,4 @@
-import { RelationshipDetailsTypes } from './_types';
 import { RelationshipDetailsActorRef } from './actor';
-import { FunctionComponent } from 'react';
-export declare const edgeTypes: {
-    relationship: FunctionComponent<RelationshipDetailsTypes.EdgeProps>;
-};
 export type RelationshipDetailsProps = {
     actorRef: RelationshipDetailsActorRef;
 };

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

@@ -17,9 +17,9 @@ import { layoutRelationshipDetails } from './layout.js';
 import { SelectEdge } from './SelectEdge.js';
 import { RelationshipEdge } from './custom/edgeTypes.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.1_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.1_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.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const nodeTypes = {
   element: ElementNode,
@@ -261,4 +261,4 @@ const TopLeftPanelInner = ({ edge, view }) => {
   ] }) }) });
 };
 
-export { RelationshipDetails, edgeTypes };
+export { RelationshipDetails };

package/dist/overlays/relationship-details/SelectEdge.css.js

@@ -5,9 +5,9 @@ const edgeEnpoint = css.raw({
   alignItems: "center",
   padding: "[6px 2px 0 2px]",
   "& .mantine-Text-root": {
-    color: "mantine.colors.text/90",
+    color: "text/90",
     fontSize: "xs",
-    fontWeight: 500,
+    fontWeight: "medium",
     lineHeight: "1.2"
   }
 });
@@ -30,15 +30,15 @@ const edgeLabel = cx(
     gridColumnStart: 1,
     gridColumnEnd: 4,
     borderBottom: `1px solid`,
-    borderBottomColor: "mantine.colors.defaultBorder",
+    borderBottomColor: "default.border",
     marginBottom: "0",
     padding: "[0 4px 5px 4px]",
     width: "100%",
     "& .mantine-Text-root": {
       fontSize: "xxs",
-      fontWeight: 400,
+      fontWeight: "normal",
       lineHeight: "xs",
-      color: "mantine.colors.dimmed"
+      color: "text.dimmed"
     }
   })
 );
@@ -54,7 +54,7 @@ const edgeRow = css({
   "&:is(:hover, [data-selected=true]) > *": {
     transition: "all 0.15s ease-out",
     cursor: "pointer",
-    backgroundColor: "mantine.colors.defaultHover"
+    backgroundColor: "default.hover"
   }
 });
 const edgeGrid = css({

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

@@ -3,8 +3,8 @@ import { Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown,
 import { useRef } from 'react';
 import { useRelationshipDetails } from './hooks.js';
 import { edgeSource, edgeTarget, scrollArea, edgeGrid, edgeRow, edgeArrow, edgeLabel } from './SelectEdge.css.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.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 IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconSelector from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
 
 const SelectEdge = ({
   edge,

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

@@ -1,4 +1,4 @@
-import { treeFromElements } from '@likec4/core/compute-view/relationships';
+import { treeFromElements } from '@likec4/core/compute-view';
 import { modelConnection } from '@likec4/core/model';
 import { invariant, isAncestor, sortParentsFirst } from '@likec4/core/utils';
 import { hasAtLeast } from 'remeda';

package/dist/overlays/relationship-details/custom/ElementActions.js

@@ -6,9 +6,9 @@ import 'fast-equals';
 import 'react';
 import { useDiagram } from '../../../hooks/safeContext.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 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.1_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.1_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.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const ElementActions = (props) => {
   const { enableNavigateTo, enableVscode } = useEnabledFeatures();

package/dist/overlays/relationship-details/custom/nodeTypes.js

@@ -7,15 +7,28 @@ import '@xstate/react';
 import 'fast-equals';
 import 'react';
 import { useDiagram } from '../../../hooks/safeContext.js';
+import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
 import { memoNode } from '../../../base-primitives/memoNode.js';
 import { CompoundNodeContainer } from '../../../base-primitives/compound/CompoundNodeContainer.js';
 import { CompoundTitle } from '../../../base-primitives/compound/CompoundTitle.js';
 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 { ElementDetailsButton } from '../../../base-primitives/element/ElementDetailsButton.js';
+import { ElementTags as ElementTags$1 } from '../../../base-primitives/element/ElementTags.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/relationship-details/layout.js

@@ -1,4 +1,4 @@
-import { treeFromElements } from '@likec4/core/compute-view/relationships';
+import { treeFromElements } from '@likec4/core/compute-view';
 import { exact, preferSummary } from '@likec4/core/types';
 import dagre from '@dagrejs/dagre';
 import { ifind, DefaultMap, invariant } from '@likec4/core/utils';

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

@@ -1,9 +1,4 @@
-import { RelationshipsBrowserTypes } from './_types';
 import { RelationshipsBrowserActorRef } from './actor';
-import { FunctionComponent } from 'react';
-export declare const edgeTypes: {
-    relationship: FunctionComponent<RelationshipsBrowserTypes.EdgeProps>;
-};
 export type RelationshipsBrowserProps = {
     actorRef: RelationshipsBrowserActorRef;
 };

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.1_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.1_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.1_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.1_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.1_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.1_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.css.js

@@ -7,8 +7,8 @@ const label = css({
   _hover: {
     backgroundColor: "mantine.colors.gray[0]",
     _dark: {
-      backgroundColor: "mantine.colors.defaultHover",
-      color: "mantine.colors.white"
+      backgroundColor: "default.hover",
+      color: "white"
     }
   }
 });

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.1_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.1_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/actor.js

@@ -2,7 +2,7 @@ import { nonNullable, invariant, delay } from '@likec4/core/utils';
 import { applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
 import { getViewportForBounds } from '@xyflow/system';
 import { hasAtLeast, omit, isNullish } from 'remeda';
-import { setup, assign, enqueueActions, cancel, raise, fromPromise, assertEvent } from 'xstate';
+import { assign, enqueueActions, cancel, raise, setup, assertEvent, fromPromise } from 'xstate';
 import { MinZoom, ZIndexes } from '../../base/const.js';
 import { updateEdges } from '../../base/updateEdges.js';
 import { updateNodes } from '../../base/updateNodes.js';

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.1_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.1_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.1_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: `default.border`,
+        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/overlays/relationships-browser/useViewToNodesEdges.js

@@ -1,4 +1,4 @@
-import { Queue, GroupElementKind, nonNullable, invariant } from '@likec4/core';
+import { Queue, GroupElementKind, invariant, nonNullable } from '@likec4/core';
 import '@react-hookz/web';
 import { hasAtLeast } from 'remeda';
 import { ZIndexes } from '../../base/const.js';

package/dist/projects-overview/ProjectsOverview.js

@@ -5,7 +5,7 @@ import { ReactFlowProvider } from '@xyflow/react';
 import { LayoutGroup } from 'motion/react';
 import { useEffect, useRef } from 'react';
 import { projectOverviewLogic } from './actor.js';
-import { ProjectsOverviewActorContext } from './context.js';
+import { ProjectsOverviewActorContextProvider } from './context.js';
 import { ProjectsOverviewPanel } from './panel/ProjectsOverviewPanel.js';
 import { ProjectsOverviewXY } from './ProjectsOverviewXY.js';
 
@@ -48,7 +48,7 @@ function ProjectsOverview({
     initialHeight: bounds.height,
     fitView: false
   });
-  return /* @__PURE__ */ jsx(ProjectsOverviewActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsxs(ReactFlowProvider, { ...initialRef.current, children: [
+  return /* @__PURE__ */ jsx(ProjectsOverviewActorContextProvider, { value: actorRef, children: /* @__PURE__ */ jsxs(ReactFlowProvider, { ...initialRef.current, children: [
     /* @__PURE__ */ jsx(LayoutGroup, { id: actorRef.sessionId, inherit: false, children: /* @__PURE__ */ jsx(ProjectsOverviewXY, { ...props }) }),
     /* @__PURE__ */ jsx(ProjectsOverviewPanel, {})
   ] }) });