@likec4/diagram 1.47.0 → 1.49.0

package/dist/node_modules/.pnpm/@xstate_store@3.14.0_react@19.2.4/node_modules/@xstate/store/react/dist/xstate-store-react.cjs.js

@@ -0,0 +1,175 @@
+import { __exports as xstateStoreReact_cjs } from '../../../../../../../../_virtual/xstate-store-react.cjs2.js';
+import require$$0 from 'react';
+import { __require as requireStore1b2fbb72_cjs } from '../../dist/store-1b2fbb72.cjs.js';
+
+var hasRequiredXstateStoreReact_cjs;
+
+function requireXstateStoreReact_cjs () {
+	if (hasRequiredXstateStoreReact_cjs) return xstateStoreReact_cjs;
+	hasRequiredXstateStoreReact_cjs = 1;
+
+	Object.defineProperty(xstateStoreReact_cjs, '__esModule', { value: true });
+
+	var react = require$$0;
+	var store = /*@__PURE__*/ requireStore1b2fbb72_cjs();
+
+	function defaultCompare(a, b) {
+	  return a === b;
+	}
+	function identity(snapshot) {
+	  return snapshot;
+	}
+	function useSelectorWithCompare(selector, compare) {
+	  const previous = react.useRef(undefined);
+	  return snapshot => {
+	    const next = selector(snapshot);
+	    return previous.current && compare(previous.current, next) ? previous.current : previous.current = next;
+	  };
+	}
+
+	/**
+	 * A React hook that subscribes to the `store` and selects a value from the
+	 * store's snapshot via a selector function, with an optional compare function.
+	 *
+	 * @example
+	 *
+	 * ```ts
+	 * function Component() {
+	 *   const count = useSelector(store, (s) => s.count);
+	 *
+	 *   return <div>{count}</div>;
+	 * }
+	 * ```
+	 *
+	 * @param store The store, created from `createStore(…)`
+	 * @param selector A function which takes in the `snapshot` and returns a
+	 *   selected value
+	 * @param compare An optional function which compares the selected value to the
+	 *   previous value
+	 * @returns The selected value
+	 */
+
+	/**
+	 * A React hook that subscribes to the `store` and selects a value from the
+	 * store's snapshot via an optional selector function (identity by default),
+	 * with an optional compare function.
+	 *
+	 * @example
+	 *
+	 * ```ts
+	 * function Component() {
+	 *   const countSnapshot = useSelector(store);
+	 *
+	 *   return <div>{countSnapshot.context.count}</div>;
+	 * }
+	 * ```
+	 *
+	 * @param store The store, created from `createStore(…)`
+	 * @param selector An optional function which takes in the `snapshot` and
+	 *   returns a selected value
+	 * @param compare An optional function which compares the selected value to the
+	 *   previous value
+	 * @returns The selected value
+	 */
+
+	function useSelector(store, selector = identity, compare = defaultCompare) {
+	  const selectorWithCompare = useSelectorWithCompare(selector, compare);
+	  return react.useSyncExternalStore(react.useCallback(handleStoreChange => store.subscribe(handleStoreChange).unsubscribe, [store]), () => selectorWithCompare(store.get()), () => selectorWithCompare(store.get()));
+	}
+	const useStore = function useStoreImpl(definition) {
+	  const storeRef = react.useRef(undefined);
+	  if (!storeRef.current) {
+	    storeRef.current = store.createStore(definition);
+	  }
+	  return storeRef.current;
+	};
+
+	/**
+	 * A React hook that subscribes to the `atom` and returns the current value of
+	 * the atom.
+	 *
+	 * @example
+	 *
+	 * ```ts
+	 * const atom = createAtom(0);
+	 *
+	 * const Component = () => {
+	 *   const count = useAtom(atom);
+	 *
+	 *   return (
+	 *     <div>
+	 *       <div>{count}</div>
+	 *       <button onClick={() => atom.set((c) => c + 1)}>Increment</button>
+	 *     </div>
+	 *   );
+	 * };
+	 * ```
+	 *
+	 * @param atom The atom, created from `createAtom(…)`
+	 * @param selector An optional function which takes in the `snapshot` and
+	 *   returns a selected value
+	 * @param compare An optional function which compares the selected value to the
+	 *   previous value
+	 */
+
+	function useAtom(atom, selector = identity, compare = defaultCompare) {
+	  const state = useSelector(atom, selector, compare);
+	  return state;
+	}
+
+	/**
+	 * Creates a custom hook that returns the selected value and the store from a
+	 * store configuration object.
+	 *
+	 * @example
+	 *
+	 * ```ts
+	 * const useCountStore = createStoreHook({
+	 *   context: { count: 0 },
+	 *   on: {
+	 *     inc: (context, event: { by: number }) => ({
+	 *       ...context,
+	 *       count: context.count + event.by
+	 *     })
+	 *   }
+	 * });
+	 *
+	 * function Component() {
+	 *   const [count, store] = useCountStore(s => s.context.count);
+	 *
+	 *   return (
+	 *     <div>
+	 *       {count}
+	 *       <button onClick={() => store.trigger.inc({ by: 1 })}>+</button>
+	 *     </div>
+	 *   );
+	 * }
+	 * ```
+	 *
+	 * @param definition The store configuration object
+	 * @returns A custom hook that returns [selectedValue, store]
+	 */
+	function createStoreHook(definition) {
+	  const store$1 = store.createStore(definition);
+	  function useStoreHook(selector, compare = defaultCompare) {
+	    // If no selector provided, return full snapshot
+	    if (!selector) {
+	      const snapshot = useSelector(store$1, identity, defaultCompare);
+	      return [snapshot, store$1];
+	    }
+
+	    // Use selector with comparison
+	    const selectedValue = useSelector(store$1, selector ?? identity, compare);
+	    return [selectedValue, store$1];
+	  }
+	  return useStoreHook;
+	}
+
+	xstateStoreReact_cjs.createStoreHook = createStoreHook;
+	xstateStoreReact_cjs.useAtom = useAtom;
+	xstateStoreReact_cjs.useSelector = useSelector;
+	xstateStoreReact_cjs.useStore = useStore;
+	return xstateStoreReact_cjs;
+}
+
+export { requireXstateStoreReact_cjs as __require };

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

