@likec4/diagram 1.42.0 → 1.43.0

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -6,8 +6,10 @@ import { HStack, VStack, Box } from '@likec4/styles/jsx';
 import { vstack, hstack } from '@likec4/styles/patterns';
 import { PopoverDropdown, createScopedKeydownHandler, ScrollAreaAutosize, Input, rem, Button, Divider, Highlight, UnstyledButton, Breadcrumbs } from '@mantine/core';
 import { useThrottledCallback, useUncontrolled } from '@mantine/hooks';
+import { useMountEffect } from '@react-hookz/web';
 import { useSelector } from '@xstate/react';
 import { deepEqual } from 'fast-equals';
+import { useRef } from 'react';
 import { isEmpty, pipe, sort, isArray } from 'remeda';
 import { NavigationLink } from '../components/NavigationLink.js';
 import { useLikeC4Model } from '../hooks/useLikeC4Model.js';
@@ -17,6 +19,7 @@ import { breadcrumbTitle } from './styles.css.js';
 import { useOnDiagramEvent } from '../hooks/useDiagram.js';
 import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
 import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconDirectionSignFilled from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.js';
 import IconStack2 from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
 import IconZoomScan from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 import IconStarFilled from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.js';
@@ -70,7 +73,7 @@ function NavigationPanelDropdown() {
         /* @__PURE__ */ jsx(
           ScrollAreaAutosize,
           {
-            scrollbars: "xy",
+            scrollbars: "x",
             type: "auto",
             offsetScrollbars: "present",
             classNames: {
@@ -81,6 +84,11 @@ function NavigationPanelDropdown() {
                 ]
               })
             },
+            styles: {
+              viewport: {
+                overscrollBehavior: "none"
+              }
+            },
             children: hasSearchQuery ? /* @__PURE__ */ jsx(SearchResults, { searchQuery: normalizeViewPath(searchQuery).toLowerCase() }) : /* @__PURE__ */ jsx(FolderColumns, {})
           }
         )
@@ -123,7 +131,7 @@ function SearchResults({ searchQuery }) {
           "calc(100cqh - 200px)"
         ]
       }),
