@likec4/diagram 1.42.1 → 1.43.0

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 };

package/dist/shadowroot/ShadowRoot.js

@@ -1,13 +1,54 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { MantineProvider } from '@mantine/core';
+import { useCallbackRef } from '@mantine/hooks';
 import { useRef, useCallback } from 'react';
 import root from 'react-shadow';
 import { isDefined } from 'remeda';
 import { FramerMotionConfig } from '../context/FramerMotionConfig.js';
 import { useId } from '../hooks/useId.js';
-import { useColorScheme, useShadowRootStyle, useBundledStyleSheet, DefaultTheme } from './styles.css.js';
+import { useColorScheme, useBundledStyleSheet, DefaultTheme } from './styles.css.js';
 
 const Root = root["div"];
+function useShadowRootStyle(instanceId, keepAspectRatio = false) {
+  if (keepAspectRatio === false) {
+    return `
+:where([data-likec4-instance="${instanceId}"]) {
+  display: block;
+  box-sizing: border-box;
+  border: 0 solid transparent;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  min-width: 80px;
+  min-height: 80px;
+}
+  `.trim();
+  }
+  const { width, height } = keepAspectRatio;
+  const isLandscape = width > height;
+  return `
+:where([data-likec4-instance="${instanceId}"]) {
+  display: block;
+  box-sizing: border-box;
+  border: 0 solid transparent;
+  background: transparent;
+  padding: 0;
+  overflow: hidden;
+  aspect-ratio: ${Math.ceil(width)} / ${Math.ceil(height)};
+  ${isLandscape ? "" : `
+  max-width: min(100%, var(--likec4-view-max-width, ${Math.ceil(width)}px));
+  margin-left: auto;
+  margin-right: auto;`}
+  width: ${isLandscape ? "100%" : "auto"};
+  height: ${isLandscape ? "auto" : "100%"};
+  ${isLandscape ? `min-width: 80px;` : `min-height: 80px;`}
+  max-height: min(100%, var(--likec4-view-max-height, ${Math.ceil(height)}px));
+}
+`.trim();
+}
 function ShadowRoot({
   children,
   theme = DefaultTheme,
@@ -23,17 +64,17 @@ function ShadowRoot({
   const rootRef = useRef(null);
   const styleSheets = useBundledStyleSheet(injectFontCss, styleNonce);
   const getRootElement = useCallback(() => rootRef.current ?? void 0, [rootRef]);
-  let getStyleNonce;
-  let nonce;
-  if (isDefined(styleNonce)) {
-    if (typeof styleNonce === "string") {
-      nonce = styleNonce;
-      getStyleNonce = () => styleNonce;
-    } else if (typeof styleNonce === "function") {
-      nonce = styleNonce();
-      getStyleNonce = styleNonce;
+  const getStyleNonce = useCallbackRef(() => {
+    if (isDefined(styleNonce)) {
+      if (typeof styleNonce === "string") {
+        return styleNonce;
+      } else if (typeof styleNonce === "function") {
+        return styleNonce();
+      }
     }
-  }
+    return "";
+  });
+  let nonce = isDefined(styleNonce) ? getStyleNonce() : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "style",
@@ -55,7 +96,7 @@ function ShadowRoot({
             ...explicitColorScheme && { forceColorScheme: explicitColorScheme },
             defaultColorScheme: colorScheme,
             getRootElement,
-            ...getStyleNonce && { getStyleNonce },
+            ...!!nonce && { getStyleNonce },
             cssVariablesSelector: ".likec4-shadow-root",
             theme,
             children: /* @__PURE__ */ jsx(FramerMotionConfig, { children })

package/dist/shadowroot/styles.css.d.ts

@@ -4,7 +4,3 @@ export declare const cssInteractive: string;
 export declare function useBundledStyleSheet(injectFontCss: boolean, styleNonce?: string | (() => string) | undefined): CSSStyleSheet[];
 export type ColorScheme = 'light' | 'dark';
 export declare function useColorScheme(explicit?: ColorScheme): ColorScheme;
-export declare function useShadowRootStyle(instanceId: string, keepAspectRatio?: false | {
-    width: number;
-    height: number;
-}): string;

package/dist/shadowroot/styles.css.js

@@ -95,45 +95,5 @@ function useColorScheme(explicit) {
   );
   return explicit ?? computed ?? preferred;
 }
-function useShadowRootStyle(instanceId, keepAspectRatio = false) {
-  if (keepAspectRatio === false) {
-    return `
-:where([data-likec4-instance="${instanceId}"]) {
-  display: block;
-  box-sizing: border-box;
-  border: 0 solid transparent;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  min-width: 80px;
-  min-height: 80px;
-}
-  `.trim();
-  }
-  const { width, height } = keepAspectRatio;
-  const isLandscape = width > height;
-  return `
-:where([data-likec4-instance="${instanceId}"]) {
-  display: block;
-  box-sizing: border-box;
-  border: 0 solid transparent;
-  background: transparent;
-  padding: 0;
-  overflow: hidden;
-  aspect-ratio: ${Math.ceil(width)} / ${Math.ceil(height)};
-  ${isLandscape ? "" : `
-  max-width: min(100%, var(--likec4-view-max-width, ${Math.ceil(width)}px));
-  margin-left: auto;
-  margin-right: auto;`}
-  width: ${isLandscape ? "100%" : "auto"};
-  height: ${isLandscape ? "auto" : "100%"};
-  ${isLandscape ? `min-width: 80px;` : `min-height: 80px;`}
-  max-height: min(100%, var(--likec4-view-max-height, ${Math.ceil(height)}px));
-}
-`.trim();
-}
 
-export { DefaultTheme, useBundledStyleSheet, useColorScheme, useShadowRootStyle };
+export { DefaultTheme, useBundledStyleSheet, useColorScheme };