@@ -29,7 +29,7 @@ const card = css({
   padding: "4",
   gap: "lg",
   justifyContent: "stretch",
-  color: "mantine.colors.text",
+  color: "text",
   boxShadow: "md",
   overflow: "hidden",
   border: "none",
@@ -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"
@@ -95,19 +95,19 @@ const iconColor = "--icon-color";
 const viewButton = css({
   // display: 'flex',
   width: "100%",
-  background: "mantine.colors.body",
+  background: "body",
   borderRadius: "sm",
   padding: `[10px 8px]`,
   // gap: 6,
   // alignItems: 'flex-start',
   transition: "fast",
   border: `1px dashed`,
-  borderColor: "mantine.colors.defaultBorder",
+  borderColor: "default.border",
   [viewTitleColor]: "{colors.mantine.colors.dark[1]}",
   _hover: {
-    background: "mantine.colors.defaultHover",
+    background: "default.hover",
     [iconColor]: "{colors.mantine.colors.dark[1]}",
-    [viewTitleColor]: "{colors.mantine.colors.defaultColor}"
+    [viewTitleColor]: "{colors.default.color}"
   },
   _dark: {
     background: "mantine.colors.dark[6]"
@@ -125,7 +125,7 @@ const viewButton = css({
     color: `[var(${iconColor}, {colors.mantine.colors.dark[2]})]`,
     "--ti-size": "22px",
     _hover: {
-      color: "mantine.colors.defaultColor"
+      color: "default.color"
     }
   },
   "& > *": {
@@ -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",
@@ -173,23 +173,23 @@ const tabsTab = css({
   color: "mantine.colors.gray[7]",
   _hover: {
     transitionTimingFunction: "out",
-    color: "mantine.colors.defaultColor",
+    color: "default.color",
     background: "mantine.colors.gray[3]"
   },
   ["&[data-active]"]: {
     transition: "none",
-    background: "mantine.colors.white",
+    background: "white",
     shadow: "xs",
-    color: "mantine.colors.defaultColor"
+    color: "default.color"
   },
   _dark: {
     color: "mantine.colors.dark[1]",
     _hover: {
-      color: "mantine.colors.white",
+      color: "white",
       background: "mantine.colors.dark[6]"
     },
     [`&:is([data-active])`]: {
-      color: "mantine.colors.white",
+      color: "white",
       background: "mantine.colors.dark[5]"
     }
   }
@@ -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

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
 import { HStack } from '@likec4/styles/jsx';
-import { RemoveScroll, Text, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tooltip as Tooltip$1, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Box, Stack, Divider as Divider$1, UnstyledButton, Group, ThemeIcon } from '@mantine/core';
+import { RemoveScroll, Text, CloseButton, Badge, ActionIconGroup, ActionIcon, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Box, Stack, Flex, Tooltip as Tooltip$1, Divider as Divider$1, UnstyledButton, Group, ThemeIcon } from '@mantine/core';
 import { useViewportSize, useSessionStorage } from '@mantine/hooks';
-import { useSyncedRef, useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
+import { useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
 import { useDragControls, useMotionValue, m } from 'motion/react';
 import { useState, useCallback, useRef } from 'react';
 import { pipe, map, partition, only, clamp, isNullish, entries } from 'remeda';
@@ -13,6 +13,7 @@ import { useCurrentViewModel } from '../../hooks/useCurrentViewModel.js';
 import '@xstate/react';
 import 'fast-equals';
 import { useDiagram } from '../../hooks/safeContext.js';
+import { useCallbackRef } from '../../hooks/useCallbackRef.js';
 import { elementIcon, card, cardHeader, title, tabsPanel, tabsTab, tabsList, tabsRoot, propertiesGrid, resizeHandle, backdropOpacity, backdropBlur, dialog, propertyLabel, viewButton, viewButtonTitle } from './ElementDetailsCard.css.js';
 import { MetadataProvider, MetadataValue } from './MetadataValue.js';
 import { TabPanelDeployments } from './TabPanelDeployments.js';
@@ -21,12 +22,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.1_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.1_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.1_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.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
 
 const Divider = Divider$1.withProps({
   mb: 8,
@@ -126,16 +127,17 @@ function ElementDetailsCard({
   const handleDrag = useCallback((_, info) => {
     width.set(Math.max(width.get() + info.delta.x, 320));
     height.set(Math.max(height.get() + info.delta.y, 300));
-  }, []);
+  }, [width, height]);
   const ref = useRef(null);
-  const onCloseRef = useSyncedRef(onClose);
   const close = useDebouncedCallback(
-    () => {
-      onCloseRef.current();
-    },
+    useCallbackRef(onClose),
     [],
     50
   );
+  const triggerClose = useCallbackRef((event) => {
+    event?.stopPropagation();
+    close();
+  });
   const notation = nodeModel?.$node.notation ?? null;
   const elementIcon$1 = IconRenderer({
     element: {
@@ -182,10 +184,7 @@ function ElementDetailsCard({
       },
       onDoubleClick: stopPropagation,
       onPointerDown: stopPropagation,
-      onClose: (e) => {
-        e.stopPropagation();
-        close();
-      },
+      onClose: triggerClose,
       children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, removeScrollBar: false, children: /* @__PURE__ */ jsxs(
         m.div,
         {
@@ -241,16 +240,7 @@ function ElementDetailsCard({
                     notation && /* @__PURE__ */ jsx(Text, { component: "div", c: "dimmed", fz: "sm", fw: 500, lh: 1.3, lineClamp: 1, children: notation })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx(
-                  CloseButton,
-                  {
-                    size: "lg",
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      close();
-                    }
-                  }
-                )
+                /* @__PURE__ */ jsx(CloseButton, { size: "lg", onClick: triggerClose })
               ] }),
               /* @__PURE__ */ jsxs(HStack, { alignItems: "baseline", gap: "sm", flexWrap: "nowrap", children: [
                 /* @__PURE__ */ jsxs("div", { children: [
@@ -275,21 +265,13 @@ function ElementDetailsCard({
                 ] }),
                 /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
                   /* @__PURE__ */ jsx(SmallLabel, { children: "tags" }),
-                  /* @__PURE__ */ jsxs(Flex, { gap: 4, flex: 1, mt: 6, wrap: "wrap", children: [
-                    elementModel.tags.map((tag) => /* @__PURE__ */ jsx(
-                      ElementTag,
-                      {
-                        tag,
-                        cursor: "pointer",
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          diagram.openSearch(`#${tag}`);
-                        }
-                      },
-                      tag
-                    )),
-                    elementModel.tags.length === 0 && /* @__PURE__ */ jsx(Badge, { radius: "sm", size: "sm", fw: 600, color: "gray", children: "—" })
-                  ] })
+                  /* @__PURE__ */ jsx(
+                    ElementTags,
+                    {
+                      tags: elementModel.tags,
+                      onClick: (tag) => diagram.openSearch(`#${tag}`)
+                    }
+                  )
                 ] }),
                 /* @__PURE__ */ jsxs(
                   ActionIconGroup,
@@ -498,5 +480,22 @@ function ElementMetata({
     )
   ] }) });
 }
+function ElementTags({ tags, onClick }) {
+  return /* @__PURE__ */ jsxs(Flex, { gap: 4, flex: 1, mt: 6, wrap: "wrap", children: [
+    tags.map((tag) => /* @__PURE__ */ jsx(
+      ElementTag,
+      {
+        tag,
+        cursor: "pointer",
+        onClick: (e) => {
+          e.stopPropagation();
+          onClick(tag);
+        }
+      },
+      tag
+    )),
+    tags.length === 0 && /* @__PURE__ */ jsx(Badge, { radius: "sm", size: "sm", fw: 600, color: "gray", children: "—" })
+  ] });
+}
 
 export { ElementDetailsCard };

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.1_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.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 function MetadataProvider({ children }) {
   return /* @__PURE__ */ jsx(Fragment, { children });
@@ -32,7 +32,7 @@ function TruncatedValue({ value, isExpanded }) {
             fontSize: "sm",
             padding: "xs",
             userSelect: "all",
-            color: "mantine.colors.text",
+            color: "text",
             lineHeight: 1.4,
             whiteSpace: isExpanded ? "pre-wrap" : "nowrap",
             overflow: isExpanded ? "visible" : "hidden",
@@ -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]"
@@ -104,8 +104,8 @@ function MultiValueDisplay({
             className: css({
               fontSize: "sm",
               padding: "[4px 8px]",
-              backgroundColor: "mantine.colors.white",
-              color: "mantine.colors.text",
+              backgroundColor: "white",
+              color: "text",
               borderRadius: "sm",
               border: "1px solid",
               borderColor: "mantine.colors.gray[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]"
@@ -159,7 +158,7 @@ function MetadataValue({ label, value }) {
         onClick: handleToggle,
         className: css({
           fontSize: "xs",
-          color: "mantine.colors.dimmed",
+          color: "text.dimmed",
           justifySelf: "end",
           textAlign: "right",
           userSelect: "none",
@@ -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]",
@@ -213,13 +212,13 @@ function MetadataValue({ label, value }) {
         component: "div",
         className: css({
           fontSize: "xs",
-          color: "mantine.colors.dimmed",
+          color: "text.dimmed",
           justifySelf: "end",
           textAlign: "right",
           userSelect: "none",
           whiteSpace: "nowrap",
           padding: "[4px 8px]",
-          fontWeight: 700
+          fontWeight: "[700]"
         }),
         children: [
           label,

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

@@ -1,15 +1,15 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useTree, Alert, Tree, Box, rem, Button, Group, Text, ThemeIcon, Menu } from '@mantine/core';
+import { useTree, Alert, Tree, Box, Button, rem, Group, Text, ThemeIcon, Menu } from '@mantine/core';
 import { memo, useMemo, useEffect } from 'react';
 import '@xstate/react';
 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.1_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.1_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.1_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`,
@@ -40,8 +30,8 @@ const xyflow = css({
   position: "relative",
   width: "100%",
   height: "100%",
-  background: "mantine.colors.body",
-  border: `1px solid {colors.mantine.colors.defaultBorder}`,
+  background: "body",
+  border: "default",
   borderRadius: "sm",
   _light: {
     borderColor: "mantine.colors.gray[3]",
@@ -55,9 +45,9 @@ css({
     top: "0",
     left: "2",
     fontSize: "xxs",
-    fontWeight: 500,
+    fontWeight: "medium",
     lineHeight: "1",
-    color: "mantine.colors.dimmed",
+    color: "text.dimmed",
     opacity: 0.85,
     transform: "translateY(-100%) translateY(-2px)"
   },
@@ -70,30 +60,20 @@ 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]",
-  color: "mantine.colors.defaultColor",
+  color: "default.color",
   [`&[data-zero]`]: {
-    color: "mantine.colors.dimmed"
+    color: "text.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 };