@likec4/diagram 1.20.3 → 1.21.1

package/README.md

@@ -1,6 +1,6 @@
 # `@likec4/diagram`
 
-[docs](https://likec4.dev/docs/tools/react/) | [demo](https://template.likec4.dev/view/cloud)
+[docs](https://likec4.dev/docs/tools/react/) | [demo](https://template.likec4.dev/view/index/)
 
 React components to render diagrams.
 Although you can use them directly, it is recommended to use [likec4](../likec4/) CLI to generate components from LikeC4 sources.
@@ -13,4 +13,4 @@ npm add @likec4/diagram
 
 ### Local Development
 
-Use [examples/diagrams-dev](../../examples/diagrams-dev/) workspace
+Use [packages/likec4](../likec4/) workspace

package/dist/base/BaseXYFlow.js

@@ -7,7 +7,7 @@ import { useIsZoomTooSmall } from "../hooks/useXYFlow.js";
 import { cssReactFlow, cssDisablePan, cssTransparentBg } from "../LikeC4Diagram.css.js";
 import { stopPropagation } from "../utils/xyflow.js";
 import { Background } from "./Background.js";
-import { MaxZoom, MinZoom } from "./const.js";
+import { MinZoom, MaxZoom } from "./const.js";
 import { Base } from "./types.js";
 import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
 const BaseXYFlow = ({
@@ -38,7 +38,6 @@ const BaseXYFlow = ({
       nodes,
       edges,
       className: clsx(
-        "likec4-diagram",
         cssReactFlow,
         pannable !== true && cssDisablePan,
         background === "transparent" && cssTransparentBg,

package/dist/base/example/_types.d.ts

@@ -1,14 +1,14 @@
-import { Color, DiagramNode, Fqn } from '@likec4/core';
+import { Color, DiagramNode, Fqn, IconUrl } from '@likec4/core';
 import { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../types';
 export declare namespace ExampleTypes {
-    type ElementNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'height' | 'navigateTo'>> & {
+    type ElementNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'style' | 'width' | 'height' | 'navigateTo'>> & {
         fqn: Fqn;
         icon: string | null;
     }>;
     type CompoundNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'color' | 'shape' | 'style'>> & {
         fqn: Fqn;
         depth: number;
-        icon: string | null;
+        icon: IconUrl;
     }>;
     type ElementNode = ReactFlowNode<ElementNodeData, 'element'>;
     type CompoundNode = ReactFlowNode<CompoundNodeData, 'compound'>;

package/dist/base/example/custom.d.ts

@@ -1,9 +1,10 @@
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
 import { NodeProps } from '..';
-import { Color, ViewId, Fqn, ElementStyle } from '@likec4/core';
+import { ElementStyle, Color, ViewId, Fqn, IconUrl } from '@likec4/core';
 import { Position } from '@xyflow/system';
 export declare const nodeTypes: {
     element: NamedExoticComponent<NodeProps<{
+        style: ElementStyle;
         title: string;
         description: string | null;
         width: number;
@@ -24,7 +25,7 @@ export declare const nodeTypes: {
         color: Color;
         fqn: Fqn;
         depth: number;
-        icon: string | null;
+        icon: IconUrl;
         hovered?: boolean;
         dimmed?: import("..").Base.Dimmed;
     }>>;

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

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import { m } from "framer-motion";
 import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { stopPropagation } from "../../../utils/xyflow.js";
-import { container, actionButton, actionIcon } from "./CompoundActionButton.css.js";
+import { actionIcon, actionButton, container } from "./CompoundActionButton.css.js";
 function CompoundActionButton({
   data: {
     hovered: isHovered = false

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

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import { m } from "framer-motion";
 import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { stopPropagation } from "../../../utils/xyflow.js";
-import { container, actionIconWrapper, actionIcon } from "./CompoundDetailsButton.css.js";
+import { actionIcon, actionIconWrapper, container } from "./CompoundDetailsButton.css.js";
 function CompoundDetailsButton({
   data: {
     hovered: isHovered = false

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 { container, varCompoundOpacity, varBorderTransparency, indicator, compoundBg, compoundBorder } from "./CompoundNodeContainer.css.js";
+import { indicator, compoundBg, compoundBorder, varBorderTransparency, varCompoundOpacity, container } from "./CompoundNodeContainer.css.js";
 const CompoundNodeContainer = createPolymorphicComponent(
   forwardRef(({
     nodeProps: {

package/dist/base/primitives/compound/CompoundTitle.css.d.ts

@@ -1,2 +1,3 @@
 export declare const compoundTitle: string;
 export declare const title: string;
+export declare const icon: string;

package/dist/base/primitives/compound/CompoundTitle.css.js

@@ -1,7 +1,9 @@
 /* empty css                                 */
 var compoundTitle = "_1dn4as0";
 var title = "_1dn4as1";
+var icon = "_1dn4as2";
 export {
   compoundTitle,
+  icon,
   title
 };

package/dist/base/primitives/compound/CompoundTitle.d.ts

@@ -1,6 +1,6 @@
 import { DiagramNode } from '@likec4/core';
 import { NodeProps } from '../../types';
-type Data = Pick<DiagramNode, 'color' | 'title'>;
+type Data = Pick<DiagramNode, 'color' | 'title' | 'icon'>;
 type CompoundTitleProps = NodeProps<Data>;
-export declare function CompoundTitle({ data }: CompoundTitleProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompoundTitle({ id, data }: CompoundTitleProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,17 +1,28 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Box, Text } from "@mantine/core";
 import clsx from "clsx";
-import { compoundTitle, title } from "./CompoundTitle.css.js";
-function CompoundTitle({ data }) {
-  data.hovered ?? false;
-  return /* @__PURE__ */ jsx(
+import { icon, title, compoundTitle } from "./CompoundTitle.css.js";
+import { IconRenderer } from "../../../context/IconRenderer.js";
+function CompoundTitle({ id, data }) {
+  const elementIcon = IconRenderer({
+    element: {
+      id,
+      title: data.title,
+      icon: data.icon
+    },
+    className: icon
+  });
+  return /* @__PURE__ */ jsxs(
     Box,
     {
       className: clsx(
         compoundTitle,
         "likec4-compound-title"
       ),
-      children: /* @__PURE__ */ jsx(Text, { className: title, truncate: "end", children: data.title })
+      children: [
+        elementIcon,
+        /* @__PURE__ */ jsx(Text, { className: title, truncate: "end", children: data.title })
+      ]
     }
   );
 }

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 { edgeVars, edgeLabelContainer, dimmed, edgeLabel, stepEdgeNumber, secondColumn, edgeLabelText, edgeLabelTechnology, 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/ElementActionButtons.js

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { m } from "framer-motion";
 import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { stopPropagation } from "../../../utils/xyflow.js";
-import { container, actionButtons, actionIcon } from "./ElementActionButtons.css.js";
+import { actionIcon, actionButtons, container } from "./ElementActionButtons.css.js";
 function ElementActionButtons({
   id,
   selected = false,

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

@@ -5,7 +5,7 @@ import clsx from "clsx";
 import { m } from "framer-motion";
 import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { stopPropagation } from "../../../utils/xyflow.js";
-import { container, actionIconWrapper, actionIcon } from "./ElementDetailsButton.css.js";
+import { actionIcon, actionIconWrapper, container } from "./ElementDetailsButton.css.js";
 function ElementDetailsButton({
   selected = false,
   data: {

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

@@ -1,11 +1,16 @@
-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';
-type RequiredData = Pick<DiagramNode, 'color' | 'shape'>;
+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,9 +1,33 @@
 import { jsx } from "react/jsx-runtime";
+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: {
@@ -27,6 +51,11 @@ const ElementNodeContainer = createPolymorphicComponent(
         scale = 1.02;
         break;
     }
+    const {
+      size,
+      padding,
+      textSize
+    } = nodeSizes(data.style);
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -46,6 +75,9 @@ const ElementNodeContainer = createPolymorphicComponent(
         "data-hovered": isHovered,
         "data-likec4-color": data.color,
         "data-likec4-shape": data.shape,
+        "data-likec4-shape-size": size,
+        "data-likec4-padding": padding,
+        "data-likec4-text-size": textSize,
         "data-likec4-dimmed": isDimmed,
         ...rest,
         children
@@ -55,5 +87,6 @@ const ElementNodeContainer = createPolymorphicComponent(
 );
 ElementNodeContainer.displayName = "ElementNodeContainer";
 export {
-  ElementNodeContainer
+  ElementNodeContainer,
+  nodeSizes
 };

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

@@ -3,7 +3,7 @@ import { nonexhaustive } from "@likec4/core";
 import clsx from "clsx";
 import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
 import { toDomPrecision } from "../../../utils/xyflow.js";
-import { shapeSvgMultiple, shapeSvg, indicator, fillMixStroke, fillElementFill } from "./ElementShape.css.js";
+import { shapeSvgMultiple, shapeSvg, fillMixStroke, fillElementFill, indicator } from "./ElementShape.css.js";
 function cylinderSVGPath(diameter, height, tilt = 0.065) {
   const radius = Math.round(diameter / 2);
   const rx = radius;

package/dist/base/primitives/element/ElementTitle.css.d.ts

@@ -1,5 +1,4 @@
 export declare const hasIcon: string;
-export declare const iconSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 export declare const title: string;
 export declare const description: string;
 export declare const technology: string;

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

@@ -1,19 +1,19 @@
+/* empty css                                        */
+/* empty css                          */
 /* empty css                                */
 var hasIcon = "fo05290";
-var iconSize = "var(--fo05292)";
-var title = "fo05293";
-var description = "fo05294";
-var technology = "fo05295";
-var elementDataContainer = "fo05296";
-var elementTextData = "fo05297";
-var elementIcon = "fo05298";
+var title = "fo05292";
+var description = "fo05293";
+var technology = "fo05294";
+var elementDataContainer = "fo05295";
+var elementTextData = "fo05296";
+var elementIcon = "fo05297";
 export {
   description,
   elementDataContainer,
   elementIcon,
   elementTextData,
   hasIcon,
-  iconSize,
   technology,
   title
 };

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

@@ -1,6 +1,6 @@
 import { DiagramNode } from '@likec4/core';
 import { NodeProps } from '../../types';
-type Data = Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color'> & {
+type Data = Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'style'> & {
     icon?: string | null;
 };
 type ElementTitleProps = NodeProps<Data> & {

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

@@ -1,11 +1,14 @@
 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 { isTruthy, isNumber } from "remeda";
+import { isNumber, isTruthy } from "remeda";
 import { IconRenderer } from "../../../context/IconRenderer.js";
 import { hiddenIfZoomTooSmall } from "../../../LikeC4Diagram.css.js";
-import { elementIcon, elementDataContainer, hasIcon, elementTextData, title, technology, description, iconSize } from "./ElementTitle.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 }) {
   const elementIcon$1 = IconRenderer({
     element: {
@@ -15,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,
     {
@@ -36,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
             }
           ),
@@ -53,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.d.ts

@@ -0,0 +1,3 @@
+export declare const textSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const paddingSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const iconSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

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

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

package/dist/context/DiagramEventHandlers.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useSyncedRef } from "@react-hookz/web";
 import { createContext, useMemo, useContext } from "react";
-import { mapToObj, isFunction } from "remeda";
+import { isFunction, mapToObj } from "remeda";
 const HandlerNames = [
   "onBurgerMenuClick",
   "onNavigateTo",

package/dist/context/DiagramFeatures.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { useCustomCompareEffect } from "@react-hookz/web";
-import { createContext, useContext, useState } from "react";
+import { useContext, createContext, useState } from "react";
 import { mapToObj, pick, map } from "remeda";
 import { depsShallowEqual } from "../hooks/useUpdateEffect.js";
 const FeatureNames = [

package/dist/context/RootContainer.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { Box } from "@mantine/core";
 import clsx from "clsx";
-import { createContext, createRef, useRef, useContext } from "react";
+import { useRef, createContext, createRef, useContext } from "react";
 import { rootClassName } from "../globals.css.js";
 const RootContainerContext = createContext(createRef());
 function RootContainer({

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

@@ -2,9 +2,8 @@ import { EdgeId, Fqn, NodeId, ViewId, DiagramView, ViewChange, RelationId, Color
 import { PartialDeep } from 'type-fest';
 import { OpenSourceParams } from '../LikeC4Diagram.props';
 import { AlignmentMode } from '../likec4diagram/state/aligners';
+import { DiagramContext, Events, Input, ActionArg } from '../likec4diagram/state/machine';
 import { Types } from '../likec4diagram/types';
-import { DiagramContext } from './useDiagramContext';
-import { Events, Input, ActionArg } from '../likec4diagram/state/machine';
 import { MachineSnapshot, ActorRefFromLogic, CallbackActorLogic, AnyEventObject, NonReducibleUnknown, StateMachine, EventObject, MetaObject, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, AnyActorRef, StateValue, ActionFunction, ActorLogic, RequiredActorOptions, GetConcreteByKey, Values, StopAction, CancelAction } from 'xstate';
 import { HotKeyEvent } from '../likec4diagram/state/hotkeyActor';
 import { Input, Events } from '../likec4diagram/state/syncManualLayoutActor';

package/dist/hooks/useXYFlow.js

@@ -1,5 +1,5 @@
 import { useCallbackRef } from "@mantine/hooks";
-import { useStore, useStoreApi, useReactFlow, useInternalNode } from "@xyflow/react";
+import { useStoreApi, useStore, useReactFlow, useInternalNode } from "@xyflow/react";
 import { shallowEqual } from "fast-equals";
 const useXYFlow = useReactFlow;
 function useXYStore(selector, equalityFn) {

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.d.ts

@@ -1,2 +1 @@
-import { MemoExoticComponent } from 'react';
-export declare const DiagramUI: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export declare function DiagramUI(): import("react/jsx-runtime").JSX.Element;

package/dist/likec4diagram/DiagramUI.js

@@ -1,13 +1,12 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { memo } from "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";
-const DiagramUI = memo(() => {
+import { DynamicViewWalkthrough } from "./ui/walkthrough/DynamicViewWalkthrough.js";
+function DiagramUI() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Controls, {}),
     /* @__PURE__ */ jsx(Overlays, {}),
@@ -16,7 +15,7 @@ const DiagramUI = memo(() => {
     /* @__PURE__ */ jsx(IfEnabled, { feature: "Notations", children: /* @__PURE__ */ jsx(NotationPanel, {}) }),
     /* @__PURE__ */ jsx(IfEnabled, { feature: "DynamicViewWalkthrough", children: /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}) })
   ] });
-});
+}
 export {
   DiagramUI
 };

package/dist/likec4diagram/XYFlow.js

@@ -3,12 +3,12 @@ import { nonNullable } from "@likec4/core";
 import { useCallbackRef } from "@mantine/hooks";
 import clsx from "clsx";
 import { shallowEqual } from "fast-equals";
+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 { useLayoutConstraints } from "./useLayoutConstraints.js";
 import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
-import { BaseXYFlow } from "../base/BaseXYFlow.js";
 import { nodeTypes } from "./custom/nodes/nodeTypes.js";
 const selectXYProps = (ctx) => ({
   initialized: ctx.initialized,

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { Popover, PopoverTarget, PopoverDropdown, Stack, ScrollAreaAutosize, Text, CloseButton, Group, Button } from "@mantine/core";
 import { useDebouncedEffect } from "@react-hookz/web";
 import { useState } from "react";
-import { isNonNull, isTruthy } from "remeda";
+import { isTruthy, isNonNull } from "remeda";
 import { useDiagram } from "../../../hooks/useDiagram.js";
 import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
 import { edgeNoteText, edgeNoteCloseButton } from "./NotePopover.css.js";

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

@@ -8,7 +8,7 @@ import { isTruthy, first, last } from "remeda";
 import { useDiagram } from "../../../hooks/useDiagram.js";
 import { VectorImpl, vector } from "../../../utils/vector.js";
 import { isSamePoint, bezierControlPoints, bezierPath } from "../../../utils/xyflow.js";
-import { controlDragging, controlPoint } from "./edges.css.js";
+import { controlPoint, controlDragging } from "./edges.css.js";
 import { NotePopover } from "./NotePopover.js";
 import { RelationshipsDropdownMenu } from "./RelationshipsDropdownMenu.js";
 import { getNodeIntersectionFromCenterToPoint } from "./utils.js";

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

@@ -1,19 +1,19 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { DiagramNode, nameFromFqn } from "@likec4/core";
-import { Tooltip as Tooltip$1, Menu, MenuTarget, MenuDropdown, MenuLabel, MenuDivider, Box, ActionIcon, Stack, Group, Text, TooltipGroup, Space, MenuItem } from "@mantine/core";
+import { Menu, MenuTarget, MenuDropdown, MenuLabel, MenuDivider, Box, ActionIcon, MenuItem, Stack, Group, Text, TooltipGroup, Space, Tooltip as Tooltip$1 } from "@mantine/core";
 import { IconInfoCircle, IconArrowRight, IconZoomScan, IconFileSymlink } from "@tabler/icons-react";
 import clsx from "clsx";
-import { useCallback, forwardRef, Fragment as Fragment$1 } from "react";
+import { useCallback, Fragment as Fragment$1, forwardRef } from "react";
 import { pipe, map, filter, isTruthy, partition } from "remeda";
+import { Link } from "../../../base/Link.js";
 import { useDiagram } from "../../../hooks/useDiagram.js";
 import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
-import { menuDropdown, menuItemRelationship, endpoint, title } from "./RelationshipsDropdownMenu.css.js";
 import { DiagramContext } from "../../state/machine.js";
+import { menuDropdown, endpoint, title, menuItemRelationship } from "./RelationshipsDropdownMenu.css.js";
 import { useLikeC4Model } from "../../../likec4model/useLikeC4Model.js";
 import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
 import { useEnabledFeature, IfEnabled } from "../../../context/DiagramFeatures.js";
 import { useDiagramEventHandlers } from "../../../context/DiagramEventHandlers.js";
-import { Link } from "../../../base/Link.js";
 const stopPropagation = (e) => e.stopPropagation();
 const Tooltip = Tooltip$1.withProps({
   color: "gray",
@@ -92,6 +92,7 @@ function RelationshipsDropdownMenu({
       closeOnItemClick: false,
       disabled,
       position: "bottom-start",
+      middlewares: { size: { padding: 8 } },
       ...portalProps,
       children: [
         /* @__PURE__ */ jsx(MenuTarget, { children }),

package/dist/likec4diagram/custom/nodes/nodeTypes.js

@@ -2,18 +2,18 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import "@likec4/core";
 import { useDiagram } from "../../../hooks/useDiagram.js";
 import { CompoundActions } from "./CompoundActions.js";
-import { ElementActions, DeploymentElementActions } from "./ElementActions.js";
-import { CompoundElementToolbar, CompoundDeploymentToolbar } from "./toolbar/CompoundToolbar.js";
-import { ElementToolbar, DeploymentElementToolbar } from "./toolbar/ElementToolbar.js";
+import { DeploymentElementActions, ElementActions } from "./ElementActions.js";
+import { CompoundDeploymentToolbar, CompoundElementToolbar } from "./toolbar/CompoundToolbar.js";
+import { DeploymentElementToolbar, ElementToolbar } from "./toolbar/ElementToolbar.js";
 import { customNode } from "../../../base/primitives/customNode.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 { IfNotEnabled, IfEnabled, useEnabledFeature } from "../../../context/DiagramFeatures.js";
-import { DefaultHandles } from "../../../base/primitives/NodeHandles.js";
 import { CompoundNodeContainer } from "../../../base/primitives/compound/CompoundNodeContainer.js";
 import { CompoundTitle } from "../../../base/primitives/compound/CompoundTitle.js";
+import { DefaultHandles } from "../../../base/primitives/NodeHandles.js";
+import { IfNotEnabled, IfEnabled, useEnabledFeature } from "../../../context/DiagramFeatures.js";
 import { CompoundDetailsButton } from "../../../base/primitives/compound/CompoundDetailsButton.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 { ElementDetailsButton } from "../../../base/primitives/element/ElementDetailsButton.js";
 const ElementDetailsButtonWithHandler = ({ fqn, ...props }) => {
   const { enableElementDetails } = useEnabledFeature("ElementDetails");

package/dist/likec4diagram/custom/nodes/toolbar/_shared.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { defaultTheme, invariant } from "@likec4/core";
+import { invariant, defaultTheme } from "@likec4/core";
 import { Tooltip as Tooltip$1, ActionIcon } from "@mantine/core";
 import { useCallbackRef } from "@mantine/hooks";
-import { IconTransform, IconFileSymlink } from "@tabler/icons-react";
+import { IconFileSymlink, IconTransform } from "@tabler/icons-react";
 import { useState } from "react";
 import { keys } from "remeda";
 import { useDiagram } from "../../../../hooks/useDiagram.js";

package/dist/likec4diagram/state/assign.js

@@ -1,7 +1,7 @@
 import { nonNullable, invariant } from "@likec4/core";
 import { getNodeDimensions } from "@xyflow/system";
 import { deepEqual } from "fast-equals";
-import { omit, mergeDeep, isEmpty } from "remeda";
+import { isEmpty, mergeDeep, omit } from "remeda";
 import { assertEvent } from "xstate";
 import { VectorImpl, vector } from "../../utils/vector.js";
 import { Base } from "../../base/types.js";