@likec4/diagram 1.55.1 → 1.56.0

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

@@ -1,510 +1,528 @@
-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, 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';
-import { useState, useCallback, useRef } from 'react';
-import { pipe, map, partition, only, clamp, isNullish, entries } from 'remeda';
-import { ElementTag } from '../../base-primitives/element/ElementTags.js';
-import { Link } from '../../components/Link.js';
-import { useCurrentViewModel } from '../../hooks/useCurrentViewModel.js';
-import '@xstate/react';
-import 'fast-equals';
-import { useDiagram } from '../../hooks/safeContext.js';
-import { useCallbackRef } from '../../hooks/useCallbackRef.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';
-import { useUpdateEffect } from '../../hooks/useUpdateEffect.js';
-import { IconRenderer } from '../../context/IconRenderer.js';
-import { stopPropagation } from '../../utils/xyflow.js';
-import IconExternalLink from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js';
-import { IfEnabled, DiagramFeatures } from '../../context/DiagramFeatures.js';
-import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import { Markdown } from '../../base-primitives/Markdown.js';
-import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
-
-const Divider = Divider$1.withProps({
-  mb: 8,
-  labelPosition: "left",
-  variant: "dashed"
+import "../../_virtual/_rolldown/runtime.js";
+import { IconRenderer } from "../../context/IconRenderer.js";
+import { useCallbackRef as useCallbackRef$1 } from "../../hooks/useCallbackRef.js";
+import { useUpdateEffect as useUpdateEffect$1 } from "../../hooks/useUpdateEffect.js";
+import { stopPropagation } from "../../utils/xyflow.js";
+import { DiagramFeatures, IfEnabled } from "../../context/DiagramFeatures.js";
+import { useDiagram } from "../../hooks/safeContext.js";
+import { useCurrentViewModel } from "../../hooks/useCurrentViewModel.js";
+import { Markdown } from "../../base-primitives/Markdown.js";
+import { ElementTag } from "../../base-primitives/element/ElementTags.js";
+import { Link } from "../../components/Link.js";
+import { backdropBlur, backdropOpacity, card, cardHeader, dialog, elementIcon, propertiesGrid, propertyLabel, resizeHandle, tabsList, tabsPanel, tabsRoot, tabsTab, title, 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";
+import { css, cx } from "@likec4/styles/css";
+import { IconExternalLink, IconFileSymlink, IconStack2, IconZoomScan } from "@tabler/icons-react";
+import { useCallback, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useDebouncedCallback, useTimeoutEffect } from "@react-hookz/web";
+import { clamp, entries, isNullish, map, only, partition, pipe } from "remeda";
+import { ActionIcon, ActionIconGroup, Badge, Box, CloseButton, Divider, Flex, Group, RemoveScroll, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Text, ThemeIcon, Tooltip, UnstyledButton } from "@mantine/core";
+import { m, useDragControls, useMotionValue } from "motion/react";
+import { useSessionStorage, useViewportSize } from "@mantine/hooks";
+import { HStack } from "@likec4/styles/jsx";
+//#region src/overlays/element-details/ElementDetailsCard.tsx
+var Divider$1 = Divider.withProps({
+	mb: 8,
+	labelPosition: "left",
+	variant: "dashed"
 });
-const Tooltip = Tooltip$1.withProps({
-  color: "dark",
-  fz: "xs",
-  openDelay: 400,
-  closeDelay: 150,
-  label: "",
-  children: null,
-  offset: 4
+var Tooltip$1 = Tooltip.withProps({
+	color: "dark",
+	fz: "xs",
+	openDelay: 400,
+	closeDelay: 150,
+	label: "",
+	children: null,
+	offset: 4
 });
-const SmallLabel = Text.withProps({
-  component: "div",
-  fz: 11,
-  fw: 500,
-  c: "dimmed",
-  lh: 1
+var SmallLabel = Text.withProps({
+	component: "div",
+	fz: 11,
+	fw: 500,
+	c: "dimmed",
+	lh: 1
 });
-const PropertyLabel = Text.withProps({
-  component: "div",
-  fz: "xs",
-  c: "dimmed",
-  className: propertyLabel
+var PropertyLabel = Text.withProps({
+	component: "div",
+	fz: "xs",
+	c: "dimmed",
+	className: propertyLabel
 });
-const MIN_PADDING = 24;
-const TABS = ["Properties", "Relationships", "Views", "Structure", "Deployments"];
-function ElementDetailsCard({
-  viewId,
-  fromNode,
-  rectFromNode,
-  fqn,
-  onClose
-}) {
-  const [opened, setOpened] = useState(false);
-  const windowSize = useViewportSize();
-  const windowWidth = windowSize.width || window.innerWidth || 1200, windowHeight = windowSize.height || window.innerHeight || 800;
-  const [activeTab, setActiveTab] = useSessionStorage({
-    key: `likec4:element-details:active-tab`,
-    defaultValue: "Properties"
-  });
-  const diagram = useDiagram();
-  const viewModel = useCurrentViewModel();
-  const nodeModel = fromNode ? viewModel.findNode(fromNode) : viewModel.findNodeWithElement(fqn);
-  const elementModel = viewModel.$model.element(fqn);
-  const [viewsOf, otherViews] = pipe(
-    [...elementModel.views()],
-    map((v) => v.$view),
-    partition((v) => v._type === "element" && v.viewOf === fqn)
-  );
-  let defaultView = nodeModel?.navigateTo?.$view ?? elementModel.defaultView?.$view ?? null;
-  if (defaultView?.id === viewId) {
-    defaultView = null;
-  }
-  const defaultLink = only(elementModel.links);
-  const controls = useDragControls();
-  const isCompound = (nodeModel?.$node.children?.length ?? 0) > 0;
-  const _width = Math.min(700, windowWidth - MIN_PADDING * 2);
-  const _height = Math.min(650, windowHeight - MIN_PADDING * 2);
-  const fromPosition = rectFromNode ? {
-    x: rectFromNode.x + (isCompound ? rectFromNode.width - _width / 2 : rectFromNode.width / 2),
-    y: rectFromNode.y + (isCompound ? 0 : rectFromNode.height / 2)
-  } : {
-    x: windowWidth / 2,
-    y: windowHeight / 2
-  };
-  const fromScale = rectFromNode ? Math.min(rectFromNode.width / _width, rectFromNode.height / _height, 0.9) : 1;
-  const left = Math.round(
-    clamp(fromPosition.x - _width / 2, {
-      min: MIN_PADDING,
-      max: windowWidth - _width - MIN_PADDING
-    })
-  );
-  const top = Math.round(
-    clamp(fromPosition.y - (isCompound ? 0 : 60), {
-      min: MIN_PADDING,
-      max: windowHeight - _height - MIN_PADDING
-    })
-  );
-  const originX = clamp((fromPosition.x - left) / _width, {
-    min: 0.1,
-    max: 0.9
-  });
-  const originY = clamp((fromPosition.y - top) / _height, {
-    min: 0.1,
-    max: 0.9
-  });
-  const width = useMotionValue(_width);
-  const height = useMotionValue(_height);
-  useUpdateEffect(() => {
-    width.set(_width);
-    height.set(_height);
-  }, [_width, _height]);
-  const handleDrag = useCallback((_, info) => {
-    width.set(Math.max(width.get() + info.delta.x, 320));
-    height.set(Math.max(height.get() + info.delta.y, 300));
-  }, [width, height]);
-  const ref = useRef(null);
-  const close = useDebouncedCallback(
-    useCallbackRef(onClose),
-    [],
-    50
-  );
-  const triggerClose = useCallbackRef((event) => {
-    event?.stopPropagation();
-    close();
-  });
-  const notation = nodeModel?.$node.notation ?? null;
-  const elementIcon$1 = IconRenderer({
-    element: {
-      id: fqn,
-      title: elementModel.title,
-      icon: nodeModel?.icon ?? elementModel.icon
-    },
-    className: elementIcon
-  });
-  useTimeoutEffect(() => {
-    if (!ref.current?.open) {
-      ref.current?.showModal();
-    }
-  }, 20);
-  useTimeoutEffect(() => {
-    setOpened(true);
-  }, 220);
-  return /* @__PURE__ */ jsx(
-    m.dialog,
-    {
-      ref,
-      className: cx(dialog, RemoveScroll.classNames.fullWidth),
-      layout: true,
-      initial: {
-        [backdropBlur]: "0px",
-        [backdropOpacity]: "5%"
-      },
-      animate: {
-        [backdropBlur]: "3px",
-        [backdropOpacity]: "60%"
-      },
-      exit: {
-        [backdropBlur]: "0px",
-        [backdropOpacity]: "0%",
-        transition: {
-          duration: 0.1
-        }
-      },
-      onClick: (e) => {
-        e.stopPropagation();
-        if (e.target?.nodeName?.toUpperCase() === "DIALOG") {
-          ref.current?.close();
-        }
-      },
-      onDoubleClick: stopPropagation,
-      onPointerDown: stopPropagation,
-      onClose: triggerClose,
-      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, removeScrollBar: false, children: /* @__PURE__ */ jsxs(
-        m.div,
-        {
-          layout: true,
-          layoutRoot: true,
-          drag: true,
-          dragControls: controls,
-          dragElastic: 0,
-          dragMomentum: false,
-          dragListener: false,
-          "data-likec4-color": nodeModel?.color ?? elementModel.color,
-          className: card,
-          initial: {
-            top,
-            left,
-            width: _width,
-            height: _height,
-            opacity: 0,
-            originX,
-            originY,
-            scale: Math.max(fromScale, 0.65)
-          },
-          animate: {
-            opacity: 1,
-            scale: 1
-          },
-          exit: {
-            opacity: 0,
-            scale: 0.9,
-            translateY: -10,
-            transition: {
-              duration: 0.1
-            }
-          },
-          style: {
-            width,
-            height
-          },
-          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", 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: [
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(SmallLabel, { children: "kind" }),
-                  /* @__PURE__ */ jsx(
-                    Badge,
-                    {
-                      radius: "sm",
-                      size: "sm",
-                      fw: 600,
-                      color: "gray",
-                      style: {
-                        cursor: "pointer"
-                      },
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        diagram.openSearch(`kind:${elementModel.kind}`);
-                      },
-                      children: elementModel.kind
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, children: [
-                  /* @__PURE__ */ jsx(SmallLabel, { children: "tags" }),
-                  /* @__PURE__ */ jsx(
-                    ElementTags,
-                    {
-                      tags: elementModel.tags,
-                      onClick: (tag) => diagram.openSearch(`#${tag}`)
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs(
-                  ActionIconGroup,
-                  {
-                    style: {
-                      alignSelf: "flex-start"
-                    },
-                    children: [
-                      defaultLink && /* @__PURE__ */ jsx(
-                        ActionIcon,
-                        {
-                          component: "a",
-                          href: defaultLink.url,
-                          target: "_blank",
-                          size: "lg",
-                          variant: "default",
-                          radius: "sm",
-                          children: /* @__PURE__ */ jsx(IconExternalLink, { stroke: 1.6, style: { width: "65%" } })
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(IfEnabled, { feature: "Vscode", children: /* @__PURE__ */ jsx(Tooltip, { label: "Open source", children: /* @__PURE__ */ jsx(
-                        ActionIcon,
-                        {
-                          size: "lg",
-                          variant: "default",
-                          radius: "sm",
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            diagram.openSource({
-                              element: elementModel.id
-                            });
-                          },
-                          children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "62%" } })
-                        }
-                      ) }) }),
-                      defaultView && /* @__PURE__ */ jsx(Tooltip, { label: "Open default view", children: /* @__PURE__ */ jsx(
-                        ActionIcon,
-                        {
-                          size: "lg",
-                          variant: "default",
-                          radius: "sm",
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            diagram.navigateTo(defaultView.id, fromNode ?? void 0);
-                          },
-                          children: /* @__PURE__ */ jsx(IconZoomScan, { style: { width: "70%" } })
-                        }
-                      ) })
-                    ]
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx(MetadataProvider, { children: /* @__PURE__ */ jsxs(
-              Tabs,
-              {
-                value: activeTab,
-                onChange: (v) => setActiveTab(v),
-                variant: "none",
-                classNames: {
-                  root: tabsRoot,
-                  list: tabsList,
-                  tab: tabsTab,
-                  panel: tabsPanel
-                },
-                children: [
-                  /* @__PURE__ */ jsx(TabsList, { children: TABS.map((tab) => /* @__PURE__ */ jsx(TabsTab, { value: tab, children: tab }, tab)) }),
-                  /* @__PURE__ */ jsx(TabsPanel, { value: "Properties", children: /* @__PURE__ */ jsx(ScrollArea, { scrollbars: "y", type: "scroll", offsetScrollbars: true, children: /* @__PURE__ */ jsxs(Box, { className: propertiesGrid, pt: "xs", children: [
-                    elementModel.hasSummary && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(PropertyLabel, { children: "summary" }),
-                      /* @__PURE__ */ jsx(Markdown, { value: elementModel.summary })
-                    ] }),
-                    /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(PropertyLabel, { children: "description" }),
-                      /* @__PURE__ */ jsx(
-                        Markdown,
-                        {
-                          value: elementModel.description,
-                          emptyText: "no description"
-                        }
-                      )
-                    ] }),
-                    elementModel.technology && /* @__PURE__ */ jsx(ElementProperty, { title: "technology", children: elementModel.technology }),
-                    elementModel.links.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(PropertyLabel, { children: "links" }),
-                      /* @__PURE__ */ jsx(HStack, { gap: "xs", flexWrap: "wrap", children: elementModel.links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, i)) })
-                    ] }),
-                    elementModel.$element.metadata && /* @__PURE__ */ jsx(ElementMetata, { value: elementModel.$element.metadata })
-                  ] }) }) }),
-                  /* @__PURE__ */ jsx(TabsPanel, { value: "Relationships", children: /* @__PURE__ */ jsx(
-                    DiagramFeatures,
-                    {
-                      overrides: {
-                        enableRelationshipBrowser: false,
-                        enableNavigateTo: false
-                      },
-                      children: opened && activeTab === "Relationships" && /* @__PURE__ */ jsx(
-                        TabPanelRelationships,
-                        {
-                          element: elementModel,
-                          node: nodeModel ?? null
-                        }
-                      )
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(TabsPanel, { value: "Views", children: /* @__PURE__ */ jsx(ScrollArea, { scrollbars: "y", type: "auto", children: /* @__PURE__ */ jsxs(Stack, { gap: "lg", children: [
-                    viewsOf.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
-                      /* @__PURE__ */ jsx(Divider, { label: "views of the element (scoped)" }),
-                      /* @__PURE__ */ jsx(Stack, { gap: "sm", children: viewsOf.map((view) => /* @__PURE__ */ jsx(
-                        ViewButton,
-                        {
-                          view,
-                          onNavigateTo: (to) => diagram.navigateTo(to, fromNode ?? void 0)
-                        },
-                        view.id
-                      )) })
-                    ] }),
-                    otherViews.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
-                      /* @__PURE__ */ jsx(Divider, { label: "views including this element" }),
-                      /* @__PURE__ */ jsx(Stack, { gap: "sm", children: otherViews.map((view) => /* @__PURE__ */ jsx(
-                        ViewButton,
-                        {
-                          view,
-                          onNavigateTo: (to) => diagram.navigateTo(to, fromNode ?? void 0)
-                        },
-                        view.id
-                      )) })
-                    ] })
-                  ] }) }) }),
-                  /* @__PURE__ */ jsx(TabsPanel, { value: "Structure", children: /* @__PURE__ */ jsx(ScrollArea, { scrollbars: "y", type: "auto", children: /* @__PURE__ */ jsx(TabPanelStructure, { element: elementModel }) }) }),
-                  /* @__PURE__ */ jsx(TabsPanel, { value: "Deployments", children: /* @__PURE__ */ jsx(ScrollArea, { scrollbars: "y", type: "auto", children: /* @__PURE__ */ jsx(TabPanelDeployments, { elementFqn: elementModel.id }) }) })
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsx(
-              m.div,
-              {
-                className: resizeHandle,
-                drag: true,
-                dragElastic: 0,
-                dragMomentum: false,
-                onDrag: handleDrag,
-                dragConstraints: { top: 0, left: 0, right: 0, bottom: 0 }
-              }
-            )
-          ]
-        }
-      ) })
-    }
-  );
+var MIN_PADDING = 24;
+var TABS = [
+	"Properties",
+	"Relationships",
+	"Views",
+	"Structure",
+	"Deployments"
+];
+function ElementDetailsCard({ viewId, fromNode, rectFromNode, fqn, onClose }) {
+	const [opened, setOpened] = useState(false);
+	const windowSize = useViewportSize();
+	const windowWidth = windowSize.width || window.innerWidth || 1200;
+	const windowHeight = windowSize.height || window.innerHeight || 800;
+	const [activeTab, setActiveTab] = useSessionStorage({
+		key: `likec4:element-details:active-tab`,
+		defaultValue: "Properties"
+	});
+	const diagram = useDiagram();
+	const viewModel = useCurrentViewModel();
+	const nodeModel = fromNode ? viewModel.findNode(fromNode) : viewModel.findNodeWithElement(fqn);
+	const elementModel = viewModel.$model.element(fqn);
+	const [viewsOf, otherViews] = pipe([...elementModel.views()], map((v) => v.$view), partition((v) => v._type === "element" && v.viewOf === fqn));
+	let defaultView = nodeModel?.navigateTo?.$view ?? elementModel.defaultView?.$view ?? null;
+	if (defaultView?.id === viewId) defaultView = null;
+	const defaultLink = only(elementModel.links);
+	const controls = useDragControls();
+	const isCompound = (nodeModel?.$node.children?.length ?? 0) > 0;
+	const _width = Math.min(700, windowWidth - MIN_PADDING * 2);
+	const _height = Math.min(650, windowHeight - MIN_PADDING * 2);
+	const fromPosition = rectFromNode ? {
+		x: rectFromNode.x + (isCompound ? rectFromNode.width - _width / 2 : rectFromNode.width / 2),
+		y: rectFromNode.y + (isCompound ? 0 : rectFromNode.height / 2)
+	} : {
+		x: windowWidth / 2,
+		y: windowHeight / 2
+	};
+	const fromScale = rectFromNode ? Math.min(rectFromNode.width / _width, rectFromNode.height / _height, .9) : 1;
+	const left = Math.round(clamp(fromPosition.x - _width / 2, {
+		min: MIN_PADDING,
+		max: windowWidth - _width - MIN_PADDING
+	}));
+	const top = Math.round(clamp(fromPosition.y - (isCompound ? 0 : 60), {
+		min: MIN_PADDING,
+		max: windowHeight - _height - MIN_PADDING
+	}));
+	const originX = clamp((fromPosition.x - left) / _width, {
+		min: .1,
+		max: .9
+	});
+	const originY = clamp((fromPosition.y - top) / _height, {
+		min: .1,
+		max: .9
+	});
+	const width = useMotionValue(_width);
+	const height = useMotionValue(_height);
+	useUpdateEffect$1(() => {
+		width.set(_width);
+		height.set(_height);
+	}, [_width, _height]);
+	const handleDrag = useCallback((_, info) => {
+		width.set(Math.max(width.get() + info.delta.x, 320));
+		height.set(Math.max(height.get() + info.delta.y, 300));
+	}, [width, height]);
+	const ref = useRef(null);
+	const close = useDebouncedCallback(useCallbackRef$1(onClose), [], 50);
+	const triggerClose = useCallbackRef$1((event) => {
+		event?.stopPropagation();
+		close();
+	});
+	const notation = nodeModel?.$node.notation ?? null;
+	const elementIcon$1 = IconRenderer({
+		element: {
+			id: fqn,
+			title: elementModel.title,
+			icon: nodeModel?.icon ?? elementModel.icon
+		},
+		className: elementIcon
+	});
+	useTimeoutEffect(() => {
+		if (!ref.current?.open) ref.current?.showModal();
+	}, 20);
+	/**
+	* This delay improves "enter" animations,
+	* if  current tab is "Relationships"
+	*/
+	useTimeoutEffect(() => {
+		setOpened(true);
+	}, 220);
+	return /* @__PURE__ */ jsx(m.dialog, {
+		ref,
+		className: cx(dialog, RemoveScroll.classNames.fullWidth),
+		layout: true,
+		initial: {
+			[backdropBlur]: "0px",
+			[backdropOpacity]: "5%"
+		},
+		animate: {
+			[backdropBlur]: "3px",
+			[backdropOpacity]: "60%"
+		},
+		exit: {
+			[backdropBlur]: "0px",
+			[backdropOpacity]: "0%",
+			transition: { duration: .1 }
+		},
+		onClick: (e) => {
+			e.stopPropagation();
+			if (e.target?.nodeName?.toUpperCase() === "DIALOG") ref.current?.close();
+		},
+		onDoubleClick: stopPropagation,
+		onPointerDown: stopPropagation,
+		onClose: triggerClose,
+		children: /* @__PURE__ */ jsx(RemoveScroll, {
+			forwardProps: true,
+			removeScrollBar: false,
+			children: /* @__PURE__ */ jsxs(m.div, {
+				layout: true,
+				layoutRoot: true,
+				drag: true,
+				dragControls: controls,
+				dragElastic: 0,
+				dragMomentum: false,
+				dragListener: false,
+				"data-likec4-color": nodeModel?.color ?? elementModel.color,
+				className: card,
+				initial: {
+					top,
+					left,
+					width: _width,
+					height: _height,
+					opacity: 0,
+					originX,
+					originY,
+					scale: Math.max(fromScale, .65)
+				},
+				animate: {
+					opacity: 1,
+					scale: 1
+				},
+				exit: {
+					opacity: 0,
+					scale: .9,
+					translateY: -10,
+					transition: { duration: .1 }
+				},
+				style: {
+					width,
+					height
+				},
+				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",
+									minWidth: 0,
+									overflow: "hidden"
+								},
+								flexWrap: "nowrap",
+								children: [elementIcon$1, /* @__PURE__ */ jsxs("div", {
+									style: {
+										minWidth: 0,
+										overflow: "hidden"
+									},
+									children: [/* @__PURE__ */ jsx(Tooltip$1, {
+										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: [
+								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(SmallLabel, { children: "kind" }), /* @__PURE__ */ jsx(Badge, {
+									radius: "sm",
+									size: "sm",
+									fw: 600,
+									color: "gray",
+									style: { cursor: "pointer" },
+									onClick: (e) => {
+										e.stopPropagation();
+										diagram.openSearch(`kind:${elementModel.kind}`);
+									},
+									children: elementModel.kind
+								})] }),
+								/* @__PURE__ */ jsxs("div", {
+									style: {
+										flex: 1,
+										minWidth: 0,
+										overflow: "hidden"
+									},
+									children: [/* @__PURE__ */ jsx(SmallLabel, { children: "tags" }), /* @__PURE__ */ jsx(ElementTags, {
+										tags: elementModel.tags,
+										onClick: (tag) => diagram.openSearch(`#${tag}`)
+									})]
+								}),
+								/* @__PURE__ */ jsxs(ActionIconGroup, {
+									style: { alignSelf: "flex-start" },
+									children: [
+										defaultLink && /* @__PURE__ */ jsx(ActionIcon, {
+											component: "a",
+											href: defaultLink.url,
+											target: "_blank",
+											size: "lg",
+											variant: "default",
+											radius: "sm",
+											children: /* @__PURE__ */ jsx(IconExternalLink, {
+												stroke: 1.6,
+												style: { width: "65%" }
+											})
+										}),
+										/* @__PURE__ */ jsx(IfEnabled, {
+											feature: "Vscode",
+											children: /* @__PURE__ */ jsx(Tooltip$1, {
+												label: "Open source",
+												children: /* @__PURE__ */ jsx(ActionIcon, {
+													size: "lg",
+													variant: "default",
+													radius: "sm",
+													onClick: (e) => {
+														e.stopPropagation();
+														diagram.openSource({ element: elementModel.id });
+													},
+													children: /* @__PURE__ */ jsx(IconFileSymlink, {
+														stroke: 1.8,
+														style: { width: "62%" }
+													})
+												})
+											})
+										}),
+										defaultView && /* @__PURE__ */ jsx(Tooltip$1, {
+											label: "Open default view",
+											children: /* @__PURE__ */ jsx(ActionIcon, {
+												size: "lg",
+												variant: "default",
+												radius: "sm",
+												onClick: (e) => {
+													e.stopPropagation();
+													diagram.navigateTo(defaultView.id, fromNode ?? void 0);
+												},
+												children: /* @__PURE__ */ jsx(IconZoomScan, { style: { width: "70%" } })
+											})
+										})
+									]
+								})
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsx(MetadataProvider, { children: /* @__PURE__ */ jsxs(Tabs, {
+						value: activeTab,
+						onChange: (v) => setActiveTab(v),
+						variant: "none",
+						classNames: {
+							root: tabsRoot,
+							list: tabsList,
+							tab: tabsTab,
+							panel: tabsPanel
+						},
+						children: [
+							/* @__PURE__ */ jsx(TabsList, { children: TABS.map((tab) => /* @__PURE__ */ jsx(TabsTab, {
+								value: tab,
+								children: tab
+							}, tab)) }),
+							/* @__PURE__ */ jsx(TabsPanel, {
+								value: "Properties",
+								children: /* @__PURE__ */ jsx(ScrollArea, {
+									scrollbars: "y",
+									type: "scroll",
+									offsetScrollbars: true,
+									children: /* @__PURE__ */ jsxs(Box, {
+										className: propertiesGrid,
+										pt: "xs",
+										children: [
+											elementModel.hasSummary && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PropertyLabel, { children: "summary" }), /* @__PURE__ */ jsx(Markdown, { value: elementModel.summary })] }),
+											/* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PropertyLabel, { children: "description" }), /* @__PURE__ */ jsx(Markdown, {
+												value: elementModel.description,
+												emptyText: "no description"
+											})] }),
+											elementModel.technology && /* @__PURE__ */ jsx(ElementProperty, {
+												title: "technology",
+												children: elementModel.technology
+											}),
+											elementModel.links.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PropertyLabel, { children: "links" }), /* @__PURE__ */ jsx(HStack, {
+												gap: "xs",
+												flexWrap: "wrap",
+												children: elementModel.links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, i))
+											})] }),
+											elementModel.$element.metadata && /* @__PURE__ */ jsx(ElementMetata, { value: elementModel.$element.metadata })
+										]
+									})
+								})
+							}),
+							/* @__PURE__ */ jsx(TabsPanel, {
+								value: "Relationships",
+								children: /* @__PURE__ */ jsx(DiagramFeatures, {
+									overrides: {
+										enableRelationshipBrowser: false,
+										enableNavigateTo: false
+									},
+									children: opened && activeTab === "Relationships" && /* @__PURE__ */ jsx(TabPanelRelationships, {
+										element: elementModel,
+										node: nodeModel ?? null
+									})
+								})
+							}),
+							/* @__PURE__ */ jsx(TabsPanel, {
+								value: "Views",
+								children: /* @__PURE__ */ jsx(ScrollArea, {
+									scrollbars: "y",
+									type: "auto",
+									children: /* @__PURE__ */ jsxs(Stack, {
+										gap: "lg",
+										children: [viewsOf.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Divider$1, { label: "views of the element (scoped)" }), /* @__PURE__ */ jsx(Stack, {
+											gap: "sm",
+											children: viewsOf.map((view) => /* @__PURE__ */ jsx(ViewButton, {
+												view,
+												onNavigateTo: (to) => diagram.navigateTo(to, fromNode ?? void 0)
+											}, view.id))
+										})] }), otherViews.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Divider$1, { label: "views including this element" }), /* @__PURE__ */ jsx(Stack, {
+											gap: "sm",
+											children: otherViews.map((view) => /* @__PURE__ */ jsx(ViewButton, {
+												view,
+												onNavigateTo: (to) => diagram.navigateTo(to, fromNode ?? void 0)
+											}, view.id))
+										})] })]
+									})
+								})
+							}),
+							/* @__PURE__ */ jsx(TabsPanel, {
+								value: "Structure",
+								children: /* @__PURE__ */ jsx(ScrollArea, {
+									scrollbars: "y",
+									type: "auto",
+									children: /* @__PURE__ */ jsx(TabPanelStructure, { element: elementModel })
+								})
+							}),
+							/* @__PURE__ */ jsx(TabsPanel, {
+								value: "Deployments",
+								children: /* @__PURE__ */ jsx(ScrollArea, {
+									scrollbars: "y",
+									type: "auto",
+									children: /* @__PURE__ */ jsx(TabPanelDeployments, { elementFqn: elementModel.id })
+								})
+							})
+						]
+					}) }),
+					/* @__PURE__ */ jsx(m.div, {
+						className: resizeHandle,
+						drag: true,
+						dragElastic: 0,
+						dragMomentum: false,
+						onDrag: handleDrag,
+						dragConstraints: {
+							top: 0,
+							left: 0,
+							right: 0,
+							bottom: 0
+						}
+					})
+				]
+			})
+		})
+	});
 }
