@likec4/diagram 1.26.2 → 1.27.0

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

@@ -1,27 +1,25 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { isScopedElementView, isDeploymentView } from "@likec4/core";
-import { RemoveScroll, Card, Box, Group, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Stack, Divider as Divider$1, Code, UnstyledButton, ThemeIcon } from "@mantine/core";
-import { useViewportSize, useSessionStorage } from "@mantine/hooks";
-import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from "@react-hookz/web";
-import { IconExternalLink, IconFileSymlink, IconZoomScan, IconStack2 } from "@tabler/icons-react";
-import clsx from "clsx";
-import { useDragControls, useMotionValue, m } from "framer-motion";
-import { useState, useCallback, useRef } from "react";
-import { pipe, map, partition, only, clamp, isNullish } from "remeda";
-import { Link } from "../../components/Link.js";
-import { useDiagram } from "../../hooks/useDiagram.js";
-import { getVarName } from "../../utils/css.js";
-import { elementIcon, card, cardHeader, title, tabsPanel, tabsTab, tabsList, tabsRoot, propertiesGrid, resizeHandle, dialog, propertyLabel, viewButton, viewButtonTitle, backdropOpacity as backdropOpacity$1, backdropBlur as backdropBlur$1 } from "./ElementDetailsCard.css.js";
-import { TabPanelDeployments } from "./TabPanelDeployments.js";
-import { TabPanelRelationships } from "./TabPanelRelationships.js";
-import { TabPanelStructure } from "./TabPanelStructure.js";
-import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
-import { useUpdateEffect } from "../../hooks/useUpdateEffect.js";
-import { IconRenderer } from "../../context/IconRenderer.js";
-import { stopPropagation } from "../../utils/xyflow.js";
-import { IfEnabled, DiagramFeatures } from "../../context/DiagramFeatures.js";
-const backdropBlur = getVarName(backdropBlur$1);
-const backdropOpacity = getVarName(backdropOpacity$1);
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { isScopedElementView, isDeploymentView } from '@likec4/core';
+import { cx, css } from '@likec4/styles/css';
+import { RemoveScroll, Card, Box, Group, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Stack, Divider as Divider$1, Code, UnstyledButton, ThemeIcon } from '@mantine/core';
+import { useViewportSize, useSessionStorage } from '@mantine/hooks';
+import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
+import { IconExternalLink, IconFileSymlink, IconZoomScan, IconStack2 } from '@tabler/icons-react';
+import { useDragControls, useMotionValue, m } from 'framer-motion';
+import { useState, useCallback, useRef } from 'react';
+import { pipe, map, partition, only, clamp, isNullish } from 'remeda';
+import { Link } from '../../components/Link.js';
+import { useDiagram } from '../../hooks/useDiagram.js';
+import { elementIcon, cardHeader, title, tabsPanel, tabsTab, tabsList, tabsRoot, propertiesGrid, resizeHandle, card, backdropOpacity, backdropBlur, dialog, propertyLabel, viewButton, viewButtonTitle } from './ElementDetailsCard.css.js';
+import { TabPanelDeployments } from './TabPanelDeployments.js';
+import { TabPanelRelationships } from './TabPanelRelationships.js';
+import { TabPanelStructure } from './TabPanelStructure.js';
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
+import { IconRenderer } from '../../context/IconRenderer.js';
+import { stopPropagation } from '../../utils/xyflow.js';
+import { IfEnabled, DiagramFeatures } from '../../context/DiagramFeatures.js';
+
 const Divider = Divider$1.withProps({
   mb: 8,
   labelPosition: "left",
@@ -58,7 +56,6 @@ function ElementDetailsCard({
   fqn,
   onClose
 }) {
-  var _a, _b, _c;
   const [opened, setOpened] = useState(false);
   const windowSize = useViewportSize();
   const windowWidth = windowSize.width || window.innerWidth || 1200, windowHeight = windowSize.height || window.innerHeight || 800;
@@ -79,13 +76,13 @@ function ElementDetailsCard({
       return isScopedElementView(v) && v.viewOf === fqn;
     })
   );
-  let defaultView = ((_a = nodeModel == null ? void 0 : nodeModel.navigateTo) == null ? void 0 : _a.$view) ?? ((_b = elementModel.defaultView) == null ? void 0 : _b.$view) ?? null;
-  if ((defaultView == null ? void 0 : defaultView.id) === viewId) {
+  let defaultView = nodeModel?.navigateTo?.$view ?? elementModel.defaultView?.$view ?? null;
+  if (defaultView?.id === viewId) {
     defaultView = null;
   }
   const defaultLink = only(elementModel.links);
   const controls = useDragControls();
-  const isCompound = (((_c = nodeModel == null ? void 0 : nodeModel.$node.children) == null ? void 0 : _c.length) ?? 0) > 0;
+  const isCompound = (nodeModel?.$node.children?.length ?? 0) > 0;
   const _width = Math.min(700, windowWidth - MIN_PADDING * 2);
   const _height = Math.min(650, windowHeight - MIN_PADDING * 2);
   const fromPositon = rectFromNode ? {
@@ -135,19 +132,18 @@ function ElementDetailsCard({
     [],
     50
   );
-  const notation = (nodeModel == null ? void 0 : nodeModel.$node.notation) ?? null;
+  const notation = nodeModel?.$node.notation ?? null;
   const elementIcon$1 = IconRenderer({
     element: {
       id: fqn,
       title: elementModel.title,
-      icon: (nodeModel == null ? void 0 : nodeModel.icon) ?? elementModel.icon
+      icon: nodeModel?.icon ?? elementModel.icon
     },
     className: elementIcon
   });
   useTimeoutEffect(() => {
-    var _a2, _b2;
-    if (!((_a2 = ref.current) == null ? void 0 : _a2.open)) {
-      (_b2 = ref.current) == null ? void 0 : _b2.showModal();
+    if (!ref.current?.open) {
+      ref.current?.showModal();
     }
   }, 20);
   useTimeoutEffect(() => {
@@ -157,12 +153,12 @@ function ElementDetailsCard({
     m.dialog,
     {
       ref,
-      className: clsx(dialog, RemoveScroll.classNames.fullWidth),
+      className: cx(dialog, RemoveScroll.classNames.fullWidth),
       layout: true,
       layoutRoot: true,
       initial: {
         [backdropBlur]: "0px",
-        [backdropOpacity]: "10%"
+        [backdropOpacity]: "5%"
       },
       animate: {
         [backdropBlur]: "3px",
@@ -176,10 +172,9 @@ function ElementDetailsCard({
         }
       },
       onClick: (e) => {
-        var _a2, _b2, _c2;
         e.stopPropagation();
-        if (((_b2 = (_a2 = e.target) == null ? void 0 : _a2.nodeName) == null ? void 0 : _b2.toUpperCase()) === "DIALOG") {
-          (_c2 = ref.current) == null ? void 0 : _c2.close();
+        if (e.target?.nodeName?.toUpperCase() === "DIALOG") {
+          ref.current?.close();
         }
       },
       onDoubleClick: stopPropagation,
@@ -199,7 +194,12 @@ function ElementDetailsCard({
           withBorder: true,
           shadow: "md",
           component: m.div,
-          className: card,
+          className: cx(
+            css({
+              likec4Palette: nodeModel?.color ?? elementModel.color
+            }),
+            card
+          ),
           initial: {
             top,
             left,
@@ -208,7 +208,7 @@ function ElementDetailsCard({
             opacity: 0,
             originX,
             originY,
-            scale: Math.max(fromScale, 0.7)
+            scale: Math.max(fromScale, 0.65)
           },
           animate: {
             opacity: 1,
@@ -227,7 +227,6 @@ function ElementDetailsCard({
             width,
             height
           },
-          "data-likec4-color": (nodeModel == null ? void 0 : nodeModel.color) ?? elementModel.color,
           children: [
             /* @__PURE__ */ jsxs(
               Box,
@@ -425,14 +424,14 @@ const ViewButton = ({
   ] }) });
 };
 function ElementProperty({
-  title: title2,
+  title,
   emptyValue = `undefined`,
   children,
   style,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(PropertyLabel, { children: title2 }),
+    /* @__PURE__ */ jsx(PropertyLabel, { children: title }),
     /* @__PURE__ */ jsx(
       Text,
       {
@@ -457,6 +456,5 @@ function ElementMetata({
     /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Code, { block: true, children: JSON.stringify(value, null, 2) }) })
   ] });
 }
-export {
-  ElementDetailsCard
-};
+
+export { ElementDetailsCard };

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

@@ -1,11 +1,62 @@
-/* empty css                                       */
-var treeNode = "_6nb9wd0";
-var treeNodeLabel = "_6nb9wd1";
-var nodeLabel = "_6nb9wd3 _6nb9wd2";
-var instanceLabel = "_6nb9wd4 _6nb9wd2";
-export {
-  instanceLabel,
-  nodeLabel,
-  treeNode,
-  treeNodeLabel
-};
+import { css, cx } from '@likec4/styles/css';
+
+const treeNode = css({
+  [`&[data-level='1']`]: {
+    marginBottom: "sm"
+  }
+});
+const treeNodeLabel = css({
+  cursor: "default",
+  marginTop: 0,
+  marginBottom: 0
+});
+const label = css({
+  transition: "fast",
+  color: "mantine.colors.gray[7]",
+  _dark: {
+    color: "mantine.colors.dark[1]"
+  },
+  "& > *": {
+    transition: "fast"
+  },
+  _hover: {
+    transitionTimingFunction: "out",
+    "& > :not([data-no-transform])": {
+      transitionTimingFunction: "out",
+      transform: "translateX(1px)"
+    }
+  }
+  //   '.mantine-Button-root:hover & > :not([data-no-transform])': {
+  // transitionTimingFunction: 'out',
+  //   transform: 'translateX(1px)',
+  //   },
+});
+const nodeLabel = cx(label);
+const instanceLabel = cx(
+  label,
+  css({
+    cursor: "pointer",
+    width: "100%",
+    justifyContent: "stretch",
+    flexWrap: "nowrap",
+    height: "36px",
+    paddingInlineStart: "16px",
+    paddingInlineEnd: "10px",
+    borderRadius: "sm",
+    alignItems: "center",
+    color: "mantine.colors.gray[7]",
+    _dark: {
+      color: "mantine.colors.gray.lightColor"
+    },
+    _hover: {
+      background: "mantine.colors.gray.lightHover"
+    },
+    "& .tabler-icon": {
+      transition: "fast",
+      width: "90%",
+      opacity: 0.65
+    }
+  })
+);
+
+export { instanceLabel, nodeLabel, treeNode, treeNodeLabel };

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

@@ -1,11 +1,12 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useTree, Alert, Tree, Box, rem, Button, Group, Text, ThemeIcon, Menu } from "@mantine/core";
-import { IconInfoCircle, IconTarget, IconZoomScan } from "@tabler/icons-react";
-import { memo, useMemo, useEffect } from "react";
-import { useDiagram } from "../../hooks/useDiagram.js";
-import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
-import { treeNodeLabel, treeNode, nodeLabel, instanceLabel } from "./TabPanelDeployments.css.js";
-import { stopPropagation } from "../../utils/xyflow.js";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTree, Alert, Tree, Box, rem, Button, Group, Text, ThemeIcon, Menu } from '@mantine/core';
+import { IconInfoCircle, IconTarget, IconZoomScan } from '@tabler/icons-react';
+import { memo, useMemo, useEffect } from 'react';
+import { useDiagram } from '../../hooks/useDiagram.js';
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { treeNodeLabel, treeNode, nodeLabel, instanceLabel } from './TabPanelDeployments.css.js';
+import { stopPropagation } from '../../utils/xyflow.js';
+
 const DeploymentNodeRenderer = ({
   node
 }) => /* @__PURE__ */ jsxs(Group, { className: nodeLabel, gap: 6, align: "baseline", wrap: "nowrap", children: [
@@ -167,6 +168,5 @@ const TabPanelDeployments = memo(({ elementFqn }) => {
     )
   );
 });
-export {
-  TabPanelDeployments
-};
+
+export { TabPanelDeployments };

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

@@ -1,9 +1,99 @@
-/* empty css                                         */
-var fqn = "k4m020";
-var relationshipStat = "k4m021";
-var xyflow = "k4m022";
-export {
-  fqn,
-  relationshipStat,
-  xyflow
-};
+import { css } from '@likec4/styles/css';
+
+const fqn = css({
+  display: "inline-block",
+  fontSize: "sm",
+  fontWeight: 500,
+  whiteSpace: "nowrap",
+  padding: "3px 6px",
+  borderRadius: 3,
+  background: `likec4.palette.fill/75`,
+  lineHeight: 1.2,
+  color: "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`,
+    borderColor: `mantine.colors.orange[5]/20`,
+    _light: {
+      color: "mantine.colors.orange[8]"
+    }
+  }
+});
+const xyflow = css({
+  flex: "1 1 100%",
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  background: "mantine.colors.body",
+  border: `1px solid {colors.mantine.colors.defaultBorder}`,
+  borderRadius: "sm",
+  _light: {
+    borderColor: "mantine.colors.gray[3]",
+    background: "mantine.colors.gray[1]"
+  }
+});
+css({
+  _before: {
+    content: '"scope:"',
+    position: "absolute",
+    top: 0,
+    left: 8,
+    fontSize: "2xs",
+    fontWeight: 500,
+    lineHeight: "1",
+    color: "mantine.colors.dimmed",
+    opacity: 0.85,
+    transform: "translateY(-100%) translateY(-2px)"
+  },
+  _light: {
+    "& .mantine-SegmentedControl-root": {
+      background: "mantine.colors.gray[3]"
+    }
+  }
+});
+css({
+  display: "inline-block",
+  fontSize: "xl",
+  fontWeight: 600,
+  padding: "1px 5px",
+  minWidth: 24,
+  textAlign: "center",
+  borderRadius: "sm",
+  background: "mantine.colors.dark[7]",
+  color: "mantine.colors.defaultColor",
+  [`&[data-zero]`]: {
+    color: "mantine.colors.dimmed"
+  },
+  [`&[data-missing]`]: {
+    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

@@ -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 };