likec4 1.42.1 → 1.43.0

package/__app__/src/likec4.js

@@ -1801,7 +1801,7 @@ const ZIndexes = {
 }, MinZoom = 0.05, MaxZoom = 3, FitViewPaddings = {
   default: "16px",
   withControls: {
-    top: "50px",
+    top: "58px",
     left: "16px",
     right: "16px",
     bottom: "16px"
@@ -8044,7 +8044,252 @@ const useElementDetailsActorRef = () => {
     borderWidth: "4px",
     borderColor: "mantine.colors.dark[1]"
   }
-}), treeNode$1 = css({
+});
+function MetadataProvider({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function TruncatedValue({ value, isExpanded }) {
+  const [isTruncated, setIsTruncated] = useState(!1), textRef = useRef(null);
+  return useEffect(() => {
+    textRef.current && setIsTruncated(textRef.current.scrollWidth > textRef.current.clientWidth);
+  }, [value]), /* @__PURE__ */ jsx(
+    Tooltip$6,
+    {
+      label: isTruncated && !isExpanded ? value : null,
+      multiline: !0,
+      w: 300,
+      withinPortal: !0,
+      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
+}) {
+  return isExpanded ? /* @__PURE__ */ jsx(Stack, { gap: "xs", children: values.map((value, index2) => /* @__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$1,
+      {
+        className: css({
+          minHeight: "32px",
+          display: "flex",
+          alignItems: "center",
+          flex: 1
+        }),
+        children: /* @__PURE__ */ jsx(TruncatedValue, { value, isExpanded: !0 })
+      }
+    )
+  ] }, index2)) }) : /* @__PURE__ */ jsx(
+    Box$1,
+    {
+      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, index2) => /* @__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
+          }
+        ),
+        index2 < 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: "•"
+          }
+        )
+      ] }, index2))
+    }
+  );
+}
+function MetadataValue({ label: label2, value }) {
+  const elements = Array.isArray(value) ? value : typeof value == "string" && value.includes(`
+`) ? value.split(`
+`).map((s) => s.trim()).filter(Boolean) : [value], hasMultipleElements = elements.length > 1, [isExpanded, setIsExpanded] = useState(!1), 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: [
+            label2,
+            ":"
+          ] }),
+          /* @__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: [
+          label2,
+          ":"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box$1,
+      {
+        className: css({
+          justifySelf: "stretch",
+          alignSelf: "start"
+        }),
+        children: hasMultipleElements ? /* @__PURE__ */ jsx(
+          MultiValueDisplay,
+          {
+            values: elements,
+            isExpanded,
+            onToggle: handleToggle
+          }
+        ) : /* @__PURE__ */ jsx(
+          Box$1,
+          {
+            className: css({
+              minHeight: "32px",
+              display: "flex",
+              alignItems: "center"
+            }),
+            children: /* @__PURE__ */ jsx(TruncatedValue, { value: elements[0] || "", isExpanded })
+          }
+        )
+      }
+    )
+  ] });
+}
+const treeNode$1 = css({
   "&[data-level='1']": {
     marginBottom: "sm"
   }
@@ -10002,7 +10247,7 @@ function ElementDetailsCard({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(MetadataProvider, { children: /* @__PURE__ */ jsxs(
               Tabs,
               {
                 value: activeTab,
@@ -10082,7 +10327,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,
               {
@@ -10136,97 +10381,24 @@ function ElementProperty({
 function ElementMetata({
   value: metadata
 }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(PropertyLabel, { children: "metadata" }),
+  const metadataEntries = t$c(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$1,
       {
         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: t$c(metadata).map(([key2, value]) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "contents"
-            },
-            className: "group",
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: css({
-                    fontSize: "sm",
-                    fontWeight: 500,
-                    justifySelf: "end",
-                    whiteSpace: "nowrap"
-                  }),
-                  children: [
-                    key2,
-                    ":"
-                  ]
-                }
-              ),
-              /* @__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
-                        }
-                      )
-                    }
-                  )
-                }
-              )
-            ]
-          },
-          key2
-        ))
+        children: metadataEntries.map(([key2, value]) => /* @__PURE__ */ jsx(MetadataValue, { label: key2, value }, key2))
       }
     )
-  ] });
+  ] }) });
 }
 function ElementDetails({
   actorRef,
@@ -12986,20 +13158,17 @@ const shapeBadge = css({
   );
 }, selector = (s) => ({
   id: s.view.id,
-  notations: s.view.notation?.nodes ?? [],
-  isVisible: !0
-  // isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough),
+  notations: s.view.notation?.nodes ?? []
 }), NotationPanel = memo$1(() => {
   const height = useXYStore((s) => s.height), {
     id,
-    notations,
-    isVisible
+    notations
   } = useDiagramContext(selector), [isCollapsed, setCollapsed] = useLocalStorage({
     key: "notation-webview-collapsed",
     defaultValue: !0
   }), hasNotations = notations.length > 0, portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-    !hasNotations && isVisible && /* @__PURE__ */ jsx(
+    !hasNotations && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: { opacity: 0.75, translateX: "50%" },
@@ -13022,7 +13191,7 @@ const shapeBadge = css({
       },
       "empty"
     ),
-    hasNotations && isVisible && isCollapsed && /* @__PURE__ */ jsx(
+    hasNotations && isCollapsed && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: { opacity: 0.75, translateX: "50%" },
@@ -13046,7 +13215,7 @@ const shapeBadge = css({
       },
       "collapsed"
     ),
-    hasNotations && isVisible && !isCollapsed && /* @__PURE__ */ jsx(
+    hasNotations && !isCollapsed && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: {
@@ -14191,11 +14360,11 @@ function _update(current, updated) {
 function updateNodes(current, update) {
   return e$c(update) ? _update(current, update) : (update = current, (current2) => _update(current2, update));
 }
-const ViewPadding = {
+const ViewPadding$1 = {
   top: "40px",
-  bottom: "16px",
-  left: "16px",
-  right: "16px"
+  bottom: "22px",
+  left: "22px",
+  right: "22px"
 };
 function viewToNodesEdge(view) {
   const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map(), queue = Queue.from(view.nodes.reduce(
@@ -14354,7 +14523,7 @@ const findRootSubject = (nodes) => nodes.find(
     };
   }, parent = nonNullable(self._parent);
   let zoom = xyflow2.getZoom();
-  const maxZoom = Math.max(zoom, 1), nextviewport = getViewportForBounds(update.bounds, width, height, MinZoom, maxZoom, ViewPadding), nextSubjectNode = next.xynodes.find(
+  const maxZoom = Math.max(zoom, 1), nextviewport = getViewportForBounds(update.bounds, width, height, MinZoom, maxZoom, ViewPadding$1), nextSubjectNode = next.xynodes.find(
     (n2) => n2.type !== "empty" && n2.data.column === "subjects" && n2.data.fqn === subjectId
   ) ?? findRootSubject(next.xynodes), currentSubjectNode = findRootSubject(currentNodes), existingNode = navigateFromNode ? currentNodes.find((n2) => n2.id === navigateFromNode) : currentNodes.find((n2) => n2.type !== "empty" && n2.data.column !== "subjects" && n2.data.fqn === subjectId);
   if (!nextSubjectNode || !existingNode || nextSubjectNode.type === "empty" || !currentSubjectNode || nextSubjectNode.data.fqn === currentSubjectNode.data.fqn)
@@ -14441,13 +14610,13 @@ const findRootSubject = (nodes) => nodes.find(
       invariant(xyflow2, "xyflow is not initialized"), invariant(xystore, "xystore is not initialized"), bounds ??= context2.layouted?.bounds;
       const maxZoom = Math.max(xyflow2.getZoom(), 1);
       if (bounds) {
-        const { width, height } = xystore.getState(), viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, ViewPadding);
+        const { width, height } = xystore.getState(), viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, ViewPadding$1);
         xyflow2.setViewport(viewport, duration > 0 ? { duration } : void 0).catch(console.error);
       } else
         xyflow2.fitView({
           minZoom: MinZoom,
           maxZoom,
-          padding: ViewPadding,
+          padding: ViewPadding$1,
           ...duration > 0 && { duration }
         }).catch(console.error);
     },
@@ -14871,7 +15040,10 @@ function inputToSubject(input2) {
     target: input2.target
   };
 }
-const _relationshipDetailsLogic = xstate_cjsExports.setup({
+const ViewPadding = {
+  x: "22px",
+  y: "22px"
+}, _relationshipDetailsLogic = xstate_cjsExports.setup({
   types: {
     context: {},
     input: {},
@@ -14885,13 +15057,13 @@ const _relationshipDetailsLogic = xstate_cjsExports.setup({
       invariant(xyflow2, "xyflow is not initialized"), invariant(xystore, "xystore is not initialized"), bounds ??= context2.bounds;
       const maxZoom = Math.max(xyflow2.getZoom(), 1);
       if (bounds) {
-        const { width, height } = xystore.getState(), viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, 0.1);
+        const { width, height } = xystore.getState(), viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, ViewPadding);
         xyflow2.setViewport(viewport, duration > 0 ? { duration } : void 0).catch(console.error);
       } else
         xyflow2.fitView({
           minZoom: MinZoom,
           maxZoom,
-          padding: 0.1,
+          padding: ViewPadding,
           ...duration > 0 && { duration }
         }).catch(console.error);
     },
@@ -17285,7 +17457,7 @@ function LikeC4Diagram({
   enableRelationshipBrowser = !1,
   nodesDraggable = !readonly,
   nodesSelectable = !readonly || enableFocusMode || !!onNavigateTo || !!onNodeClick,
-  showNotations = !0,
+  enableNotations = !1,
   showNavigationButtons = !!onNavigateTo,
   enableDynamicViewWalkthrough = !1,
   dynamicViewVariant,
@@ -17334,7 +17506,7 @@ function LikeC4Diagram({
             enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
             enableDynamicViewWalkthrough: view._type === "dynamic" && enableDynamicViewWalkthrough,
             enableEdgeEditing: experimentalEdgeEditing,
-            enableNotations: showNotations,
+            enableNotations,
             enableVscode: !!onOpenSource,
             enableControls: controls,
             enableElementTags
@@ -17444,7 +17616,7 @@ function StaticLikeC4Diagram({
       zoomable: !1,
       controls: !1,
       background,
-      showNotations: !1,
+      enableNotations: !1,
       enableElementDetails: !1,
       enableRelationshipDetails,
       enableRelationshipBrowser,

package/__app__/src/main.js

@@ -1569,7 +1569,7 @@ function ExportPage() {
             pannable: !1,
             zoomable: !1,
             controls: !1,
-            showNotations: !1,
+            enableNotations: !1,
             enableElementDetails: !1,
             enableRelationshipDetails: !1,
             enableRelationshipBrowser: !1,
@@ -1690,7 +1690,7 @@ function ViewReact() {
       enableRelationshipBrowser: !0,
       enableElementTags: !0,
       experimentalEdgeEditing: !1,
-      showNotations: hasNotations,
+      enableNotations: hasNotations,
       nodesDraggable: !1,
       nodesSelectable: !0,
       onNavigateTo,
@@ -1951,7 +1951,7 @@ function ViewEditor() {
         right: "32px"
       },
       showNavigationButtons: !0,
-      showNotations: isDevelopment || hasNotations,
+      enableNotations: isDevelopment || hasNotations,
       enableSearch: !0,
       enableDynamicViewWalkthrough: !0,
       enableFocusMode: !0,