-      children: /* @__PURE__ */ jsx(VStack, { gap: "[1px]", children: found.map((v) => /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(VStack, { gap: "0.5", children: found.map((v) => /* @__PURE__ */ jsx(
         FoundedView,
         {
           view: v,
@@ -282,7 +290,7 @@ const ViewTypeIcon = {
     }
   ),
   deployment: /* @__PURE__ */ jsx(IconStack2, { size: 16, stroke: 1.5, className: viewTypeIconCss }),
-  dynamic: /* @__PURE__ */ jsx(IconStack2, { size: 16, stroke: 1.5, className: viewTypeIconCss })
+  dynamic: /* @__PURE__ */ jsx(IconDirectionSignFilled, { size: 18, className: viewTypeIconCss })
 };
 const ColumnScrollArea = ScrollAreaAutosize.withProps({
   scrollbars: "y",
@@ -332,10 +340,18 @@ function FolderColumns() {
   const columns = useNavigationActorContext(selectColumns, deepEqual);
   return /* @__PURE__ */ jsx(HStack, { gap: "xs", alignItems: "stretch", children: columns.flatMap((column, i) => [
     i > 0 && /* @__PURE__ */ jsx(Divider, { orientation: "vertical" }, "divider" + i),
-    /* @__PURE__ */ jsx(FolderColumn, { data: column }, column.folderPath)
+    /* @__PURE__ */ jsx(
+      FolderColumn,
+      {
+        data: column,
+        isLast: i == columns.length - 1
+      },
+      column.folderPath
+    )
   ]) });
 }
-function FolderColumn({ data }) {
+function FolderColumn({ data, isLast }) {
+  const ref = useRef(null);
   const actor = useNavigationActorRef();
   const onItemClicked = (item) => (e) => {
     e.stopPropagation();
@@ -345,7 +361,15 @@ function FolderColumn({ data }) {
       actor.send({ type: "select.view", viewId: item.viewId });
     }
   };
-  return /* @__PURE__ */ jsx(Box, { mb: "1", children: /* @__PURE__ */ jsx(ColumnScrollArea, { children: /* @__PURE__ */ jsx(VStack, { gap: "[1px]", children: data.items.map((item, i) => /* @__PURE__ */ jsx(
+  useMountEffect(() => {
+    if (isLast && ref.current) {
+      ref.current.scrollIntoView({
+        inline: "nearest",
+        behavior: "smooth"
+      });
+    }
+  });
+  return /* @__PURE__ */ jsx(Box, { mb: "1", ref, children: /* @__PURE__ */ jsx(ColumnScrollArea, { children: /* @__PURE__ */ jsx(VStack, { gap: "0.5", children: data.items.map((item, i) => /* @__PURE__ */ jsx(
     FolderColumnItem,
     {
       columnItem: item,

package/dist/navigationpanel/controls/BurgerButton.js

@@ -1,16 +1,18 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+import { hstack } from '@likec4/styles/patterns';
+import { UnstyledButton } from '@mantine/core';
+import * as m from 'motion/react-m';
+import { Logo, LogoIcon } from '../../components/Logo.js';
 import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
-import { PanelActionIcon } from '../_common.js';
 import { useNavigationActor } from '../hooks.js';
-import IconMenu2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconMenu2.js';
 
 const BurgerButton = () => {
   const actor = useNavigationActor();
   const { onBurgerMenuClick } = useDiagramEventHandlers();
-  return /* @__PURE__ */ jsx(
-    PanelActionIcon,
+  return /* @__PURE__ */ jsx(m.div, { layout: "position", children: /* @__PURE__ */ jsxs(
+    UnstyledButton,
     {
-      layout: "position",
       onMouseEnter: () => {
         actor.send({ type: "breadcrumbs.mouseEnter.root" });
       },
@@ -26,9 +28,45 @@ const BurgerButton = () => {
         }
         actor.send({ type: "breadcrumbs.click.root" });
       },
-      children: /* @__PURE__ */ jsx(IconMenu2, { style: { width: "80%", height: "80%" } })
+      className: cx(
+        "mantine-active",
+        hstack({
+          padding: "0.5",
+          // _active: {
+          //   transform: 'translateY(1px)',
+          // },
+          width: {
+            base: "[20px]",
+            "@/md": "[64px]"
+          }
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Logo,
+          {
+            className: css({
+              display: {
+                base: "none",
+                "@/md": "block"
+              }
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          LogoIcon,
+          {
+            className: css({
+              display: {
+                base: "block",
+                "@/md": "none"
+              }
+            })
+          }
+        )
+      ]
     }
-  );
+  ) });
 };
 
 export { BurgerButton };

package/dist/navigationpanel/styles.css.js

@@ -7,7 +7,7 @@ const breadcrumbTitle = cva({
     transition: "fast",
     color: {
       base: "mantine.colors.text/90",
-      _hover: "mantine.colors.text"
+      _hover: "[var(--mantine-color-bright)]"
     }
   },
   variants: {

package/dist/node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.js

@@ -0,0 +1,14 @@
+import createReactComponent from '../createReactComponent.js';
+
+/**
+ * @license @tabler/icons-react v3.35.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [["path", { "d": "M10.52 2.614a2.095 2.095 0 0 1 2.835 -.117l.126 .117l7.905 7.905c.777 .777 .816 2.013 .117 2.836l-.117 .126l-7.905 7.905a2.094 2.094 0 0 1 -2.836 .117l-.126 -.117l-7.907 -7.906a2.096 2.096 0 0 1 -.115 -2.835l.117 -.126l7.905 -7.905zm5.969 9.535l.01 -.116l-.003 -.12l-.016 -.114l-.03 -.11l-.044 -.112l-.052 -.098l-.076 -.105l-.07 -.081l-3.5 -3.5l-.095 -.083a1 1 0 0 0 -1.226 0l-.094 .083l-.083 .094a1 1 0 0 0 0 1.226l.083 .094l1.792 1.793h-5.085l-.117 .007a1 1 0 0 0 0 1.986l.117 .007h5.085l-1.792 1.793l-.083 .094a1 1 0 0 0 1.403 1.403l.094 -.083l3.5 -3.5l.097 -.112l.05 -.074l.037 -.067l.05 -.112l.023 -.076l.025 -.117z", "key": "svg-0" }]];
+const IconDirectionSignFilled = createReactComponent("filled", "direction-sign-filled", "DirectionSignFilled", __iconNode);
+
+export { __iconNode, IconDirectionSignFilled as default };

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

@@ -12,6 +12,7 @@ import { Link } from '../../components/Link.js';
 import { useCurrentViewModel } from '../../hooks/useCurrentViewModel.js';
 import { useDiagram } from '../../hooks/useDiagram.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';
 import { TabPanelRelationships } from './TabPanelRelationships.js';
 import { TabPanelStructure } from './TabPanelStructure.js';
@@ -340,7 +341,7 @@ function ElementDetailsCard({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(MetadataProvider, { children: /* @__PURE__ */ jsxs(
               Tabs,
               {
                 value: activeTab,
@@ -420,7 +421,7 @@ function ElementDetailsCard({
                   /* @__PURE__ */ jsx(TabsPanel, { value: "Deployments", children: /* @__PURE__ */ jsx(ScrollArea, { scrollbars: "y", type: "auto", children: /* @__PURE__ */ jsx(TabPanelDeployments, { elementFqn: elementModel.id }) }) })
                 ]
               }
-            ),
+            ) }),
             /* @__PURE__ */ jsx(
               m.div,
               {
@@ -476,97 +477,24 @@ function ElementProperty({
 function ElementMetata({
   value: metadata
 }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(PropertyLabel, { children: "metadata" }),
+  const metadataEntries = entries(metadata).sort(([a], [b]) => a.localeCompare(b));
+  return /* @__PURE__ */ jsx(MetadataProvider, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PropertyLabel, { style: { justifySelf: "end", textAlign: "right" }, children: "metadata" }),
     /* @__PURE__ */ jsx(
       Box,
       {
         className: css({
-          flex: 1,
           display: "grid",
           gridTemplateColumns: "min-content 1fr",
-          gridAutoRows: "min-content max-content",
-          gap: `[4px 4px]`,
+          gridAutoRows: "min-content",
+          gap: `[12px 16px]`,
           alignItems: "baseline",
-          justifyItems: "stretch",
-          paddingRight: "xxs"
+          justifyItems: "stretch"
         }),
-        children: entries(metadata).map(([key, value]) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "contents"
-            },
-            className: "group",
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: css({
-                    fontSize: "sm",
-                    fontWeight: 500,
-                    justifySelf: "end",
-                    whiteSpace: "nowrap"
-                  }),
-                  children: [
-                    key,
-                    ":"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: css({}),
-                  children: /* @__PURE__ */ jsx(
-                    ScrollArea.Autosize,
-                    {
-                      type: "auto",
-                      mah: 200,
-                      classNames: {
-                        root: css({
-                          transitionProperty: "all",
-                          transitionDuration: "fast",
-                          transitionTimingFunction: "inOut",
-                          rounded: "sm",
-                          color: "mantine.colors.gray[8]",
-                          _dark: {
-                            color: "mantine.colors.dark[1]"
-                          },
-                          _groupHover: {
-                            transitionTimingFunction: "out",
-                            color: "mantine.colors.defaultColor",
-                            background: "mantine.colors.defaultHover"
-                          }
-                        }),
-                        viewport: css({
-                          overscrollBehavior: "none"
-                        })
-                      },
-                      children: /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: css({
-                            fontSize: "sm",
-                            padding: "xxs",
-                            whiteSpace: "pre",
-                            fontFamily: "mono",
-                            userSelect: "all"
-                          }),
-                          children: value
-                        }
-                      )
-                    }
-                  )
-                }
-              )
-            ]
-          },
-          key
-        ))
+        children: metadataEntries.map(([key, value]) => /* @__PURE__ */ jsx(MetadataValue, { label: key, value }, key))
       }
     )
-  ] });
+  ] }) });
 }
 
 export { ElementDetailsCard };

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

@@ -0,0 +1,9 @@
+export declare function MetadataProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+interface MetadataValueProps {
+    label: string;
+    value: string | string[];
+}
+export declare function MetadataValue({ label, value }: MetadataValueProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,261 @@
+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.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
+import IconChevronRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+
+function MetadataProvider({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function TruncatedValue({ value, isExpanded }) {
+  const [isTruncated, setIsTruncated] = useState(false);
+  const textRef = useRef(null);
+  useEffect(() => {
+    if (textRef.current) {
+      setIsTruncated(textRef.current.scrollWidth > textRef.current.clientWidth);
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      label: isTruncated && !isExpanded ? value : null,
+      multiline: true,
+      w: 300,
+      withinPortal: true,
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          ref: textRef,
+          component: "div",
+          className: css({
+            fontSize: "sm",
+            padding: "xs",
+            userSelect: "all",
+            color: "mantine.colors.text",
+            lineHeight: 1.4,
+            whiteSpace: isExpanded ? "pre-wrap" : "nowrap",
+            overflow: isExpanded ? "visible" : "hidden",
+            textOverflow: isExpanded ? "unset" : "ellipsis",
+            wordBreak: isExpanded ? "break-word" : "normal",
+            minWidth: 0,
+            width: "100%"
+          }),
+          children: value
+        }
+      )
+    }
+  );
+}
+function MultiValueDisplay({
+  values,
+  isExpanded,
+  onToggle
+}) {
+  if (isExpanded) {
+    return /* @__PURE__ */ jsx(Stack, { gap: "xs", children: values.map((value, index) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          className: css({
+            fontSize: "xs",
+            color: "mantine.colors.gray[5]",
+            fontWeight: 500,
+            flexShrink: 0,
+            _dark: {
+              color: "mantine.colors.dark[3]"
+            }
+          }),
+          children: "•"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: css({
+            minHeight: "32px",
+            display: "flex",
+            alignItems: "center",
+            flex: 1
+          }),
+          children: /* @__PURE__ */ jsx(TruncatedValue, { value, isExpanded: true })
+        }
+      )
+    ] }, index)) });
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: css({
+        minHeight: "32px",
+        display: "flex",
+        alignItems: "center",
+        padding: "xs",
+        gap: "xs",
+        flexWrap: "wrap",
+        minWidth: 0,
+        // Allow shrinking
+        overflow: "hidden"
+        // Prevent overflow
+      }),
+      children: values.map((value, index) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", style: { minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            className: css({
+              fontSize: "sm",
+              padding: "[4px 8px]",
+              backgroundColor: "mantine.colors.white",
+              color: "mantine.colors.text",
+              borderRadius: "sm",
+              border: "1px solid",
+              borderColor: "mantine.colors.gray[3]",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              maxWidth: "min(200px, 100%)",
+              minWidth: "60px",
+              flex: "0 1 auto",
+              userSelect: "all",
+              _dark: {
+                backgroundColor: "mantine.colors.dark[9]",
+                color: "mantine.colors.text",
+                borderColor: "mantine.colors.dark[4]"
+              }
+            }),
+            title: value,
+            children: value
+          }
+        ),
+        index < values.length - 1 && /* @__PURE__ */ jsx(
+          Text,
+          {
+            className: css({
+              fontSize: "xs",
+              color: "mantine.colors.gray[5]",
+              fontWeight: 500,
+              flexShrink: 0,
+              _dark: {
+                color: "mantine.colors.dark[3]"
+              }
+            }),
+            children: "•"
+          }
+        )
+      ] }, index))
+    }
+  );
+}
+function MetadataValue({ label, value }) {
+  const elements = Array.isArray(value) ? value : typeof value === "string" && value.includes("\n") ? value.split("\n").map((s) => s.trim()).filter(Boolean) : [value];
+  const hasMultipleElements = elements.length > 1;
+  const [isExpanded, setIsExpanded] = useState(false);
+  const handleToggle = () => {
+    setIsExpanded(!isExpanded);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasMultipleElements ? /* @__PURE__ */ jsx(
+      UnstyledButton,
+      {
+        onClick: handleToggle,
+        className: css({
+          fontSize: "xs",
+          color: "mantine.colors.dimmed",
+          justifySelf: "end",
+          textAlign: "right",
+          userSelect: "none",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          gap: "xs",
+          padding: "[4px 8px]",
+          borderRadius: "sm",
+          whiteSpace: "nowrap",
+          transition: "all 150ms ease",
+          _hover: {
+            backgroundColor: "mantine.colors.gray[1]",
+            color: "mantine.colors.primary[6]",
+            _dark: {
+              backgroundColor: "mantine.colors.dark[7]",
+              color: "mantine.colors.primary[4]"
+            }
+          }
+        }),
+        children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", children: [
+          /* @__PURE__ */ jsxs(Text, { component: "span", size: "xs", fw: 700, children: [
+            label,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              component: "span",
+              className: css({
+                fontSize: "xs",
+                fontWeight: 500,
+                color: "mantine.colors.gray[6]",
+                backgroundColor: "mantine.colors.gray[1]",
+                padding: "[1px 4px]",
+                borderRadius: "xs",
+                _dark: {
+                  color: "mantine.colors.dark[2]",
+                  backgroundColor: "mantine.colors.dark[6]"
+                }
+              }),
+              children: elements.length
+            }
+          ),
+          isExpanded ? /* @__PURE__ */ jsx(IconChevronDown, { size: 12 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 12 })
+        ] })
+      }
+    ) : /* @__PURE__ */ jsxs(
+      Text,
+      {
+        component: "div",
+        className: css({
+          fontSize: "xs",
+          color: "mantine.colors.dimmed",
+          justifySelf: "end",
+          textAlign: "right",
+          userSelect: "none",
+          whiteSpace: "nowrap",
+          padding: "[4px 8px]",
+          fontWeight: 700
+        }),
+        children: [
+          label,
+          ":"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: css({
+          justifySelf: "stretch",
+          alignSelf: "start"
+        }),
+        children: hasMultipleElements ? /* @__PURE__ */ jsx(
+          MultiValueDisplay,
+          {
+            values: elements,
+            isExpanded,
+            onToggle: handleToggle
+          }
+        ) : /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: css({
+              minHeight: "32px",
+              display: "flex",
+              alignItems: "center"
+            }),
+            children: /* @__PURE__ */ jsx(TruncatedValue, { value: elements[0] || "", isExpanded })
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export { MetadataProvider, MetadataValue };

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

@@ -21,6 +21,10 @@ function inputToSubject(input) {
     target: input.target
   };
 }
+const ViewPadding = {
+  x: "22px",
+  y: "22px"
+};
 const _relationshipDetailsLogic = setup({
   types: {
     context: {},
@@ -38,13 +42,13 @@ const _relationshipDetailsLogic = setup({
       const maxZoom = Math.max(xyflow.getZoom(), 1);
       if (bounds) {
         const { width, height } = xystore.getState();
-        const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, 0.1);
+        const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, ViewPadding);
         xyflow.setViewport(viewport, duration > 0 ? { duration } : void 0).catch(console.error);
       } else {
         xyflow.fitView({
           minZoom: MinZoom,
           maxZoom,
-          padding: 0.1,
+          padding: ViewPadding,
           ...duration > 0 && { duration }
         }).catch(console.error);
       }

package/dist/overlays/relationships-browser/const.d.ts

@@ -1,6 +1,6 @@
 export declare const ViewPadding: {
     readonly top: "40px";
-    readonly bottom: "16px";
-    readonly left: "16px";
-    readonly right: "16px";
+    readonly bottom: "22px";
+    readonly left: "22px";
+    readonly right: "22px";
 };

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

@@ -1,8 +1,8 @@
 const ViewPadding = {
   top: "40px",
-  bottom: "16px",
-  left: "16px",
-  right: "16px"
+  bottom: "22px",
+  left: "22px",
+  right: "22px"
 };
 
 export { ViewPadding };