-const ViewButton = ({
-  view,
-  onNavigateTo
-}) => {
-  return /* @__PURE__ */ jsx(UnstyledButton, { className: viewButton, onClick: (e) => onNavigateTo(view.id, e), children: /* @__PURE__ */ jsxs(Group, { gap: 6, align: "start", wrap: "nowrap", children: [
-    /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", children: view._type === "deployment" ? /* @__PURE__ */ jsx(IconStack2, { stroke: 1.8 }) : /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8 }) }),
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { component: "div", className: viewButtonTitle, lineClamp: 1, children: view.title || "untitled" }) })
-  ] }) });
+var ViewButton = ({ view, onNavigateTo }) => {
+	return /* @__PURE__ */ jsx(UnstyledButton, {
+		className: viewButton,
+		onClick: (e) => onNavigateTo(view.id, e),
+		children: /* @__PURE__ */ jsxs(Group, {
+			gap: 6,
+			align: "start",
+			wrap: "nowrap",
+			children: [/* @__PURE__ */ jsx(ThemeIcon, {
+				size: "sm",
+				variant: "transparent",
+				children: view._type === "deployment" ? /* @__PURE__ */ jsx(IconStack2, { stroke: 1.8 }) : /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8 })
+			}), /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, {
+				component: "div",
+				className: viewButtonTitle,
+				lineClamp: 1,
+				children: view.title || "untitled"
+			}) })]
+		})
+	});
 };
