@likec4/diagram 1.26.2 → 1.27.1

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

@@ -1,13 +1,15 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { nameFromFqn } from "@likec4/core";
-import { Stack, Group, Box, ThemeIcon, Text, Tooltip as Tooltip$1, Paper } from "@mantine/core";
-import { IconArrowRight, IconInfoCircle } from "@tabler/icons-react";
-import { useSelector } from "@xstate/react";
-import { useState } 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 { 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 { IconArrowRight, IconInfoCircle, IconExternalLink } from '@tabler/icons-react';
+import { useSelector } from '@xstate/react';
+import { useState } from 'react';
+import { unique } from 'remeda';
+import { useOverlaysActorRef } from '../../hooks/useOverlaysActor.js';
+import { RelationshipsBrowser } from '../relationships-browser/RelationshipsBrowser.js';
+import { useElementDetailsActorRef } from './actorContext.js';
+import { fqn, xyflow, relationshipStat } from './TabPanelRelationships.css.js';
+
 const Tooltip = Tooltip$1.withProps({
   color: "dark",
   fz: "xs",
@@ -22,6 +24,7 @@ function TabPanelRelationships({
   node,
   element
 }) {
+  const overlaysActor = useOverlaysActorRef();
   const delailsActor = useElementDetailsActorRef();
   const relationshipsBrowserActor = useSelector(delailsActor, (s) => s.children[`${delailsActor.id}-relationships`]);
   const [scope, setScope] = useState("view");
@@ -75,7 +78,32 @@ function TabPanelRelationships({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx(Box, { className: xyflow, children: relationshipsBrowserActor && /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: relationshipsBrowserActor }) })
+    /* @__PURE__ */ jsx(Box, { className: xyflow, children: relationshipsBrowserActor && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: relationshipsBrowserActor }),
+      /* @__PURE__ */ jsx(Box, { pos: "absolute", top: 12, right: 12, children: /* @__PURE__ */ jsx(
+        ActionIcon,
+        {
+          size: "md",
+          variant: "default",
+          radius: "sm",
+          onClick: (e) => {
+            e.stopPropagation();
+            const {
+              subject,
+              scope: scope2,
+              viewId
+            } = relationshipsBrowserActor.getSnapshot().context;
+            overlaysActor.send({
+              type: "open.relationshipsBrowser",
+              subject,
+              scope: scope2,
+              viewId
+            });
+          },
+          children: /* @__PURE__ */ jsx(IconExternalLink, { stroke: 1.6, style: { width: "70%" } })
+        }
+      ) })
+    ] }) })
   ] });
 }
 function RelationshipsStat({
@@ -107,6 +135,5 @@ function RelationshipsStat({
     }
   );
 }
-export {
-  TabPanelRelationships
-};
+
+export { TabPanelRelationships };

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

@@ -1,7 +1,36 @@
-/* empty css                                     */
-var treeNodeLabel = "_15ijd1w0";
-var elementLabel = "_15ijd1w1";
-export {
-  elementLabel,
-  treeNodeLabel
-};
+import { css } from '@likec4/styles/css';
+
+const treeNodeLabel = css({
+  marginTop: "sm",
+  marginBottom: "sm"
+});
+const elementLabel = css({
+  display: "inline-flex",
+  transition: "fast",
+  border: `1px dashed`,
+  borderColor: "mantine.colors.defaultBorder",
+  borderRadius: "sm",
+  px: "md",
+  py: "xs",
+  alignItems: "center",
+  cursor: "pointer",
+  color: "mantine.colors.gray[7]",
+  _dark: {
+    color: "mantine.colors.dark[1]"
+  },
+  "& > *": {
+    transition: "fast"
+  },
+  _hover: {
+    transitionTimingFunction: "out",
+    borderStyle: "solid",
+    color: "mantine.colors.defaultColor",
+    background: "mantine.colors.defaultHover",
+    "& > *": {
+      transitionTimingFunction: "out",
+      transform: "translateX(1px)"
+    }
+  }
+});
+
+export { elementLabel, treeNodeLabel };

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

@@ -1,8 +1,9 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useTree, Alert, Anchor, Tree, Box, Text, Pill } from "@mantine/core";
-import { IconInfoCircle } from "@tabler/icons-react";
-import { useMemo, useEffect } from "react";
-import { treeNodeLabel, elementLabel } from "./TabPanelStructure.css.js";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useTree, Alert, Anchor, Tree, Box, Text, Pill } from '@mantine/core';
+import { IconInfoCircle } from '@tabler/icons-react';
+import { useMemo, useEffect } from 'react';
+import { treeNodeLabel, elementLabel } from './TabPanelStructure.css.js';
+
 const ElementLabel = ({
   element
 }) => /* @__PURE__ */ jsx(Box, { className: elementLabel, children: /* @__PURE__ */ jsx(Text, { component: "div", fz: "sm", fw: "500", children: element.title }) });
@@ -85,7 +86,5 @@ function TabPanelStructure({
     )
   ] });
 }
-export {
-  ElementLabel,
-  TabPanelStructure
-};
+
+export { ElementLabel, TabPanelStructure };