@likec4/diagram 1.42.1 → 1.43.0

package/dist/LikeC4Diagram.d.ts

@@ -8,4 +8,4 @@ export type LikeC4DiagramProps<A extends Any = Any> = PropsWithChildren<LikeC4Di
  *
  * Use {@link ReactLikeC4} or {@link LikeC4View} for ready-to-use component
  */
-export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, onInitialized, view, className, readonly, controls, fitView, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, nodesDraggable, nodesSelectable, showNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, initialWidth, initialHeight, experimentalEdgeEditing, reduceGraphics, renderIcon, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4Diagram<A extends Any = Any>({ onCanvasClick, onCanvasContextMenu, onCanvasDblClick, onEdgeClick, onChange, onEdgeContextMenu, onNavigateTo, onNodeClick, onNodeContextMenu, onOpenSource, onBurgerMenuClick, onInitialized, view, className, readonly, controls, fitView, fitViewPadding: _fitViewPadding, pannable, zoomable, background, enableElementTags, enableFocusMode, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, nodesDraggable, nodesSelectable, enableNotations, showNavigationButtons, enableDynamicViewWalkthrough, dynamicViewVariant, enableSearch, initialWidth, initialHeight, experimentalEdgeEditing, reduceGraphics, renderIcon, where, reactFlowProps, renderNodes, children, }: LikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4Diagram.js

@@ -48,7 +48,7 @@ function LikeC4Diagram({
   enableRelationshipBrowser = false,
   nodesDraggable = !readonly,
   nodesSelectable = !readonly || enableFocusMode || !!onNavigateTo || !!onNodeClick,
-  showNotations = true,
+  enableNotations = false,
   showNavigationButtons = !!onNavigateTo,
   enableDynamicViewWalkthrough = false,
   dynamicViewVariant,
@@ -102,7 +102,7 @@ function LikeC4Diagram({
             enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
             enableDynamicViewWalkthrough: view._type === "dynamic" && enableDynamicViewWalkthrough,
             enableEdgeEditing: experimentalEdgeEditing,
-            enableNotations: showNotations,
+            enableNotations,
             enableVscode: !!onOpenSource,
             enableControls: controls,
             enableElementTags

package/dist/LikeC4Diagram.props.d.ts

@@ -39,6 +39,11 @@ export type PaddingWithUnit = `${number}${PaddingUnit}` | number;
  *   bottom: '8px',
  *   left: '8px',
  * }
+ *
+ * {
+ *   x: '16px',
+ *   y: '16px',
+ * }
  */
 export type ViewPadding = PaddingWithUnit | {
     top?: PaddingWithUnit;
@@ -78,8 +83,8 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      */
     fitView?: boolean | undefined;
     /**
-     * Padding around the diagram
-     * @default '8px'
+     * Padding around the diagram (number - pixels)
+     * @default 16 - 16px
      *
      * @see {@link ViewPadding}
      *
@@ -88,15 +93,15 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      * <LikeC4Diagram
      *   fitViewPadding={{
      *     x: '16px',
-     *     y: '16px',
+     *     y: 16,
      *   }}
      * />
      *
      * <LikeC4Diagram
      *   fitViewPadding={{
-     *     top: '8px',
+     *     top: 8,
      *     right: '8px',
-     *     bottom: '8px',
+     *     bottom: '1px',
      *     left: '8px',
      *   }}
      * />
@@ -135,9 +140,9 @@ export interface LikeC4DiagramProperties<A extends Any = Unknown> {
      * Display notations in the bottom right corner
      * (Active if only notations are present)
      *
-     * @default true
+     * @default false
      */
-    showNotations?: boolean | undefined;
+    enableNotations?: boolean | undefined;
     /**
      * Display dropdown with details on relationship's label click
      * @default false

package/dist/LikeC4View.d.ts

@@ -56,9 +56,28 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
     fitView?: boolean | undefined;
     /**
      * Padding around the diagram
-     * @default '8px'
+     * @default '16px'
      *
      * @see {@link ViewPadding}
+     *
+     * @example
+     * ```tsx
+     * <LikeC4View
+     *   fitViewPadding={{
+     *     x: '16px',
+     *     y: 16,
+     *   }}
+     * />
+     *
+     * <LikeC4View
+     *   fitViewPadding={{
+     *     top: 8,
+     *     right: '8px',
+     *     bottom: '1px',
+     *     left: '8px',
+     *   }}
+     * />
+     * ```
      */
     fitViewPadding?: ViewPadding | undefined;
     /**
@@ -70,7 +89,7 @@ export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
      * Display notations of the view
      * @default false
      */
-    showNotations?: boolean | undefined;
+    enableNotations?: boolean | undefined;
     /**
      * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
      * Conflicts with `browser` prop
@@ -210,7 +229,7 @@ export interface LikeC4BrowserProps {
      * Display notations of the view
      * @default true
      */
-    showNotations?: boolean | undefined;
+    enableNotations?: boolean | undefined;
     /**
      * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
      *
@@ -236,4 +255,4 @@ export interface LikeC4BrowserProps {
  *
  * Component is wrapped in ShadowRoot to isolate styles.
  */
-export declare function LikeC4View<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, pannable, zoomable, keepAspectRatio, colorScheme, injectFontCss, controls, background, browser, showNavigationButtons, showNotations, enableFocusMode, enableDynamicViewWalkthrough, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, reduceGraphics, mantineTheme, styleNonce, style, reactFlowProps, renderNodes, children, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4View<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, pannable, zoomable, keepAspectRatio, colorScheme, injectFontCss, controls, background, browser, showNavigationButtons, enableNotations, enableFocusMode, enableDynamicViewWalkthrough, enableElementDetails, enableRelationshipDetails, enableRelationshipBrowser, reduceGraphics, mantineTheme, styleNonce, style, reactFlowProps, renderNodes, children, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4View.js

@@ -33,7 +33,7 @@ function LikeC4View({
   background = "transparent",
   browser = true,
   showNavigationButtons = false,
-  showNotations,
+  enableNotations,
   enableFocusMode = false,
   enableDynamicViewWalkthrough = false,
   enableElementDetails = false,
@@ -68,9 +68,8 @@ function LikeC4View({
     ] });
   }
   const browserView = browserViewId ? likec4model.findView(browserViewId)?.$view : null;
-  const notations = view.notation?.nodes ?? [];
-  const hasNotations = notations.length > 0;
-  showNotations ??= hasNotations;
+  const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
+  const browserViewHasNotations = (browserView?.notation?.nodes?.length ?? 0) > 0;
   const isBrowserEnabled = browser !== false;
   const browserProps = isBoolean(browser) ? {} : browser;
   const bounds = getViewBounds(view, props.dynamicViewVariant);
@@ -98,7 +97,7 @@ function LikeC4View({
             background,
             fitView: true,
             fitViewPadding: FitViewPaddings.default,
-            showNotations,
+            enableNotations: hasNotations,
             enableDynamicViewWalkthrough,
             showNavigationButtons,
             experimentalEdgeEditing: false,
@@ -144,11 +143,12 @@ function LikeC4View({
               enableElementTags: true,
               controls: true,
               readonly: true,
+              nodesDraggable: false,
               fitView: true,
               ...props,
               fitViewPadding: FitViewPaddings.withControls,
               ...browserProps,
-              showNotations: browserProps.showNotations ?? showNotations,
+              enableNotations: browserViewHasNotations && (browserProps.enableNotations ?? true),
               renderNodes
             }
           ),

package/dist/ReactLikeC4.d.ts

@@ -36,4 +36,4 @@ export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = {
  *
  * Component is wrapped in ShadowRoot to isolate styles.
  */
-export declare function ReactLikeC4<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, colorScheme, injectFontCss, keepAspectRatio, showNotations, style, mantineTheme, styleNonce, ...props }: ReactLikeC4Props<A>): import("react/jsx-runtime").JSX.Element;
+export declare function ReactLikeC4<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, className, colorScheme, injectFontCss, enableNotations, keepAspectRatio, style, mantineTheme, styleNonce, ...props }: ReactLikeC4Props<A>): import("react/jsx-runtime").JSX.Element;

package/dist/ReactLikeC4.js

@@ -11,8 +11,8 @@ function ReactLikeC4({
   className,
   colorScheme,
   injectFontCss = true,
+  enableNotations,
   keepAspectRatio,
-  showNotations,
   style,
   mantineTheme,
   styleNonce,
@@ -33,10 +33,8 @@ function ReactLikeC4({
       '" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.'
     ] });
   }
-  const notations = view.notation?.nodes ?? [];
-  const hasNotations = notations.length > 0;
-  showNotations ??= hasNotations;
   const bounds = getViewBounds(view, props.dynamicViewVariant);
+  const hasNotations = !!enableNotations && (view.notation?.nodes?.length ?? 0) > 0;
   return /* @__PURE__ */ jsx(
     ShadowRoot,
     {
@@ -54,7 +52,7 @@ function ReactLikeC4({
         LikeC4Diagram,
         {
           view,
-          showNotations,
+          enableNotations: hasNotations,
           ...props
         }
       )

package/dist/StaticLikeC4Diagram.js

@@ -24,7 +24,7 @@ function StaticLikeC4Diagram({
       zoomable: false,
       controls: false,
       background,
-      showNotations: false,
+      enableNotations: false,
       enableElementDetails: false,
       enableRelationshipDetails,
       enableRelationshipBrowser,

package/dist/base/const.d.ts

@@ -9,7 +9,7 @@ export declare const MaxZoom = 3;
 export declare const FitViewPaddings: {
     default: "16px";
     withControls: {
-        top: "50px";
+        top: "58px";
         left: "16px";
         right: "16px";
         bottom: "16px";

package/dist/base/const.js

@@ -10,7 +10,7 @@ const MaxZoom = 3;
 const FitViewPaddings = {
   default: "16px",
   withControls: {
-    top: "50px",
+    top: "58px",
     left: "16px",
     right: "16px",
     bottom: "16px"

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -112,16 +112,13 @@ const ElementNotation = ({ value }) => {
 };
 const selector = (s) => ({
   id: s.view.id,
-  notations: s.view.notation?.nodes ?? [],
-  isVisible: true
-  // isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough),
+  notations: s.view.notation?.nodes ?? []
 });
 const NotationPanel = memo(() => {
   const height = useXYStore((s) => s.height);
   const {
     id,
-    notations,
-    isVisible
+    notations
   } = useDiagramContext(selector);
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: "notation-webview-collapsed",
@@ -130,7 +127,7 @@ const NotationPanel = memo(() => {
   const hasNotations = notations.length > 0;
   const portalProps = useMantinePortalProps();
   return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
-    !hasNotations && isVisible && /* @__PURE__ */ jsx(
+    !hasNotations && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: { opacity: 0.75, translateX: "50%" },
@@ -153,7 +150,7 @@ const NotationPanel = memo(() => {
       },
       "empty"
     ),
-    hasNotations && isVisible && isCollapsed && /* @__PURE__ */ jsx(
+    hasNotations && isCollapsed && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: { opacity: 0.75, translateX: "50%" },
@@ -177,7 +174,7 @@ const NotationPanel = memo(() => {
       },
       "collapsed"
     ),
-    hasNotations && isVisible && !isCollapsed && /* @__PURE__ */ jsx(
+    hasNotations && !isCollapsed && /* @__PURE__ */ jsx(
       m.div,
       {
         initial: {

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