@likec4/diagram 1.21.0 → 1.22.0

package/dist/LikeC4Diagram.js

@@ -4,7 +4,6 @@ import { useRef } from "react";
 import { isEmpty } from "remeda";
 import { LikeC4CustomColors } from "./LikeC4CustomColors.js";
 import { DiagramActor } from "./likec4diagram/DiagramActor.js";
-import { DiagramUI } from "./likec4diagram/DiagramUI.js";
 import { useViewToNodesEdges } from "./likec4diagram/useViewToNodesEdges.js";
 import { LikeC4DiagramXYFlow } from "./likec4diagram/XYFlow.js";
 import { useLikeC4Model } from "./likec4model/useLikeC4Model.js";
@@ -113,7 +112,7 @@ function LikeC4Diagram({
               {
                 fitView,
                 ...initialRef.current,
-                children: /* @__PURE__ */ jsxs(
+                children: /* @__PURE__ */ jsx(
                   DiagramActor,
                   {
                     input: {
@@ -123,17 +122,14 @@ function LikeC4Diagram({
                       fitViewPadding,
                       ...xyNodesEdges
                     },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        LikeC4DiagramXYFlow,
-                        {
-                          nodesDraggable,
-                          nodesSelectable,
-                          background
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(DiagramUI, {})
-                    ]
+                    children: /* @__PURE__ */ jsx(
+                      LikeC4DiagramXYFlow,
+                      {
+                        nodesDraggable,
+                        nodesSelectable,
+                        background
+                      }
+                    )
                   }
                 )
               }

package/dist/base/BaseXYFlow.js

@@ -38,7 +38,6 @@ const BaseXYFlow = ({
       nodes,
       edges,
       className: clsx(
-        "likec4-diagram",
         cssReactFlow,
         pannable !== true && cssDisablePan,
         background === "transparent" && cssTransparentBg,

package/dist/base/index.d.ts

@@ -1,3 +1,2 @@
 export { BaseXYFlow, type BaseXYFlowProps } from './BaseXYFlow';
 export { Base, type EdgeProps, type NodeProps, type NonOptional, type ReactFlowEdge, type ReactFlowNode, } from './types';
-export { Link } from './Link';

package/dist/base/primitives/compound/CompoundNodeContainer.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { createPolymorphicComponent, Box } from "@mantine/core";
-import { assignInlineVars } from "../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import clsx from "clsx";
 import { m } from "framer-motion";
 import { forwardRef } from "react";
 import { isNumber, clamp } from "remeda";
-import { indicator, compoundBg, compoundBorder, varCompoundOpacity, container, varBorderTransparency } from "./CompoundNodeContainer.css.js";
+import { indicator, compoundBg, compoundBorder, varBorderTransparency, varCompoundOpacity, container } from "./CompoundNodeContainer.css.js";
 const CompoundNodeContainer = createPolymorphicComponent(
   forwardRef(({
     nodeProps: {

package/dist/base/primitives/edge/EdgeLabel.js

@@ -1,14 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isStepEdgeId, extractStep } from "@likec4/core";
 import { createPolymorphicComponent, Box, Text } from "@mantine/core";
-import { assignInlineVars } from "../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { EdgeLabelRenderer } from "@xyflow/react";
 import clsx from "clsx";
 import { forwardRef } from "react";
 import { isTruthy, isNumber } from "remeda";
 import { useIsZoomTooSmall } from "../../../hooks/useXYFlow.js";
 import { ZIndexes } from "../../const.js";
-import { edgeLabel, stepEdgeNumber, secondColumn, edgeLabelText, edgeLabelTechnology, edgeVars, edgeLabelContainer, dimmed, varTranslate } from "./EdgeLabel.css.js";
+import { edgeLabel, stepEdgeNumber, secondColumn, edgeLabelText, edgeLabelTechnology, varTranslate, edgeVars, edgeLabelContainer, dimmed } from "./EdgeLabel.css.js";
 const toCssVarValue = (value) => {
   if (value === void 0) return void 0;
   return isNumber(value) ? `${value}px` : value;

package/dist/base/primitives/element/ElementNodeContainer.d.ts

@@ -1,4 +1,4 @@
-import { DiagramNode } from '@likec4/core';
+import { DiagramNode, ElementStyle, ShapeSize, SpacingSize, TextSize } from '@likec4/core';
 import { BoxProps, PolymorphicComponentProps } from '@mantine/core';
 import { PropsWithChildren, FunctionComponent, ReactNode } from 'react';
 import { NodeProps } from '../../types';
@@ -6,6 +6,11 @@ type RequiredData = Pick<DiagramNode, 'color' | 'shape' | 'style'>;
 type ElementNodeContainerProps = BoxProps & PropsWithChildren<{
     nodeProps: NodeProps<RequiredData>;
 }>;
+export declare function nodeSizes({ size, padding, textSize, }: ElementStyle): {
+    size: ShapeSize;
+    padding: SpacingSize;
+    textSize: TextSize;
+};
 export declare const ElementNodeContainer: (<C = "div">(props: PolymorphicComponentProps<C, ElementNodeContainerProps>) => React.ReactElement) & Omit< FunctionComponent<(BoxProps & {
     nodeProps: NodeProps<RequiredData>;
 } & {

package/dist/base/primitives/element/ElementNodeContainer.js

@@ -1,10 +1,33 @@
 import { jsx } from "react/jsx-runtime";
-import { DefaultTextSize, DefaultPaddingSize, DefaultShapeSize } from "@likec4/core";
+import { DefaultShapeSize, DefaultTextSize, DefaultPaddingSize } from "@likec4/core";
 import { createPolymorphicComponent, Box } from "@mantine/core";
 import clsx from "clsx";
 import { m } from "framer-motion";
 import { forwardRef } from "react";
 import { container } from "./ElementNodeContainer.css.js";
+function nodeSizes({
+  size,
+  padding,
+  textSize
+}) {
+  if (!size && !!textSize) {
+    size = textSize;
+  }
+  if (!textSize && !!size) {
+    textSize = size;
+  }
+  if (!padding && !!size) {
+    padding = size;
+  }
+  size ?? (size = DefaultShapeSize);
+  textSize ?? (textSize = DefaultTextSize);
+  padding ?? (padding = DefaultPaddingSize);
+  return {
+    size,
+    padding,
+    textSize
+  };
+}
 const ElementNodeContainer = createPolymorphicComponent(
   forwardRef(({
     nodeProps: {
@@ -28,17 +51,11 @@ const ElementNodeContainer = createPolymorphicComponent(
         scale = 1.02;
         break;
     }
-    let {
+    const {
       size,
       padding,
       textSize
-    } = data.style;
-    if (!size && !!textSize) {
-      size = textSize;
-    }
-    if (!textSize && !!size) {
-      textSize = size;
-    }
+    } = nodeSizes(data.style);
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -58,9 +75,9 @@ const ElementNodeContainer = createPolymorphicComponent(
         "data-hovered": isHovered,
         "data-likec4-color": data.color,
         "data-likec4-shape": data.shape,
-        "data-likec4-shape-size": size ?? DefaultShapeSize,
-        "data-likec4-padding": padding ?? DefaultPaddingSize,
-        "data-likec4-text-size": textSize ?? DefaultTextSize,
+        "data-likec4-shape-size": size,
+        "data-likec4-padding": padding,
+        "data-likec4-text-size": textSize,
         "data-likec4-dimmed": isDimmed,
         ...rest,
         children
@@ -70,5 +87,6 @@ const ElementNodeContainer = createPolymorphicComponent(
 );
 ElementNodeContainer.displayName = "ElementNodeContainer";
 export {
-  ElementNodeContainer
+  ElementNodeContainer,
+  nodeSizes
 };

package/dist/base/primitives/element/ElementTitle.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import "@likec4/core";
 import { Box, Text } from "@mantine/core";
-import { assignInlineVars } from "../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import clsx from "clsx";
 import { isNumber, isTruthy } from "remeda";
 import { IconRenderer } from "../../../context/IconRenderer.js";
 import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
+import { nodeSizes } from "./ElementNodeContainer.js";
 import { elementIcon, title, technology, description, elementTextData, elementDataContainer, hasIcon } from "./ElementTitle.css.js";
 import { iconSize } from "./styles.css.js";
 function ElementTitle({ id, data, iconSize: iconSize$1 }) {
@@ -17,6 +18,9 @@ function ElementTitle({ id, data, iconSize: iconSize$1 }) {
     },
     className: elementIcon
   });
+  const size = nodeSizes(data.style).size;
+  const isSm = size === "sm";
+  const isSmOrXs = isSm || size === "xs";
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -38,7 +42,7 @@ function ElementTitle({ id, data, iconSize: iconSize$1 }) {
             {
               component: "h3",
               className: clsx(title, "likec4-element-title"),
-              lineClamp: 3,
+              lineClamp: isSmOrXs ? 2 : 3,
               children: data.title
             }
           ),
@@ -55,7 +59,7 @@ function ElementTitle({ id, data, iconSize: iconSize$1 }) {
             {
               component: "div",
               className: clsx(description, "likec4-element-description"),
-              lineClamp: 5,
+              lineClamp: isSmOrXs ? 3 : 5,
               children: data.description
             }
           )

package/dist/base/primitives/element/styles.css.js

@@ -1,6 +1,6 @@
 /* empty css                                        */
 /* empty css                          */
-var iconSize = "var(--v7x5jk2)";
+var iconSize = "var(--likec4-icon-size)";
 export {
   iconSize
 };

package/dist/{base → components}/Link.css.js

@@ -1,7 +1,7 @@
 /* empty css                        */
-var elementLink = "_180738q0";
-var linkIcon = "_180738q1";
-var linkTitleBox = "_180738q2";
+var elementLink = "_1acgss10";
+var linkIcon = "_1acgss11";
+var linkTitleBox = "_1acgss12";
 export {
   elementLink,
   linkIcon,

package/dist/components/SearchControl.css.d.ts

@@ -0,0 +1,2 @@
+export declare const root: string;
+export declare const shortcut: string;

package/dist/components/SearchControl.css.js

@@ -0,0 +1,7 @@
+/* empty css                                 */
+var root = "xmhqho2";
+var shortcut = "xmhqho3";
+export {
+  root,
+  shortcut
+};

package/dist/components/SearchControl.d.ts

@@ -0,0 +1,5 @@
+import { ElementProps, UnstyledButtonProps } from '@mantine/core';
+interface SearchControlProps extends UnstyledButtonProps, ElementProps<'button'> {
+}
+export declare function SearchControl({ className, ...others }: SearchControlProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SearchControl.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { UnstyledButton, Group, rem, Text } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+import { isMacOs } from "@xyflow/system";
+import clsx from "clsx";
+import { shortcut, root } from "./SearchControl.css.js";
+function SearchControl({ className, ...others }) {
+  const isMac = isMacOs();
+  return /* @__PURE__ */ jsx(UnstyledButton, { ...others, className: clsx(root, className), children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+    /* @__PURE__ */ jsx(IconSearch, { style: { width: rem(15), height: rem(15) }, stroke: 2 }),
+    /* @__PURE__ */ jsx(Text, { fz: "sm", fw: "500", pr: 50, children: "Search" }),
+    /* @__PURE__ */ jsx(Text, { fw: 700, className: shortcut, children: isMac ? "⌘ + K" : "Ctrl + K" })
+  ] }) });
+}
+export {
+  SearchControl
+};

package/dist/context/IconRenderer.d.ts

@@ -1,3 +1,4 @@
+import { ElementShape } from '@likec4/core';
 import { ElementIconRenderer } from '../LikeC4Diagram.props';
 import { Provider } from 'react';
 export declare const IconRendererProvider: Provider<ElementIconRenderer | null>;
@@ -9,3 +10,12 @@ export declare function IconRenderer({ element, className, }: {
     };
     className: string;
 }): import("react/jsx-runtime").JSX.Element | null;
+export declare function IconOrShapeRenderer({ element, className, }: {
+    element: {
+        id: string;
+        title: string;
+        shape: ElementShape;
+        icon?: string | null | undefined;
+    };
+    className: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/context/IconRenderer.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { IconCylinder, IconRectangularPrism, IconReorder, IconUser, IconDeviceMobile, IconBrowser } from "@tabler/icons-react";
 import clsx from "clsx";
 import { createContext, useContext } from "react";
 const IconRendererContext = createContext(null);
@@ -32,7 +33,40 @@ function IconRenderer({
     }
   );
 }
+const ShapeIcons = {
+  browser: IconBrowser,
+  cylinder: IconCylinder,
+  mobile: IconDeviceMobile,
+  person: IconUser,
+  queue: IconReorder,
+  rectangle: IconRectangularPrism,
+  storage: IconCylinder
+};
+function IconOrShapeRenderer({
+  element,
+  className
+}) {
+  const icon = IconRenderer({
+    element,
+    className
+  });
+  if (icon) {
+    return icon;
+  }
+  const ShapeIcon = ShapeIcons[element.shape];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        className,
+        "likec4-shape-icon"
+      ),
+      children: /* @__PURE__ */ jsx(ShapeIcon, {})
+    }
+  );
+}
 export {
+  IconOrShapeRenderer,
   IconRenderer,
   IconRendererProvider
 };

package/dist/hooks/index.d.ts

@@ -1,5 +1,4 @@
 export { useCurrentViewId } from './useCurrentViewId';
-export type { DiagramContext } from './useDiagramContext';
 export { useMantinePortalProps } from './useMantinePortalProps';
 export { useSetState } from './useSetState';
 export { useUpdateEffect } from './useUpdateEffect';

package/dist/hooks/useDiagram.d.ts

@@ -7556,9 +7556,9 @@ export declare function useDiagram(): {
             };
         };
         readonly on: {
-            readonly 'xyflow.applyNodeChages': {
+            readonly 'xyflow.applyNodeChanges': {
                 readonly actions: ActionFunction<DiagramContext, {
-                    type: "xyflow.applyNodeChages";
+                    type: "xyflow.applyNodeChanges";
                     changes: NodeChange<Types.Node>[];
                 }, Events, undefined, Values<{
                     hotkeyActor: {
@@ -7771,9 +7771,9 @@ export declare function useDiagram(): {
                     };
                 }>, never, never, never, never>;
             };
-            readonly 'xyflow.applyEdgeChages': {
+            readonly 'xyflow.applyEdgeChanges': {
                 readonly actions: ActionFunction<DiagramContext, {
-                    type: "xyflow.applyEdgeChages";
+                    type: "xyflow.applyEdgeChanges";
                     changes: EdgeChange<Types.Edge>[];
                 }, Events, undefined, Values<{
                     hotkeyActor: {

package/dist/index.d.ts

@@ -7,6 +7,6 @@ export { LikeC4ModelProvider } from './LikeC4ModelProvider';
 export { useSetState } from './hooks/useSetState';
 export { useUpdateEffect } from './hooks/useUpdateEffect';
 export { vars, xyvars } from './theme-vars';
-export type * from './LikeC4Diagram.props';
+export type { ChangeEvent, DiagramNodeWithNavigate, ElementIconRenderer, LikeC4ColorScheme, LikeC4DiagramEventHandlers, LikeC4DiagramProperties, OnCanvasClick, OnChange, OnEdgeClick, OnNavigateTo, OnNodeClick, OpenSourceParams, WhereOperator, } from './LikeC4Diagram.props';
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram';
 export type { StaticLikeC4DiagramProps } from './StaticLikeC4Diagram';

package/dist/likec4diagram/DiagramUI.js

@@ -1,17 +1,14 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import "react";
-import { LikeC4Search } from "../LikeC4Search.js";
 import { Overlays } from "../overlays/Overlays.js";
-import { DynamicViewWalkthrough } from "./ui/walkthrough/DynamicViewWalkthrough.js";
 import { Controls } from "./ui/controls/Controls.js";
 import { IfEnabled } from "../context/DiagramFeatures.js";
 import { DiagramTitlePanel } from "./ui/diagram-title/DiagramTitlePanel.js";
 import { NotationPanel } from "./ui/notation/NotationPanel.js";
+import { DynamicViewWalkthrough } from "./ui/walkthrough/DynamicViewWalkthrough.js";
 function DiagramUI() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Controls, {}),
     /* @__PURE__ */ jsx(Overlays, {}),
-    /* @__PURE__ */ jsx(IfEnabled, { feature: "Search", children: /* @__PURE__ */ jsx(LikeC4Search, {}) }),
     /* @__PURE__ */ jsx(IfEnabled, { feature: "ViewTitle", children: /* @__PURE__ */ jsx(DiagramTitlePanel, {}) }),
     /* @__PURE__ */ jsx(IfEnabled, { feature: "Notations", children: /* @__PURE__ */ jsx(NotationPanel, {}) }),
     /* @__PURE__ */ jsx(IfEnabled, { feature: "DynamicViewWalkthrough", children: /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}) })

package/dist/likec4diagram/XYFlow.d.ts

@@ -1,6 +1,11 @@
 import { EnforceOptional } from 'type-fest/source/enforce-optional';
 import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
+import { NamedExoticComponent } from 'react';
 type Picked = EnforceOptional<Pick<LikeC4DiagramProperties, 'background' | 'nodesDraggable' | 'nodesSelectable'>>;
 export type LikeC4DiagramXYFlowProps = Required<Picked>;
-export declare const LikeC4DiagramXYFlow: ({ background, ...rest }: LikeC4DiagramXYFlowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LikeC4DiagramXYFlow: NamedExoticComponent<Required<{
+    background?: "solid" | "transparent" | "dots" | "lines" | "cross";
+    nodesDraggable?: boolean;
+    nodesSelectable?: boolean;
+}>>;
 export {};

package/dist/likec4diagram/XYFlow.js

@@ -3,10 +3,12 @@ import { nonNullable } from "@likec4/core";
 import { useCallbackRef } from "@mantine/hooks";
 import clsx from "clsx";
 import { shallowEqual } from "fast-equals";
+import { memo } from "react";
 import { BaseXYFlow } from "../base/BaseXYFlow.js";
 import { useDiagram } from "../hooks/useDiagram.js";
 import { useDiagramContext } from "../hooks/useDiagramContext.js";
 import { edgeTypes } from "./custom/index.js";
+import { DiagramUI } from "./DiagramUI.js";
 import { useLayoutConstraints } from "./useLayoutConstraints.js";
 import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
 import { nodeTypes } from "./custom/nodes/nodeTypes.js";
@@ -21,7 +23,7 @@ const selectXYProps = (ctx) => ({
   enableReadOnly: ctx.features.enableReadOnly
 });
 const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.fitViewPadding === b.fitViewPadding && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges);
-const LikeC4DiagramXYFlow = ({ background, ...rest }) => {
+const LikeC4DiagramXYFlow = memo(({ background, nodesDraggable, nodesSelectable }) => {
   const diagram = useDiagram();
   const {
     initialized,
@@ -54,10 +56,10 @@ const LikeC4DiagramXYFlow = ({ background, ...rest }) => {
       nodeTypes,
       edgeTypes,
       onNodesChange: useCallbackRef((changes) => {
-        diagram.send({ type: "xyflow.applyNodeChages", changes });
+        diagram.send({ type: "xyflow.applyNodeChanges", changes });
       }),
       onEdgesChange: useCallbackRef((changes) => {
-        diagram.send({ type: "xyflow.applyEdgeChages", changes });
+        diagram.send({ type: "xyflow.applyEdgeChanges", changes });
       }),
       background: initialized ? background : "transparent",
       fitView: false,
@@ -78,6 +80,7 @@ const LikeC4DiagramXYFlow = ({ background, ...rest }) => {
       }),
       onDoubleClick: useCallbackRef((e) => {
         e.stopPropagation();
+        e.preventDefault();
         diagram.send({ type: "xyflow.paneDblClick" });
         onCanvasDblClick == null ? void 0 : onCanvasDblClick(e);
       }),
@@ -87,38 +90,34 @@ const LikeC4DiagramXYFlow = ({ background, ...rest }) => {
       onInit: useCallbackRef((instance) => {
         diagram.send({ type: "xyflow.init", instance });
       }),
-      ...onNodeContextMenu && {
-        onNodeContextMenu: useCallbackRef((event, node) => {
-          const diagramNode = nonNullable(
-            diagram.findDiagramNode(node.id),
-            `diagramNode ${node.id} not found`
-          );
-          onNodeContextMenu(diagramNode, event);
-        })
-      },
-      ...onEdgeContextMenu && {
-        onEdgeContextMenu: useCallbackRef((event, edge) => {
-          const diagramEdge = nonNullable(
-            diagram.findDiagramEdge(edge.id),
-            `diagramEdge ${edge.id} not found`
-          );
-          onEdgeContextMenu(diagramEdge, event);
-        })
-      },
-      ...onCanvasContextMenu && {
-        onPaneContextMenu: useCallbackRef((event) => {
-          onCanvasContextMenu(event);
-        })
-      },
+      onNodeContextMenu: useCallbackRef((event, node) => {
+        const diagramNode = nonNullable(
+          diagram.findDiagramNode(node.id),
+          `diagramNode ${node.id} not found`
+        );
+        onNodeContextMenu == null ? void 0 : onNodeContextMenu(diagramNode, event);
+      }),
+      onEdgeContextMenu: useCallbackRef((event, edge) => {
+        const diagramEdge = nonNullable(
+          diagram.findDiagramEdge(edge.id),
+          `diagramEdge ${edge.id} not found`
+        );
+        onEdgeContextMenu == null ? void 0 : onEdgeContextMenu(diagramEdge, event);
+      }),
+      onPaneContextMenu: useCallbackRef((event) => {
+        onCanvasContextMenu == null ? void 0 : onCanvasContextMenu(event);
+      }),
       ...enableFitView && {
         onViewportResize
       },
-      ...notReadOnly && rest.nodesDraggable && layoutConstraints,
+      nodesDraggable,
+      nodesSelectable,
+      ...notReadOnly && nodesDraggable && layoutConstraints,
       ...props,
-      ...rest
+      children: /* @__PURE__ */ jsx(DiagramUI, {})
     }
   );
-};
+}, shallowEqual);
 export {
   LikeC4DiagramXYFlow
 };

package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.js

@@ -5,7 +5,7 @@ import { IconInfoCircle, IconArrowRight, IconZoomScan, IconFileSymlink } from "@
 import clsx from "clsx";
 import { useCallback, Fragment as Fragment$1, forwardRef } from "react";
 import { pipe, map, filter, isTruthy, partition } from "remeda";
-import { Link } from "../../../base/Link.js";
+import { Link } from "../../../components/Link.js";
 import { useDiagram } from "../../../hooks/useDiagram.js";
 import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
 import { DiagramContext } from "../../state/machine.js";
@@ -89,9 +89,11 @@ function RelationshipsDropdownMenu({
       closeOnClickOutside: true,
       clickOutsideEvents: ["pointerdown", "mousedown", "click"],
       closeOnEscape: true,
+      keepMounted: false,
       closeOnItemClick: false,
       disabled,
       position: "bottom-start",
+      middlewares: { size: { padding: 8 } },
       ...portalProps,
       children: [
         /* @__PURE__ */ jsx(MenuTarget, { children }),

package/dist/likec4diagram/state/actorContext.d.ts

@@ -9055,9 +9055,9 @@ export declare const LikeC4ViewMachineContextProvider: (props: {
             };
         };
         readonly on: {
-            readonly 'xyflow.applyNodeChages': {
+            readonly 'xyflow.applyNodeChanges': {
                 readonly actions: ActionFunction<DiagramContext, {
-                    type: "xyflow.applyNodeChages";
+                    type: "xyflow.applyNodeChanges";
                     changes: NodeChange<import("../types").Types.Node>[];
                 }, Events, undefined, Values<{
                     hotkeyActor: {
@@ -9307,9 +9307,9 @@ export declare const LikeC4ViewMachineContextProvider: (props: {
                     };
                 }>, never, never, never, never>;
             };
-            readonly 'xyflow.applyEdgeChages': {
+            readonly 'xyflow.applyEdgeChanges': {
                 readonly actions: ActionFunction<DiagramContext, {
-                    type: "xyflow.applyEdgeChages";
+                    type: "xyflow.applyEdgeChanges";
                     changes: EdgeChange<{
                         id: string;
                         source: string;
@@ -22116,9 +22116,9 @@ export declare const LikeC4ViewMachineContextProvider: (props: {
             };
         };
         readonly on: {
-            readonly 'xyflow.applyNodeChages': {
+            readonly 'xyflow.applyNodeChanges': {
                 readonly actions: ActionFunction<DiagramContext, {
-                    type: "xyflow.applyNodeChages";
+                    type: "xyflow.applyNodeChanges";
                     changes: NodeChange<import("../types").Types.Node>[];
                 }, Events, undefined, Values<{
                     hotkeyActor: {
@@ -22368,9 +22368,9 @@ export declare const LikeC4ViewMachineContextProvider: (props: {
                     };
                 }>, never, never, never, never>;
             };
-            readonly 'xyflow.applyEdgeChages': {
+            readonly 'xyflow.applyEdgeChanges': {
                 readonly actions: ActionFunction<DiagramContext, {
-                    type: "xyflow.applyEdgeChages";
+                    type: "xyflow.applyEdgeChanges";
                     changes: EdgeChange<{
                         id: string;
                         source: string;
@@ -34842,9 +34842,9 @@ export declare const LikeC4ViewMachineContextProvider: (props: {
         };
     };
     readonly on: {
-        readonly 'xyflow.applyNodeChages': {
+        readonly 'xyflow.applyNodeChanges': {
             readonly actions: ActionFunction<DiagramContext, {
-                type: "xyflow.applyNodeChages";
+                type: "xyflow.applyNodeChanges";
                 changes: NodeChange<import("../types").Types.Node>[];
             }, Events, undefined, Values<{
                 hotkeyActor: {
@@ -35094,9 +35094,9 @@ export declare const LikeC4ViewMachineContextProvider: (props: {
                 };
             }>, never, never, never, never>;
         };
-        readonly 'xyflow.applyEdgeChages': {
+        readonly 'xyflow.applyEdgeChanges': {
             readonly actions: ActionFunction<DiagramContext, {
-                type: "xyflow.applyEdgeChages";
+                type: "xyflow.applyEdgeChanges";
                 changes: EdgeChange<{
                     id: string;
                     source: string;
@@ -47901,9 +47901,9 @@ export declare const LikeC4ViewMachineContextProvider: (props: {
         };
     };
     readonly on: {
-        readonly 'xyflow.applyNodeChages': {
+        readonly 'xyflow.applyNodeChanges': {
             readonly actions: ActionFunction<DiagramContext, {
-                type: "xyflow.applyNodeChages";
+                type: "xyflow.applyNodeChanges";
                 changes: NodeChange<import("../types").Types.Node>[];
             }, Events, undefined, Values<{
                 hotkeyActor: {
@@ -48153,9 +48153,9 @@ export declare const LikeC4ViewMachineContextProvider: (props: {
                 };
             }>, never, never, never, never>;
         };
-        readonly 'xyflow.applyEdgeChages': {
+        readonly 'xyflow.applyEdgeChanges': {
             readonly actions: ActionFunction<DiagramContext, {
-                type: "xyflow.applyEdgeChages";
+                type: "xyflow.applyEdgeChanges";
                 changes: EdgeChange<{
                     id: string;
                     source: string;