@likec4/diagram 1.20.2 → 1.21.0

package/dist/likec4diagram/useLayoutConstraints.js

@@ -10,12 +10,23 @@ import { useSyncedRef } from "@react-hookz/web";
 import { useDiagram } from "../hooks/useDiagram.js";
 import { useXYStoreApi } from "../hooks/useXYFlow.js";
 class Rect {
-  constructor() {
+  constructor(xynode, parent = null) {
     __publicField(this, "id");
     __publicField(this, "minX", Infinity);
     __publicField(this, "minY", Infinity);
     __publicField(this, "maxX", -Infinity);
     __publicField(this, "maxY", -Infinity);
+    this.id = xynode.id;
+    this.positionAbsolute = !parent ? xynode.position : {
+      x: xynode.position.x + parent.minX,
+      y: xynode.position.y + parent.minY
+    };
+    const { width, height } = getNodeDimensions(xynode);
+    this.maxX = this.minX + Math.ceil(width);
+    this.maxY = this.minY + Math.ceil(height);
+    if (parent) {
+      parent.children.push(this);
+    }
   }
   get positionAbsolute() {
     return {
@@ -56,27 +67,15 @@ __publicField(Rect, "TopPadding", 55);
 __publicField(Rect, "BottomPadding", 40);
 class Compound extends Rect {
   constructor(xynode, parent = null) {
-    super();
+    super(xynode, parent);
     __publicField(this, "children", []);
     this.parent = parent;
-    this.id = xynode.id;
-    if (parent) {
-      parent.children.push(this);
-    }
   }
 }
 class Leaf extends Rect {
   constructor(xynode, parent = null) {
-    super();
+    super(xynode, parent);
     this.parent = parent;
-    this.id = xynode.id;
-    this.positionAbsolute = xynode.internals.positionAbsolute;
-    const { width, height } = getNodeDimensions(xynode);
-    this.maxX = this.minX + Math.ceil(width);
-    this.maxY = this.minY + Math.ceil(height);
-    if (parent) {
-      parent.children.push(this);
-    }
   }
 }
 function createLayoutConstraints(xyflowApi, editingNodeIds) {

package/dist/likec4diagram/useViewToNodesEdges.js

@@ -80,7 +80,7 @@ function viewToNodesEdge(opts) {
       shape: node.shape,
       style: node.style,
       depth: node.depth ?? 0,
-      icon: node.icon ?? null,
+      icon: node.icon ?? "none",
       position: node.position
     };
     const leafNodeData = {

package/dist/overlays/Overlays.js

@@ -1,11 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Notification, Code, Group, Button } from "@mantine/core";
+import { useCallbackRef } from "@mantine/hooks";
 import { IconX } from "@tabler/icons-react";
-import { useReducedMotion, AnimatePresence } from "framer-motion";
+import { deepEqual } from "fast-equals";
+import { useReducedMotion } from "framer-motion";
 import { animate } from "framer-motion/dom";
 import { memo, useMemo, useEffect } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { useDiagramActor, useDiagramActorState } from "../hooks/useDiagramActor.js";
+import { useDiagram } from "../hooks/useDiagram.js";
+import { useDiagramActorState } from "../hooks/useDiagramActor.js";
 import { ElementDetailsCard } from "./element-details/ElementDetailsCard.js";
 import { Overlay } from "./overlay/Overlay.js";
 import { RelationshipDetails } from "./relationship-details/RelationshipDetails.js";
@@ -34,24 +37,32 @@ function Fallback({ error, resetErrorBoundary }) {
     }
   ) });
 }
+const selector = (s) => {
+  var _a, _b, _c;
+  return {
+    relationshipsBrowserActor: s.children.relationshipsBrowser,
+    relationshipDetailsActor: s.children.relationshipDetails,
+    viewId: s.context.view.id,
+    activeElementDetailsOf: ((_a = s.context.activeElementDetails) == null ? void 0 : _a.fqn) ?? null,
+    fromNode: ((_b = s.context.activeElementDetails) == null ? void 0 : _b.fromNode) ?? null,
+    rectFromNode: ((_c = s.context.activeElementDetails) == null ? void 0 : _c.nodeRectScreen) ?? null
+  };
+};
+const equals = (a, b) => a.relationshipDetailsActor == b.relationshipDetailsActor && a.relationshipsBrowserActor == b.relationshipsBrowserActor && a.activeElementDetailsOf === b.activeElementDetailsOf && a.viewId === b.viewId && a.fromNode === b.fromNode && deepEqual(a.rectFromNode, b.rectFromNode);
 const Overlays = memo(() => {
   const xyflowDomNode = useXYStore((s) => s.domNode);
   const xyflowRendererDom = useMemo(() => (xyflowDomNode == null ? void 0 : xyflowDomNode.querySelector(".react-flow__renderer")) ?? null, [
     xyflowDomNode
   ]);
-  const { send } = useDiagramActor();
+  const diagram = useDiagram();
   const {
     relationshipsBrowserActor,
     relationshipDetailsActor,
-    activeElementDetailsOf
-  } = useDiagramActorState((s) => {
-    var _a;
-    return {
-      relationshipsBrowserActor: s.children.relationshipsBrowser,
-      relationshipDetailsActor: s.children.relationshipDetails,
-      activeElementDetailsOf: ((_a = s.context.activeElementDetails) == null ? void 0 : _a.fqn) ?? null
-    };
-  });
+    activeElementDetailsOf,
+    viewId,
+    fromNode,
+    rectFromNode
+  } = useDiagramActorState(selector, equals);
   const isMotionReduced = useReducedMotion() ?? false;
   const isActiveOverlay = !!activeElementDetailsOf;
   useEffect(() => {
@@ -64,13 +75,14 @@ const Overlays = memo(() => {
       duration: isActiveOverlay ? 0.35 : 0.17
     });
   }, [isActiveOverlay, xyflowRendererDom]);
-  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback, onReset: () => send({ type: "close.overlay" }), children: /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+  const onClose = useCallbackRef(() => {
+    diagram.closeOverlay();
+  });
+  return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsxs(ErrorBoundary, { FallbackComponent: Fallback, onReset: onClose, children: [
     relationshipsBrowserActor && /* @__PURE__ */ jsx(
       Overlay,
       {
-        onClose: () => {
-          relationshipsBrowserActor.send({ type: "close" });
-        },
+        onClose,
         children: /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: relationshipsBrowserActor })
       },
       "relationships-browser"
@@ -78,16 +90,25 @@ const Overlays = memo(() => {
     relationshipDetailsActor && /* @__PURE__ */ jsx(
       Overlay,
       {
-        onClose: () => {
-          relationshipDetailsActor.send({ type: "close" });
-        },
+        onClose,
         children: /* @__PURE__ */ jsx(RelationshipDetails, { actorRef: relationshipDetailsActor })
       },
       "relationship-details"
     ),
-    activeElementDetailsOf && /* @__PURE__ */ jsx(ElementDetailsCard, { fqn: activeElementDetailsOf })
-  ] }) }) });
+    !!activeElementDetailsOf && /* @__PURE__ */ jsx(
+      ElementDetailsCard,
+      {
+        fqn: activeElementDetailsOf,
+        viewId,
+        fromNode,
+        rectFromNode,
+        onClose
+      },
+      "element-details"
+    )
+  ] }) });
 });