-function ElementProperty({
-  title,
-  emptyValue = `undefined`,
-  children,
-  style,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(PropertyLabel, { children: title }),
-    /* @__PURE__ */ jsx(
-      Text,
-      {
-        component: "div",
-        ...isNullish(children) && { c: "dimmed" },
-        fz: "md",
-        style: {
-          whiteSpace: "preserve-breaks",
-          userSelect: "all",
-          ...style
-        },
-        ...props,
-        children: children || emptyValue
-      }
-    )
-  ] });
+function ElementProperty({ title, emptyValue = `undefined`, children, style, ...props }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PropertyLabel, { children: title }), /* @__PURE__ */ jsx(Text, {
+		component: "div",
+		...isNullish(children) && { c: "dimmed" },
+		fz: "md",
+		style: {
+			whiteSpace: "preserve-breaks",
+			userSelect: "all",
+			...style
+		},
+		...props,
+		children: children || emptyValue
+	})] });
 }
-function ElementMetata({
-  value: 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({
-          display: "grid",
-          gridTemplateColumns: "min-content 1fr",
-          gridAutoRows: "min-content",
-          gap: `[12px 16px]`,
-          alignItems: "baseline",
-          justifyItems: "stretch"
-        }),
-        children: metadataEntries.map(([key, value]) => /* @__PURE__ */ jsx(MetadataValue, { label: key, value }, key))
-      }
-    )
-  ] }) });
+function ElementMetata({ value: metadata }) {
+	const metadataEntries = entries(metadata).sort(([a], [b]) => a.localeCompare(b));
+	return /* @__PURE__ */ jsx(MetadataProvider, { children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PropertyLabel, {
+		style: {
+			justifySelf: "end",
+			textAlign: "right"
+		},
+		children: "metadata"
+	}), /* @__PURE__ */ jsx(Box, {
+		className: css({
+			display: "grid",
+			gridTemplateColumns: "min-content 1fr",
+			gridAutoRows: "min-content",
+			gap: `[12px 16px]`,
+			alignItems: "baseline",
+			justifyItems: "stretch"
+		}),
+		children: metadataEntries.map(([key, value]) => /* @__PURE__ */ jsx(MetadataValue, {
+			label: key,
+			value
+		}, key))
+	})] }) });
 }
 function ElementTags({ tags, onClick }) {
-  return /* @__PURE__ */ jsxs(Flex, { gap: 4, flex: 1, mt: 6, wrap: "wrap", children: [
-    tags.map((tag) => /* @__PURE__ */ jsx(
-      ElementTag,
-      {
-        tag,
-        cursor: "pointer",
-        onClick: (e) => {
-          e.stopPropagation();
-          onClick(tag);
-        }
-      },
-      tag
-    )),
-    tags.length === 0 && /* @__PURE__ */ jsx(Badge, { radius: "sm", size: "sm", fw: 600, color: "gray", children: "—" })
-  ] });
+	return /* @__PURE__ */ jsxs(Flex, {
+		gap: 4,
+		flex: 1,
+		mt: 6,
+		wrap: "wrap",
+		children: [tags.map((tag) => /* @__PURE__ */ jsx(ElementTag, {
+			tag,
+			cursor: "pointer",
+			onClick: (e) => {
+				e.stopPropagation();
+				onClick(tag);
+			}
+		}, tag)), tags.length === 0 && /* @__PURE__ */ jsx(Badge, {
+			radius: "sm",
+			size: "sm",
+			fw: 600,
+			color: "gray",
+			children: "—"
+		})]
+	});
 }
-
+//#endregion
 export { ElementDetailsCard };