@likec4/diagram 1.48.0 → 1.50.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",
@@ -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"
     }
   },
   "& > *": {
@@ -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]"
     }
   }

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.4/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.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 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.4/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,
@@ -89,7 +90,7 @@ function ElementDetailsCard({
   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 ? {
+  const fromPosition = rectFromNode ? {
     x: rectFromNode.x + (isCompound ? rectFromNode.width - _width / 2 : rectFromNode.width / 2),
     y: rectFromNode.y + (isCompound ? 0 : rectFromNode.height / 2)
   } : {
@@ -98,22 +99,22 @@ function ElementDetailsCard({
   };
   const fromScale = rectFromNode ? Math.min(rectFromNode.width / _width, rectFromNode.height / _height, 0.9) : 1;
   const left = Math.round(
-    clamp(fromPositon.x - _width / 2, {
+    clamp(fromPosition.x - _width / 2, {
       min: MIN_PADDING,
       max: windowWidth - _width - MIN_PADDING
     })
   );
   const top = Math.round(
-    clamp(fromPositon.y - (isCompound ? 0 : 60), {
+    clamp(fromPosition.y - (isCompound ? 0 : 60), {
       min: MIN_PADDING,
       max: windowHeight - _height - MIN_PADDING
     })
   );
-  const originX = clamp((fromPositon.x - left) / _width, {
+  const originX = clamp((fromPosition.x - left) / _width, {
     min: 0.1,
     max: 0.9
   });
-  const originY = clamp((fromPositon.y - top) / _height, {
+  const originY = clamp((fromPosition.y - top) / _height, {
     min: 0.1,
     max: 0.9
   });
@@ -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.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';
+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",
@@ -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]",
@@ -158,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",
@@ -212,7 +212,7 @@ function MetadataValue({ label, value }) {
         component: "div",
         className: css({
           fontSize: "xs",
-          color: "mantine.colors.dimmed",
+          color: "text.dimmed",
           justifySelf: "end",
           textAlign: "right",
           userSelect: "none",

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.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 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.4/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

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

@@ -30,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]",
@@ -47,7 +47,7 @@ css({
     fontSize: "xxs",
     fontWeight: "medium",
     lineHeight: "1",
-    color: "mantine.colors.dimmed",
+    color: "text.dimmed",
     opacity: 0.85,
     transform: "translateY(-100%) translateY(-2px)"
   },
@@ -66,9 +66,9 @@ css({
   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]",

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.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.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,7 +2,7 @@ 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.4/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

package/dist/overlays/element-details/actorContext.d.ts

@@ -1,7 +1,7 @@
 import { ElementDetailsActorRef } from './actor';
 import { Context } from 'react';
 /**
- * To improve experience with HMR, we use `createSafeContext` as a boundary for hoooks
+ * To improve experience with HMR, we use `createSafeContext` as a boundary for hooks
  */
 export declare const ElementDetailsActorContext: Context<ElementDetailsActorRef>;
 export declare const useElementDetailsActorRef: () => ElementDetailsActorRef;

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

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.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';
+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,

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

@@ -5,7 +5,7 @@ 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: "medium",
     lineHeight: "1.2"
@@ -30,7 +30,7 @@ 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%",
@@ -38,7 +38,7 @@ const edgeLabel = cx(
       fontSize: "xxs",
       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.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';
+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,