+Overlays.displayName = "Overlays";
 export {
   Overlays
 };

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

@@ -1,7 +1,11 @@
-import { Fqn } from '@likec4/core';
-import { MemoExoticComponent } from 'react';
+import { Fqn, NodeId, ViewId } from '@likec4/core';
+import { Rect } from '@xyflow/system';
 type ElementDetailsCardProps = {
+    viewId: ViewId;
+    fromNode: NodeId | null;
+    rectFromNode: Rect | null;
+    onClose: () => void;
     fqn: Fqn;
 };
-export declare const ElementDetailsCard: MemoExoticComponent<({ fqn }: ElementDetailsCardProps) => import("react/jsx-runtime").JSX.Element>;
+export declare function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose, }: ElementDetailsCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,22 +1,21 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { isScopedElementView, isDeploymentView } from "@likec4/core";
-import { Divider as Divider$1, Tooltip as Tooltip$1, Text, RemoveScroll, Card, FocusTrap, FocusTrapInitialFocus, Box, Group, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Stack, UnstyledButton, ThemeIcon, Code } from "@mantine/core";
-import { useViewportSize, useSessionStorage, useDebouncedCallback } from "@mantine/hooks";
+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 } from "@react-hookz/web";
 import { IconExternalLink, IconFileSymlink, IconZoomScan, IconStack2 } from "@tabler/icons-react";
