@likec4/diagram 1.47.0 → 1.48.0

package/dist/navigationpanel/walkthrough/DynamicViewControls.js

@@ -10,7 +10,7 @@ import { useDiagramContext } from '../../hooks/useDiagram.js';
 import { Tooltip } from '../_common.js';
 import { useNavigationActor } from '../hooks.js';
 import { useDiagram } from '../../hooks/safeContext.js';
-import IconPlayerPlayFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js';
+import IconPlayerPlayFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js';
 
 const TriggerWalkthroughButton = forwardRef((props, ref) => /* @__PURE__ */ jsx(
   Button,

package/dist/navigationpanel/walkthrough/WalkthroughPanel.js

@@ -14,7 +14,7 @@ const SectionHeader = styled("div", {
   base: {
     fontSize: "xs",
     color: "mantine.colors.dimmed",
-    fontWeight: 500,
+    fontWeight: "medium",
     userSelect: "none",
     mb: "xxs"
   }

package/dist/node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCirclePlus.js

@@ -0,0 +1,14 @@
+import createReactComponent from '../createReactComponent.js';
+
+/**
+ * @license @tabler/icons-react v3.36.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [["path", { "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "key": "svg-0" }], ["path", { "d": "M9 12h6", "key": "svg-1" }], ["path", { "d": "M12 9v6", "key": "svg-2" }]];
+const IconCirclePlus = createReactComponent("outline", "circle-plus", "CirclePlus", __iconNode);
+
+export { __iconNode, IconCirclePlus as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTrash.js

@@ -0,0 +1,14 @@
+import createReactComponent from '../createReactComponent.js';
+
+/**
+ * @license @tabler/icons-react v3.36.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [["path", { "d": "M4 7l16 0", "key": "svg-0" }], ["path", { "d": "M10 11l0 6", "key": "svg-1" }], ["path", { "d": "M14 11l0 6", "key": "svg-2" }], ["path", { "d": "M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12", "key": "svg-3" }], ["path", { "d": "M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3", "key": "svg-4" }]];
+const IconTrash = createReactComponent("outline", "trash", "Trash", __iconNode);
+
+export { __iconNode, IconTrash as default };

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

@@ -56,7 +56,7 @@ const title = css({
   fontFamily: "likec4.element",
   fontOpticalSizing: "auto",
   fontStyle: "normal",
-  fontWeight: 600,
+  fontWeight: "bold",
   fontSize: "24px",
   // lineHeight: 1.15,
   lineHeight: "xs"
@@ -140,7 +140,7 @@ const viewButtonTitle = css({
   transition: "fast",
   color: `[var(${viewTitleColor}, {colors.mantine.colors.gray[7]})]`,
   fontSize: "15px",
-  fontWeight: 500,
+  fontWeight: "medium",
   lineHeight: "1.4"
 });
 const tabsRoot = css({
@@ -165,7 +165,7 @@ const tabsList = css({
 });
 const tabsTab = css({
   fontSize: "xs",
-  fontWeight: 500,
+  fontWeight: "medium",
   flexGrow: 1,
   padding: "[6px 8px]",
   transition: "fast",
@@ -233,7 +233,7 @@ const resizeHandle = css({
   borderColor: "mantine.colors.dark[3]",
   borderTop: "none",
   borderLeft: "none",
-  borderRadius: "2px",
+  borderRadius: "xs",
   bottom: "0.5",
   right: "0.5",
   transition: "fast",

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

@@ -21,12 +21,12 @@ import { TabPanelStructure } from './TabPanelStructure.js';
 import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
 import { IconRenderer } from '../../context/IconRenderer.js';
 import { stopPropagation } from '../../utils/xyflow.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';
+import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
 import { IfEnabled, DiagramFeatures } from '../../context/DiagramFeatures.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.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.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 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 { Markdown } from '../../base-primitives/Markdown.js';
-import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
+import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
 
 const Divider = Divider$1.withProps({
   mb: 8,

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

@@ -2,8 +2,8 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { css } from '@likec4/styles/css';
 import { UnstyledButton, Flex, Text, Box, Stack, Tooltip } from '@mantine/core';
 import { useState, useRef, useEffect } from 'react';
-import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.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 IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.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';
 
 function MetadataProvider({ children }) {
   return /* @__PURE__ */ jsx(Fragment, { children });
@@ -59,7 +59,7 @@ function MultiValueDisplay({
           className: css({
             fontSize: "xs",
             color: "mantine.colors.gray[5]",
-            fontWeight: 500,
+            fontWeight: "medium",
             flexShrink: 0,
             _dark: {
               color: "mantine.colors.dark[3]"
@@ -118,7 +118,6 @@ function MultiValueDisplay({
               userSelect: "all",
               _dark: {
                 backgroundColor: "mantine.colors.dark[9]",
-                color: "mantine.colors.text",
                 borderColor: "mantine.colors.dark[4]"
               }
             }),
@@ -132,7 +131,7 @@ function MultiValueDisplay({
             className: css({
               fontSize: "xs",
               color: "mantine.colors.gray[5]",
-              fontWeight: 500,
+              fontWeight: "medium",
               flexShrink: 0,
               _dark: {
                 color: "mantine.colors.dark[3]"
@@ -191,7 +190,7 @@ function MetadataValue({ label, value }) {
               component: "span",
               className: css({
                 fontSize: "xs",
-                fontWeight: 500,
+                fontWeight: "medium",
                 color: "mantine.colors.gray[6]",
                 backgroundColor: "mantine.colors.gray[1]",
                 padding: "[1px 4px]",
@@ -219,7 +218,7 @@ function MetadataValue({ label, value }) {
           userSelect: "none",
           whiteSpace: "nowrap",
           padding: "[4px 8px]",
-          fontWeight: 700
+          fontWeight: "[700]"
         }),
         children: [
           label,

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

@@ -6,10 +6,10 @@ import 'fast-equals';
 import { useDiagram } from '../../hooks/safeContext.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { treeNodeLabel, treeNode, nodeLabel, instanceLabel } from './TabPanelDeployments.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 IconTarget from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconTarget.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconTarget from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTarget.js';
 import { stopPropagation } from '../../utils/xyflow.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';
 
 const DeploymentNodeRenderer = ({
   node
@@ -20,6 +20,7 @@ const DeploymentNodeRenderer = ({
   ] }),
   /* @__PURE__ */ jsx(Text, { component: "div", fz: "sm", fw: "500", children: node.title })
 ] });
+const zoomIcon = /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", color: "gray", children: /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8, opacity: 0.65 }) });
 const DeployedInstanceRenderer = ({
   instance
 }) => {
@@ -54,7 +55,7 @@ const DeployedInstanceRenderer = ({
                 px: "xs",
                 py: 4,
                 disabled: view.id === currentViewId,
-                leftSection: /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", color: "gray", children: /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8, opacity: 0.65 }) }),
+                leftSection: zoomIcon,
                 styles: {
                   itemSection: {
                     marginInlineEnd: rem(8)
@@ -74,6 +75,7 @@ const DeployedInstanceRenderer = ({
     ] })
   ] });
 };
+const infoIcon = /* @__PURE__ */ jsx(IconInfoCircle, {});
 const setHoveredNode = () => {
 };
 const TabPanelDeployments = memo(({ elementFqn }) => {
@@ -121,7 +123,7 @@ const TabPanelDeployments = memo(({ elementFqn }) => {
     tree.expandAllNodes();
   }, [data]);
   if (deployments.length === 0) {
-    return /* @__PURE__ */ jsx(Alert, { variant: "light", color: "gray", icon: /* @__PURE__ */ jsx(IconInfoCircle, {}), children: "This element does not have any deployments" });
+    return /* @__PURE__ */ jsx(Alert, { variant: "light", color: "gray", icon: infoIcon, children: "This element does not have any deployments" });
   }
   return (
     // <Box></Box>

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

@@ -3,29 +3,19 @@ import { css } from '@likec4/styles/css';
 const fqn = css({
   display: "inline-block",
   fontSize: "sm",
-  fontWeight: 500,
+  fontWeight: "medium",
   whiteSpace: "nowrap",
   padding: "[3px 6px]",
-  borderRadius: 3,
+  borderRadius: "xs",
   background: `var(--likec4-palette-fill)/75`,
   lineHeight: 1.2,
   color: "var(--likec4-palette-hiContrast)"
-  // selectors: {
-  //   [`${whereDark} &`]: {
-  //   }
-  // }
 });
 const relationshipStat = css({
   _light: {
     background: "mantine.colors.gray[1]",
     "&[data-missing": {}
   },
-  // [`&[data-zero]`]: {
-  //   color: mantine.colors.dimmed
-  // },
-  // [`${whereLight} &[data-zero]`]: {
-  //   background: mantine.colors.gray[3]
-  // },
   [`&[data-missing]`]: {
     color: "mantine.colors.orange[4]",
     background: `mantine.colors.orange[8]/15`,
@@ -55,7 +45,7 @@ css({
     top: "0",
     left: "2",
     fontSize: "xxs",
-    fontWeight: 500,
+    fontWeight: "medium",
     lineHeight: "1",
     color: "mantine.colors.dimmed",
     opacity: 0.85,
@@ -70,9 +60,9 @@ css({
 css({
   display: "inline-block",
   fontSize: "xl",
-  fontWeight: 600,
+  fontWeight: "bold",
   padding: "[1px 5px]",
-  minWidth: 24,
+  minWidth: "24px",
   textAlign: "center",
   borderRadius: "sm",
   background: "mantine.colors.dark[7]",
@@ -84,16 +74,6 @@ css({
     color: "mantine.colors.orange[4]",
     background: `mantine.colors.orange[8]/20`
   }
-  // _light: {
-  //   background: 'mantine.colors.gray[4]',
-  //   color: 'mantine.colors.dark[6]',
-  //   [`&[data-zero]`]: {
-  //     background: 'mantine.colors.gray[3]',
-  //   },
-  //   [`&[data-missing]`]: {
-  //     color: 'mantine.colors.orange[8]',
-  //   },
-  // },
 });
 
 export { fqn, relationshipStat, xyflow };

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

@@ -9,9 +9,9 @@ import { useElementDetailsActorRef } from './actorContext.js';
 import { fqn, xyflow, relationshipStat } from './TabPanelRelationships.css.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';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_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.0_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.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",

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.0_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

@@ -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.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';
 
 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

@@ -7,7 +7,7 @@ const edgeEnpoint = css.raw({
   "& .mantine-Text-root": {
     color: "mantine.colors.text/90",
     fontSize: "xs",
-    fontWeight: 500,
+    fontWeight: "medium",
     lineHeight: "1.2"
   }
 });
@@ -36,7 +36,7 @@ const edgeLabel = cx(
     width: "100%",
     "& .mantine-Text-root": {
       fontSize: "xxs",
-      fontWeight: 400,
+      fontWeight: "normal",
       lineHeight: "xs",
       color: "mantine.colors.dimmed"
     }

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.0_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.0_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.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';
 
 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;
 };