@likec4/diagram 1.54.0 → 1.55.1

package/dist/base-primitives/edge/EdgeLabelContainer.d.ts

@@ -14,6 +14,6 @@ type EdgeLabelContainerProps = HTMLAttributes<HTMLDivElement> & {
     } | undefined;
     edgeProps: BaseEdgePropsWithData<Data>;
 };
-export declare function EdgeLabelContainer({ edgeProps: { id, selected, data: { hovered: isHovered, active: isActive, dimmed: isDimmed, labelBBox, color, }, animated, }, labelPosition: labelXY, className, style: _, // omit styles for container
+export declare function EdgeLabelContainer({ edgeProps: { id, selected, data: { hovered: isHovered, active: isActive, dimmed: isDimmed, labelBBox, color, }, animated, }, labelPosition: labelXY, className, style: contentStyle, // applied to inner content div, not the positioned container
 children, ...rest }: EdgeLabelContainerProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/base-primitives/edge/EdgeLabelContainer.js

@@ -22,8 +22,8 @@ function EdgeLabelContainer({
   },
   labelPosition: labelXY,
   className,
-  style: _,
-  // omit styles for container
+  style: contentStyle,
+  // applied to inner content div, not the positioned container
   children,
   ...rest
 }) {
@@ -61,9 +61,10 @@ function EdgeLabelContainer({
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          style: labelBBox ? {
-            maxWidth: labelBBox.width + 20
-          } : void 0,
+          style: {
+            ...contentStyle,
+            ...labelBBox && { maxWidth: labelBBox.width + 20 }
+          },
           children
         }
       )

package/dist/likec4diagram/relationship-popover/RelationshipPopover.js

@@ -484,11 +484,18 @@ const Relationship = forwardRef(({
         ] }),
         r.kind && /* @__PURE__ */ jsxs(HStack, { gap: "2", children: [
           /* @__PURE__ */ jsx(Label, { children: "kind" }),
-          /* @__PURE__ */ jsx(Text, { size: "xs", className: css({ userSelect: "all" }), children: r.kind })
+          /* @__PURE__ */ jsx(Text, { size: "xs", className: css({ userSelect: "all", wordBreak: "break-word", minWidth: 0 }), children: r.kind })
         ] }),
         r.technology && /* @__PURE__ */ jsxs(HStack, { gap: "2", children: [
           /* @__PURE__ */ jsx(Label, { children: "technology" }),
-          /* @__PURE__ */ jsx(Text, { size: "xs", className: css({ userSelect: "all" }), children: r.technology })
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "xs",
+              className: css({ userSelect: "all", wordBreak: "break-word", minWidth: 0 }),
+              children: r.technology
+            }
+          )
         ] }),
         r.summary.nonEmpty && /* @__PURE__ */ jsxs(Fragment$1, { children: [
           /* @__PURE__ */ jsx(Label, { children: "description" }),

package/dist/likec4diagram/relationship-popover/components.js

@@ -11,6 +11,9 @@ const Endpoint = ({ children, likec4color }) => {
         size: "xxs",
         fontWeight: "medium",
         whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        maxWidth: "160px",
         paddingX: "1",
         paddingY: "0.5",
         rounded: "xs",
@@ -32,7 +35,10 @@ const RelationshipTitle = styled("div", {
     whiteSpaceCollapse: "preserve-breaks",
     fontSize: "sm",
     lineHeight: "sm",
-    userSelect: "all"
+    userSelect: "all",
+    overflowWrap: "anywhere",
+    wordBreak: "break-word",
+    minWidth: 0
   }
 });
 

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

@@ -58,9 +58,11 @@ const title = css({
   fontStyle: "normal",
   fontWeight: "bold",
   fontSize: "24px",
-  // lineHeight: 1.15,
-  lineHeight: "xs"
-  // color: vars.element.hiContrast
+  lineHeight: "xs",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  wordBreak: "break-word",
+  lineClamp: 2
 });
 const iconSize = "40px";
 const elementIcon = css({

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
 import { HStack } from '@likec4/styles/jsx';
-import { RemoveScroll, Text, CloseButton, Badge, ActionIconGroup, ActionIcon, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Box, Stack, Flex, Tooltip as Tooltip$1, Divider as Divider$1, UnstyledButton, Group, ThemeIcon } from '@mantine/core';
+import { RemoveScroll, Text, CloseButton, Badge, ActionIconGroup, ActionIcon, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Box, Stack, Tooltip as Tooltip$1, Flex, Divider as Divider$1, UnstyledButton, Group, ThemeIcon } from '@mantine/core';
 import { useViewportSize, useSessionStorage } from '@mantine/hooks';
 import { useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
 import { useDragControls, useMotionValue, m } from 'motion/react';
@@ -226,20 +226,29 @@ function ElementDetailsCard({
           children: [
             /* @__PURE__ */ jsxs("div", { className: cardHeader, onPointerDown: (e) => controls.start(e), children: [
               /* @__PURE__ */ jsxs(HStack, { alignItems: "start", justify: "space-between", gap: "sm", mb: "sm", flexWrap: "nowrap", children: [
-                /* @__PURE__ */ jsxs(HStack, { alignItems: "start", gap: "sm", style: { cursor: "default" }, flexWrap: "nowrap", children: [
-                  elementIcon$1,
-                  /* @__PURE__ */ jsxs("div", { children: [
-                    /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        component: "div",
-                        className: title,
-                        children: elementModel.title
-                      }
-                    ),
-                    notation && /* @__PURE__ */ jsx(Text, { component: "div", c: "dimmed", fz: "sm", fw: 500, lh: 1.3, lineClamp: 1, children: notation })
-                  ] })
-                ] }),
+                /* @__PURE__ */ jsxs(
+                  HStack,
+                  {
+                    alignItems: "start",
+                    gap: "sm",
+                    style: { cursor: "default", minWidth: 0, overflow: "hidden" },
+                    flexWrap: "nowrap",
+                    children: [
+                      elementIcon$1,
+                      /* @__PURE__ */ jsxs("div", { style: { minWidth: 0, overflow: "hidden" }, children: [
+                        /* @__PURE__ */ jsx(Tooltip, { label: elementModel.title, openDelay: 600, position: "bottom-start", children: /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            component: "div",
+                            className: title,
+                            children: elementModel.title
+                          }
+                        ) }),
+                        notation && /* @__PURE__ */ jsx(Text, { component: "div", c: "dimmed", fz: "sm", fw: 500, lh: 1.3, lineClamp: 1, children: notation })
+                      ] })
+                    ]
+                  }
+                ),
                 /* @__PURE__ */ jsx(CloseButton, { size: "lg", onClick: triggerClose })
               ] }),
               /* @__PURE__ */ jsxs(HStack, { alignItems: "baseline", gap: "sm", flexWrap: "nowrap", children: [
@@ -263,7 +272,7 @@ function ElementDetailsCard({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, children: [
                   /* @__PURE__ */ jsx(SmallLabel, { children: "tags" }),
                   /* @__PURE__ */ jsx(
                     ElementTags,

package/dist/overlays/overlay/Overlay.js

@@ -43,6 +43,13 @@ const Overlay = forwardRef(({
     if (!dialogRef.current?.open) {
       dialogRef.current?.showModal();
     }
+    const dialog = dialogRef.current;
+    return () => {
+      if (dialog?.open) {
+        isClosingRef.current = true;
+        dialog.close();
+      }
+    };
   }, []);
   useTimeoutEffect(() => {
     setOpened(true);

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

@@ -12,7 +12,7 @@ const Sizes = {
   },
   edgeLabel: {
     width: 220,
-    height: 14
+    height: 55
     // minlen: 1,
   },
   nodeWidth: 330,