-import "clsx";
 import { useDragControls, useMotionValue, m } from "framer-motion";
-import { memo, useCallback, useRef, useLayoutEffect } from "react";
+import { useCallback, useRef } from "react";
 import { pipe, map, partition, only, clamp, isNullish } from "remeda";
 import { useDiagram } from "../../hooks/useDiagram.js";
-import { useDiagramContext } from "../../hooks/useDiagramContext.js";
-import { propertyLabel, elementIcon, dialog, card, cardHeader, title, tabsRoot, tabsList, tabsTab, tabsPanel, propertiesGrid, resizeHandle, viewButton, viewButtonTitle } from "./ElementDetailsCard.css.js";
+import { dialog, card, cardHeader, title, tabsPanel, tabsTab, tabsList, tabsRoot, propertiesGrid, resizeHandle, elementIcon, 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 { IfEnabled } from "../../context/DiagramFeatures.js";
+import { IfEnabled, DiagramFeatures } from "../../context/DiagramFeatures.js";
 import { Link } from "../../base/Link.js";
 const Divider = Divider$1.withProps({
   mb: 8,
@@ -47,20 +46,14 @@ const PropertyLabel = Text.withProps({
 });
 const MIN_PADDING = 24;
 const TABS = ["Properties", "Relationships", "Views", "Structure", "Deployments"];
-const ElementDetailsCard = memo(({ fqn }) => {
+function ElementDetailsCard({
+  viewId,
+  fromNode,
+  rectFromNode,
+  fqn,
+  onClose
+}) {
   var _a, _b, _c;
-  const {
-    viewId,
-    fromNode,
-    rectFromNode
-  } = useDiagramContext((s) => {
-    var _a2, _b2;
-    return {
-      viewId: s.view.id,
-      fromNode: ((_a2 = s.activeElementDetails) == null ? void 0 : _a2.fromNode) ?? null,
-      rectFromNode: ((_b2 = s.activeElementDetails) == null ? void 0 : _b2.nodeRectScreen) ?? null
-    };
-  });
   const windowSize = useViewportSize();
   const windowWidth = windowSize.width || window.innerWidth || 1200, windowHeight = windowSize.height || window.innerHeight || 800;
   const [activeTab, setActiveTab] = useSessionStorage({
@@ -128,15 +121,12 @@ const ElementDetailsCard = memo(({ fqn }) => {
     height.set(Math.max(height.get() + info.delta.y, 300));
   }, []);
   const ref = useRef(null);
-  useLayoutEffect(() => {
-    var _a2;
-    (_a2 = ref.current) == null ? void 0 : _a2.showModal();
-  }, []);
-  const diagramApi = useDiagram();
+  const onCloseRef = useSyncedRef(onClose);
   const close = useDebouncedCallback(
     () => {
-      diagramApi.closeOverlay();
+      onCloseRef.current();
     },
+    [],
     50
   );
   const notation = (nodeModel == null ? void 0 : nodeModel.$node.notation) ?? null;
@@ -153,7 +143,6 @@ const ElementDetailsCard = memo(({ fqn }) => {
     {
       ref,
       className: dialog,
-      layoutRoot: true,
       initial: {
         "--backdrop-blur": "0px",
         "--backdrop-opacity": "10%"
@@ -169,6 +158,10 @@ const ElementDetailsCard = memo(({ fqn }) => {
           duration: 0.1
         }
       },
+      onAnimationStart: () => {
+        var _a2;
+        (_a2 = ref.current) == null ? void 0 : _a2.showModal();
+      },
       onClick: (e) => {
         var _a2, _b2;
         if (((_b2 = (_a2 = e.target) == null ? void 0 : _a2.nodeName) == null ? void 0 : _b2.toUpperCase()) === "DIALOG") {
@@ -180,7 +173,7 @@ const ElementDetailsCard = memo(({ fqn }) => {
         e.stopPropagation();
         close();
       },
-      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, children: /* @__PURE__ */ jsxs(
         Card,
         {
           drag: true,
@@ -192,7 +185,6 @@ const ElementDetailsCard = memo(({ fqn }) => {
           shadow: "md",
           component: m.div,
           className: card,
-          layoutId: fqn,
           initial: {
             top,
             left,
@@ -221,8 +213,7 @@ const ElementDetailsCard = memo(({ fqn }) => {
             height
           },
           "data-likec4-color": (nodeModel == null ? void 0 : nodeModel.color) ?? elementModel.color,
-          children: /* @__PURE__ */ jsxs(FocusTrap, { children: [
-            /* @__PURE__ */ jsx(FocusTrapInitialFocus, {}),
+          children: [
             /* @__PURE__ */ jsxs(
               Box,
               {
@@ -349,12 +340,21 @@ const ElementDetailsCard = memo(({ fqn }) => {
                     ] }),
                     elementModel.$element.metadata && /* @__PURE__ */ jsx(ElementMetata, { value: elementModel.$element.metadata })
                   ] }) }) }),
-                  /* @__PURE__ */ jsx(TabsPanel, { value: "Relationships", children: nodeModel && activeTab === "Relationships" && /* @__PURE__ */ jsx(
-                    TabPanelRelationships,
+                  /* @__PURE__ */ jsx(TabsPanel, { value: "Relationships", children: /* @__PURE__ */ jsx(
+                    DiagramFeatures,
                     {
-                      element: elementModel,
-                      node: nodeModel,
-                      currentView: diagram.currentView()
+                      overrides: {
+                        enableRelationshipBrowser: false,
+                        enableNavigateTo: false
+                      },
+                      children: !!nodeModel && activeTab === "Relationships" && /* @__PURE__ */ jsx(
+                        TabPanelRelationships,
+                        {
+                          element: elementModel,
+                          node: nodeModel,
+                          currentView: diagram.currentView()
+                        }
+                      )
                     }
                   ) }),
                   /* @__PURE__ */ jsx(TabsPanel, { value: "Views", children: /* @__PURE__ */ jsx(ScrollArea, { scrollbars: "y", type: "auto", children: /* @__PURE__ */ jsxs(Stack, { gap: "lg", children: [
@@ -397,13 +397,12 @@ const ElementDetailsCard = memo(({ fqn }) => {
                 dragConstraints: { top: 0, left: 0, right: 0, bottom: 0 }
               }
             )
-          ] })
+          ]
         }
       ) })
     }
   );
-});
-ElementDetailsCard.displayName = "ElementDetailsCard";
+}
 const ViewButton = ({
   view,
   onNavigateTo

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

@@ -4,7 +4,7 @@ import { IconInfoCircle, IconTarget, IconZoomScan } from "@tabler/icons-react";
 import { memo, useMemo, useEffect } from "react";
 import { useCurrentViewId } from "../../hooks/useCurrentViewId.js";
 import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
-import { treeNode, treeNodeLabel, nodeLabel, instanceLabel } from "./TabPanelDeployments.css.js";
+import { treeNodeLabel, treeNode, nodeLabel, instanceLabel } from "./TabPanelDeployments.css.js";
 import { stopPropagation } from "../../utils/xyflow.js";
 const DeploymentNodeRenderer = ({
   node

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

@@ -1,27 +1,23 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { nameFromFqn } from "@likec4/core";
 import { Stack, Group, Box, ThemeIcon, Text, Paper } from "@mantine/core";
-import { useId } from "@mantine/hooks";
 import { IconArrowRight, IconInfoCircle } from "@tabler/icons-react";
 import { useActorRef } from "@xstate/react";
-import { LayoutGroup } from "framer-motion";
-import { useState, memo } from "react";
+import { useState } from "react";
 import { unique } from "remeda";
 import { relationshipsBrowserActor } from "../relationships-browser/actor.js";
 import { RelationshipsBrowser } from "../relationships-browser/RelationshipsBrowser.js";
 import { fqn, xyflow, relationshipStat } from "./TabPanelRelationships.css.js";
-import { DiagramFeatures } from "../../context/DiagramFeatures.js";
 function TabPanelRelationships({
   currentView,
   node,
   element
 }) {
-  const layoutId = useId();
-  useState("view");
+  const [scope, setScope] = useState("view");
   const incoming = [...element.incoming()].map((r) => r.id);
   const outgoing = [...element.outgoing()].map((r) => r.id);
-  const incomingInView = unique(node.incoming().flatMap((e) => e.$edge.relations).toArray());
-  const outgoingInView = unique(node.outgoing().flatMap((e) => e.$edge.relations).toArray());
+  const incomingInView = unique([...node.incoming()].flatMap((e) => e.$edge.relations));
+  const outgoingInView = unique([...node.outgoing()].flatMap((e) => e.$edge.relations));
   const notIncludedRelations = [
     ...incoming,
     ...outgoing
@@ -68,7 +64,7 @@ function TabPanelRelationships({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(Box, { className: xyflow, children: /* @__PURE__ */ jsx(LayoutGroup, { id: layoutId, children: /* @__PURE__ */ jsx(EmbeddedRelationshipsBrowser, { subjectId: element.id, currentView }) }) })
+    /* @__PURE__ */ jsx(Box, { className: xyflow, children: /* @__PURE__ */ jsx(EmbeddedRelationshipsBrowser, { subjectId: element.id, currentView }) })
   ] });
 }
 function RelationshipsStat({
@@ -100,29 +96,17 @@ function RelationshipsStat({
     }
   );
 }
-const EmbeddedRelationshipsBrowser = memo(
-  ({ subjectId, currentView }) => {
-    const actor = useActorRef(relationshipsBrowserActor, {
-      input: {
-        subject: subjectId,
-        scope: currentView,
-        closeable: false,
-        enableNavigationMenu: false
-      }
-    });
-    return /* @__PURE__ */ jsx(
-      DiagramFeatures,
-      {
-        overrides: {
-          enableRelationshipBrowser: false,
-          enableNavigateTo: false
-        },
-        children: /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: actor })
-      }
-    );
-  },
-  (prev, next) => prev.subjectId === next.subjectId
-);
+const EmbeddedRelationshipsBrowser = ({ subjectId, currentView }) => {
+  const actor = useActorRef(relationshipsBrowserActor, {
+    input: {
+      subject: subjectId,
+      scope: currentView,
+      closeable: false,
+      enableNavigationMenu: false
+    }
+  });
+  return /* @__PURE__ */ jsx(RelationshipsBrowser, { actorRef: actor });
+};
 export {
   TabPanelRelationships
 };

package/dist/overlays/overlay/Overlay.css.js

@@ -2,12 +2,12 @@ import "../../node_modules/@mantine/core/esm/components/ScrollArea/ScrollArea.mo
 import "../../node_modules/@mantine/core/esm/components/UnstyledButton/UnstyledButton.module.css.mjs.vanilla.css.js";
 import "../../node_modules/@mantine/core/esm/components/VisuallyHidden/VisuallyHidden.module.css.mjs.vanilla.css.js";
 import "../../node_modules/@mantine/core/esm/components/Paper/Paper.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/Overlay/Overlay.module.css.mjs.vanilla.css.js";
 import "../../node_modules/@mantine/core/esm/components/Popover/Popover.module.css.mjs.vanilla.css.js";
 import "../../node_modules/@mantine/core/esm/components/Loader/Loader.module.css.mjs.vanilla.css.js";
 import "../../node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.module.css.mjs.vanilla.css.js";
 import "../../node_modules/@mantine/core/esm/components/CloseButton/CloseButton.module.css.mjs.vanilla.css.js";
 import "../../node_modules/@mantine/core/esm/components/Group/Group.module.css.mjs.vanilla.css.js";
-import "../../node_modules/@mantine/core/esm/components/Overlay/Overlay.module.css.mjs.vanilla.css.js";
 import "../../node_modules/@mantine/core/esm/components/ModalBase/ModalBase.module.css.mjs.vanilla.css.js";
 import "../../node_modules/@mantine/core/esm/components/Input/Input.module.css.mjs.vanilla.css.js";
 import "../../node_modules/@mantine/core/esm/components/Flex/Flex.module.css.mjs.vanilla.css.js";
@@ -78,6 +78,7 @@ import "../../node_modules/@mantine/core/esm/components/Stack/Stack.module.css.m
 import "../../node_modules/@mantine/core/esm/components/Stepper/Stepper.module.css.mjs.vanilla.css.js";
 import "../../node_modules/@mantine/core/esm/components/Switch/Switch.module.css.mjs.vanilla.css.js";
 import "../../node_modules/@mantine/core/esm/components/Table/Table.module.css.mjs.vanilla.css.js";
+import "../../node_modules/@mantine/core/esm/components/TableOfContents/TableOfContents.module.css.mjs.vanilla.css.js";
 import "../../node_modules/@mantine/core/esm/components/Tabs/Tabs.module.css.mjs.vanilla.css.js";
 import "../../node_modules/@mantine/core/esm/components/ThemeIcon/ThemeIcon.module.css.mjs.vanilla.css.js";
 import "../../node_modules/@mantine/core/esm/components/Timeline/Timeline.module.css.mjs.vanilla.css.js";

package/dist/overlays/overlay/Overlay.js

@@ -5,7 +5,7 @@ import { useSyncedRef, useDebouncedCallback } from "@react-hookz/web";
 import clsx from "clsx";
 import { m } from "framer-motion";
 import { forwardRef, useState, useRef, useLayoutEffect } from "react";
-import { dialog, body } from "./Overlay.css.js";
+import { body, dialog } from "./Overlay.css.js";
 const Overlay = forwardRef(({ children, onClose, className, ...rest }, ref) => {
   const [opened, setOpened] = useState(false);
   const dialogRef = useRef(null);
@@ -21,7 +21,7 @@ const Overlay = forwardRef(({ children, onClose, className, ...rest }, ref) => {
     var _a;
     const cancel = (e) => {
       e.preventDefault();
-      close();
+      onCloseRef.current();
     };
     (_a = dialogRef.current) == null ? void 0 : _a.addEventListener("cancel", cancel, { capture: true });
     return () => {

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import "@likec4/core";
 import { useComputedColorScheme, Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown, ScrollAreaAutosize } from "@mantine/core";
-import { IconSelector, IconArrowRight } from "@tabler/icons-react";
+import { IconArrowRight, IconSelector } from "@tabler/icons-react";
 import { useRef } from "react";
 import { useRelationshipDetails } from "./hooks.js";
 import { edgeSource, edgeTarget, scrollArea, edgeGrid, edgeRow, edgeArrow, edgeLabel } from "./SelectEdge.css.js";

package/dist/overlays/relationship-details/_types.d.ts

@@ -1,4 +1,4 @@
-import { Color, DiagramNode, Fqn, RelationId, RelationshipLineType, ViewId } from '@likec4/core';
+import { Color, DiagramNode, Fqn, IconUrl, RelationId, RelationshipLineType, ViewId } from '@likec4/core';
 import { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types';
 export declare namespace RelationshipDetailsTypes {
     /**
@@ -10,13 +10,13 @@ export declare namespace RelationshipDetailsTypes {
     };
     type ElementNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'height' | 'navigateTo' | 'style'>> & {
         fqn: Fqn;
-        icon: string | null;
+        icon: IconUrl;
         ports: Ports;
     }>;
     type CompoundNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'color' | 'shape' | 'style'>> & {
         fqn: Fqn;
         depth: number;
-        icon: string | null;
+        icon?: IconUrl;
         ports: Ports;
     }>;
     type ElementNode = ReactFlowNode<ElementNodeData, 'element'>;

package/dist/overlays/relationship-details/actor.js

@@ -1,7 +1,7 @@
 import { invariant } from "@likec4/core";
 import "@xyflow/react";
 import { prop } from "remeda";
-import { setup, assign, raise, cancel } from "xstate";
+import { setup, cancel, raise, assign } from "xstate";
 import { MinZoom } from "../../base/const.js";
 const relationshipDetailsActor = setup({
   types: {

package/dist/overlays/relationship-details/custom/nodeTypes.d.ts

@@ -1,7 +1,7 @@
 import { NodeProps } from '../../../base';
 import { RelationshipDetailsTypes } from '../_types';
 import { NamedExoticComponent } from 'react';
-import { ElementStyle, Color, ViewId, Fqn } from '@likec4/core';
+import { ElementStyle, Color, ViewId, Fqn, IconUrl } from '@likec4/core';
 export declare const nodeTypes: {
     element: NamedExoticComponent<NodeProps<{
         style: ElementStyle;
@@ -14,7 +14,7 @@ export declare const nodeTypes: {
         color: Color;
         navigateTo: ViewId<string> | null | undefined;
         fqn: Fqn;
-        icon: string | null;
+        icon: IconUrl;
         ports: RelationshipDetailsTypes.Ports;
         hovered?: boolean;
         dimmed?: import("../../../base").Base.Dimmed;
@@ -26,7 +26,7 @@ export declare const nodeTypes: {
         color: Color;
         fqn: Fqn;
         depth: number;
-        icon: string | null;
+        icon?: IconUrl;
         ports: RelationshipDetailsTypes.Ports;
         hovered?: boolean;
         dimmed?: import("../../../base").Base.Dimmed;

package/dist/overlays/relationship-details/custom/nodeTypes.js

@@ -3,11 +3,11 @@ import { ElementActions } from "./ElementActions.js";
 import { Handle } from "@xyflow/react";
 import { Position } from "@xyflow/system";
 import { customNode } from "../../../base/primitives/customNode.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 { ElementTitle } from "../../../base/primitives/element/ElementTitle.js";
-import { CompoundNodeContainer } from "../../../base/primitives/compound/CompoundNodeContainer.js";
-import { CompoundTitle } from "../../../base/primitives/compound/CompoundTitle.js";
 const nodeTypes = {
   element: customNode((props) => {
     return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [

package/dist/overlays/relationship-details/useLayoutedDetails.js

@@ -16,9 +16,6 @@ const Sizes = {
   },
   nodeWidth: 330,
   hodeHeight: 180,
-  // Spacer between elements in a compound node
-  // 0 means no spacer
-  spacerHeight: 0,
   compoundLabelHeight: 5
 };
 const ZIndexes = {
@@ -64,7 +61,7 @@ function nodeData(element, ctx) {
     description: (diagramNode == null ? void 0 : diagramNode.description) ?? element.description,
     color: (diagramNode == null ? void 0 : diagramNode.color) ?? (ancestor == null ? void 0 : ancestor.color) ?? element.color,
     shape: (diagramNode == null ? void 0 : diagramNode.shape) ?? element.shape,
-    icon: (diagramNode == null ? void 0 : diagramNode.icon) ?? element.icon,
+    icon: (diagramNode == null ? void 0 : diagramNode.icon) ?? element.icon ?? "none",
     style: (diagramNode == null ? void 0 : diagramNode.style) ?? element.$element.style ?? {},
     navigateTo: (diagramNode == null ? void 0 : diagramNode.navigateTo) ?? ((_a = first(element.scopedViews().take(1).toArray())) == null ? void 0 : _a.id) ?? null,
     width: 0,

package/dist/overlays/relationships-browser/-useRelationshipsView.js

@@ -18,9 +18,6 @@ const Sizes = {
   emptyNodeOffset: 120,
   nodeWidth: 330,
   nodeHeight: 180,
-  // Spacer between elements in a compound node
-  // 0 means no spacer
-  spacerHeight: 0,
   compound: {
     labelHeight: 2,
     paddingTop: 50,

package/dist/overlays/relationships-browser/RelationshipsBrowser.js

@@ -5,7 +5,7 @@ import { IconX, IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
 import { ReactFlowProvider, useStoreApi, Panel } from "@xyflow/react";
 import clsx from "clsx";
 import { shallowEqual } from "fast-equals";
-import { LayoutGroup, AnimatePresence, m } from "framer-motion";
+import { AnimatePresence, m } from "framer-motion";
 import { useRef, memo, useEffect } from "react";
 import { BaseXYFlow } from "../../base/BaseXYFlow.js";
 import { useRelationshipsView } from "./-useRelationshipsView.js";
@@ -43,7 +43,7 @@ const RelationshipsBrowserXYFlow = memo(() => {
     selector,
     selectorEq
   );
-  return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     BaseXYFlow,
     {
       id: "relationships-browser",
@@ -87,7 +87,7 @@ const RelationshipsBrowserXYFlow = memo(() => {
       zoomable: true,
       children: initialized && /* @__PURE__ */ jsx(RelationshipsBrowserInner, {})
     }
-  ) });
+  );
 });
 const selector2 = (state) => ({
   subjectId: state.context.subject,