@likec4/diagram 1.18.0 → 1.19.1

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

@@ -0,0 +1,484 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { invariant, isScopedElementView, isDeploymentView } from "@likec4/core";
+import { Divider as Divider$1, Tooltip as Tooltip$1, Text, RemoveScroll, Card, FocusTrap, FocusTrapInitialFocus, Box, Group, CloseButton, Badge, Flex, ActionIconGroup, ActionIcon, Tabs, TabsList, TabsTab, TabsPanel, ScrollArea, Stack, UnstyledButton, ThemeIcon, CopyButton, Anchor, Code } from "@mantine/core";
+import { useViewportSize, useSessionStorage } from "@mantine/hooks";
+import { IconExternalLink, IconFileSymlink, IconZoomScan, IconStack2, IconCheck, IconCopy } from "@tabler/icons-react";
+import clsx from "clsx";
+import { useDragControls, useMotionValue, m } from "framer-motion";
+import { memo, useCallback, useRef, useEffect } from "react";
+import { pick, pipe, map, partition, find, only, clamp, isNullish } from "remeda";
+import { useOverlayDialog } from "../OverlayContext.js";
+import { propertyLabel, dialog, card, cardHeader, title, tabsRoot, tabsList, tabsTab, tabsPanel, propertiesGrid, resizeHandle, elementIcon, viewButton, viewButtonTitle, elementLink } from "./ElementDetailsCard.css.js";
+import { TabPanelDeployments } from "./TabPanelDeployments.js";
+import { TabPanelRelationships } from "./TabPanelRelationships.js";
+import { TabPanelStructure } from "./TabPanelStructure.js";
+import { useXYFlow, useXYInternalNode } from "../../hooks/useXYFlow.js";
+import { useLikeC4CurrentViewModel } from "../../likec4model/useLikeC4Model.js";
+import { useDiagramStoreApi, useDiagramState } from "../../hooks/useDiagramState.js";
+const Divider = Divider$1.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
+});
+const 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
+});
+const MIN_PADDING = 24;
+const TABS = ["Properties", "Relationships", "Views", "Structure", "Deployments"];
+const ElementDetailsCard = memo(({ fqn }) => {
+  var _a;
+  const windowSize = useViewportSize();
+  const windowWidth = windowSize.width || window.innerWidth || 1200, windowHeight = windowSize.height || window.innerHeight || 800;
+  const xyflow = useXYFlow();
+  const xynode = useXYInternalNode(fqn);
+  invariant(xynode, `XYNode with id ${fqn} not found`);
+  const overlay = useOverlayDialog();
+  const [activeTab, setActiveTab] = useSessionStorage({
+    key: `likec4:element-details:active-tab`,
+    defaultValue: "Properties"
+  });
+  const diagramApi = useDiagramStoreApi();
+  const viewModel = useLikeC4CurrentViewModel();
+  const {
+    view: currentView,
+    renderIcon,
+    onOpenSource
+  } = useDiagramState(pick(["view", "renderIcon", "onNavigateTo", "onOpenSource"]));
+  const diagramNode = currentView.nodes.find((n) => n.id === fqn);
+  invariant(diagramNode, `DiagramNode with fqn ${fqn} not found`);
+  const nodeModel = viewModel.findNode(fqn);
+  invariant(nodeModel && nodeModel.hasElement(), `NodeModel with fqn ${fqn} not found`);
+  const elementModel = nodeModel.element;
+  const viewId = viewModel.id;
+  const elementIcon2 = ElementIcon({
+    element: nodeModel.$node,
+    viewId,
+    renderIcon
+  });
+  const [viewsOf, otherViews] = pipe(
+    [...elementModel.views()],
+    map((v) => v.$view),
+    partition((view) => {
+      const v = view;
+      return isScopedElementView(v) && v.viewOf === fqn;
+    })
+  );
+  const defaultView = ((_a = nodeModel.navigateTo) == null ? void 0 : _a.$view) ?? find(viewsOf, (v) => v.id !== viewModel.id) ?? null;
+  const defaultLink = only(nodeModel.links);
+  const onNavigateToCb = useCallback((toView, e) => {
+    e == null ? void 0 : e.stopPropagation();
+    const { onNavigateTo } = diagramApi.getState();
+    if (!onNavigateTo) {
+      return;
+    }
+    overlay.close(() => {
+      diagramApi.setState({
+        lastOnNavigate: {
+          fromView: viewModel.id,
+          toView,
+          fromNode: fqn
+        }
+      });
+      onNavigateTo(toView);
+    });
+  }, [fqn, viewModel.id]);
+  const controls = useDragControls();
+  const isCompound = nodeModel.children.length > 0;
+  const fromPositon = xyflow.flowToScreenPosition({
+    x: xynode.internals.positionAbsolute.x + diagramNode.width / 2,
+    y: xynode.internals.positionAbsolute.y + (isCompound ? 0 : diagramNode.height / 2)
+  });
+  const _width = Math.min(700, windowWidth - MIN_PADDING * 2);
+  const _height = Math.min(650, windowHeight - MIN_PADDING * 2);
+  const left = Math.round(
+    clamp(fromPositon.x - _width / 2, {
+      min: MIN_PADDING,
+      max: windowWidth - _width - MIN_PADDING
+    })
+  );
+  const top = Math.round(
+    clamp(fromPositon.y - (isCompound ? 0 : 60), {
+      min: MIN_PADDING,
+      max: windowHeight - _height - MIN_PADDING
+    })
+  );
+  const width = useMotionValue(_width);
+  const height = useMotionValue(_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));
+  }, []);
+  const ref = useRef(null);
+  useEffect(() => {
+    var _a2;
+    (_a2 = ref.current) == null ? void 0 : _a2.showModal();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    m.dialog,
+    {
+      ref,
+      className: dialog,
+      initial: {
+        "--backdrop-blur": "0px",
+        "--backdrop-opacity": "0%"
+      },
+      animate: {
+        "--backdrop-blur": "1px",
+        "--backdrop-opacity": "50%"
+      },
+      exit: {
+        "--backdrop-blur": "0px",
+        "--backdrop-opacity": "0%"
+      },
+      onClick: (e) => {
+        var _a2, _b;
+        if (((_b = (_a2 = e.target) == null ? void 0 : _a2.nodeName) == null ? void 0 : _b.toUpperCase()) === "DIALOG") {
+          e.stopPropagation();
+          overlay.close();
+        }
+      },
+      onClose: (e) => {
+        e.stopPropagation();
+        overlay.close();
+      },
+      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, children: /* @__PURE__ */ jsx(
+        Card,
+        {
+          drag: true,
+          dragElastic: 0,
+          dragMomentum: false,
+          dragListener: false,
+          dragControls: controls,
+          withBorder: true,
+          shadow: "md",
+          component: m.div,
+          className: card,
+          layoutId: `${viewId}:element:${fqn}`,
+          initial: {
+            top,
+            left,
+            width: _width,
+            height: _height,
+            opacity: 0
+          },
+          animate: {
+            opacity: 1
+          },
+          exit: {
+            opacity: 0
+          },
+          style: {
+            // `style` prop in Mantine doesn't accept motion values
+            width,
+            height
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Escape") {
+              e.preventDefault();
+              e.stopPropagation();
+              overlay.close();
+            }
+          },
+          "data-likec4-color": nodeModel.color,
+          children: /* @__PURE__ */ jsxs(FocusTrap, { children: [
+            /* @__PURE__ */ jsx(FocusTrapInitialFocus, {}),
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                className: cardHeader,
+                onPointerDown: (e) => controls.start(e),
+                children: [
+                  /* @__PURE__ */ jsxs(Group, { align: "start", justify: "space-between", gap: "sm", mb: "sm", wrap: "nowrap", children: [
+                    /* @__PURE__ */ jsxs(Group, { align: "start", gap: "sm", style: { cursor: "default" }, wrap: "nowrap", children: [
+                      elementIcon2,
+                      /* @__PURE__ */ jsxs(Box, { children: [
+                        /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            component: m.div,
+                            layout: "position",
+                            layoutId: `${viewId}:element:title:${fqn}`,
+                            className: title,
+                            children: elementModel.title
+                          }
+                        ),
+                        nodeModel.$node.notation && /* @__PURE__ */ jsx(Text, { component: "div", c: "dimmed", fz: "sm", fw: 500, lh: 1.3, lineClamp: 1, children: nodeModel.$node.notation })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      CloseButton,
+                      {
+                        size: "lg",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          overlay.close();
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(Group, { align: "baseline", gap: "sm", wrap: "nowrap", children: [
+                    /* @__PURE__ */ jsxs(Box, { children: [
+                      /* @__PURE__ */ jsx(SmallLabel, { children: "kind" }),
+                      /* @__PURE__ */ jsx(Badge, { radius: "sm", size: "sm", fw: 600, color: "gray", children: elementModel.kind })
+                    ] }),
+                    /* @__PURE__ */ jsxs(Box, { flex: 1, children: [
+                      /* @__PURE__ */ jsx(SmallLabel, { children: "tags" }),
+                      /* @__PURE__ */ jsxs(Flex, { gap: 4, flex: 1, mt: 6, children: [
+                        elementModel.tags.map((tag) => /* @__PURE__ */ jsxs(Badge, { radius: "sm", size: "sm", fw: 600, variant: "gradient", children: [
+                          "#",
+                          tag
+                        ] }, tag)),
+                        elementModel.tags.length === 0 && /* @__PURE__ */ jsx(Badge, { radius: "sm", size: "sm", fw: 600, color: "gray", children: "—" })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      ActionIconGroup,
+                      {
+                        style: {
+                          alignSelf: "flex-end"
+                        },
+                        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%" } })
+                            }
+                          ),
+                          onOpenSource && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", children: /* @__PURE__ */ jsx(
+                            ActionIcon,
+                            {
+                              size: "lg",
+                              variant: "default",
+                              radius: "sm",
+                              onClick: (e) => {
+                                var _a2, _b;
+                                e.stopPropagation();
+                                (_b = (_a2 = diagramApi.getState()).onOpenSource) == null ? void 0 : _b.call(_a2, {
+                                  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) => {
+                                onNavigateToCb(defaultView.id, e);
+                              },
+                              children: /* @__PURE__ */ jsx(IconZoomScan, { style: { width: "70%" } })
+                            }
+                          ) })
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__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: "auto", children: /* @__PURE__ */ jsxs(Box, { className: propertiesGrid, pt: "xs", children: [
+                    /* @__PURE__ */ jsx(ElementProperty, { title: "description", emptyValue: "no description", children: elementModel.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(Stack, { gap: "xs", align: "flex-start", children: elementModel.links.map((link, i) => /* @__PURE__ */ jsx(ElementLink, { value: link }, i)) })
+                    ] }),
+                    elementModel.$element.metadata && /* @__PURE__ */ jsx(ElementMetata, { value: elementModel.$element.metadata })
+                  ] }) }) }),
+                  /* @__PURE__ */ jsx(TabsPanel, { value: "Relationships", children: activeTab === "Relationships" && /* @__PURE__ */ jsx(
+                    TabPanelRelationships,
+                    {
+                      element: elementModel,
+                      node: nodeModel,
+                      currentView
+                    }
+                  ) }),
+                  /* @__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: onNavigateToCb
+                        },
+                        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: onNavigateToCb
+                        },
+                        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 }
+              }
+            )
+          ] })
+        }
+      ) })
+    }
+  );
+});
+ElementDetailsCard.displayName = "ElementDetailsCard";
+const ElementIcon = ({ element, viewId, renderIcon: RenderIcon }) => {
+  if (!element.icon || element.icon === "none") {
+    return null;
+  }
+  let icon = null;
+  if (element.icon.startsWith("http://") || element.icon.startsWith("https://")) {
+    icon = /* @__PURE__ */ jsx("img", { src: element.icon, alt: element.title });
+  } else if (RenderIcon) {
+    icon = /* @__PURE__ */ jsx(RenderIcon, { node: element });
+  }
+  if (!icon) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    m.div,
+    {
+      layoutId: `${viewId}:element:icon:${element.id}`,
+      className: clsx(
+        elementIcon,
+        "likec4-element-icon"
+      ),
+      "data-likec4-icon": element.icon,
+      children: icon
+    }
+  );
+};
+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: isDeploymentView(view) ? /* @__PURE__ */ jsx(IconStack2, { stroke: 1.8 }) : /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8 }) }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Text, { component: "div", className: viewButtonTitle, lineClamp: 1, children: view.title || "untitled" }),
+      view.description && /* @__PURE__ */ jsx(Text, { component: "div", mt: 2, fz: "xs", c: "dimmed", lh: 1.4, lineClamp: 1, children: view.description })
+    ] })
+  ] }) });
+};
+function ElementProperty({
+  title: title2,
+  emptyValue = `undefined`,
+  children,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PropertyLabel, { children: title2 }),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        component: "div",
+        ...isNullish(children) && { c: "dimmed" },
+        fz: "md",
+        style: {
+          whiteSpace: "preserve-breaks",
+          ...style
+        },
+        ...props,
+        children: children || emptyValue
+      }
+    )
+  ] });
+}
+function ElementLink({
+  value
+}) {
+  const url = new URL(value.url, window.location.href).toString();
+  return /* @__PURE__ */ jsx(CopyButton, { value: url, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Anchor, { href: url, target: "_blank", underline: "never", className: elementLink, children: /* @__PURE__ */ jsxs(Group, { gap: 4, align: "center", wrap: "nowrap", children: [
+    /* @__PURE__ */ jsx(
+      ActionIcon,
+      {
+        tabIndex: -1,
+        size: 24,
+        variant: copied ? "light" : "subtle",
+        color: copied ? "teal" : "gray",
+        onClick: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          copy();
+        },
+        children: copied ? /* @__PURE__ */ jsx(IconCheck, {}) : /* @__PURE__ */ jsx(IconCopy, { style: { width: "65%", opacity: 0.8 } })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { flex: 1, children: [
+      /* @__PURE__ */ jsx(Text, { fz: "sm", truncate: true, lh: 1.3, fw: value.title ? 500 : 400, children: value.title || url }),
+      value.title && /* @__PURE__ */ jsx(Text, { component: "div", fz: 10, c: "dimmed", lh: 1.2, truncate: true, children: url })
+    ] })
+  ] }) }) });
+}
+function ElementMetata({
+  value
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PropertyLabel, { children: "metadata" }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Code, { block: true, children: JSON.stringify(value, null, 2) }) })
+  ] });
+}
+export {
+  ElementDetailsCard
+};

package/dist/overlays/element-details/TabPanelDeployments.css.d.ts

@@ -0,0 +1,4 @@
+export declare const treeNode: string;
+export declare const treeNodeLabel: string;
+export declare const nodeLabel: string;
+export declare const instanceLabel: string;

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

@@ -0,0 +1,11 @@
+/* empty css                                       */
+var treeNode = "_6nb9wd0";
+var treeNodeLabel = "_6nb9wd1";
+var nodeLabel = "_6nb9wd3 _6nb9wd2";
+var instanceLabel = "_6nb9wd4 _6nb9wd2";
+export {
+  instanceLabel,
+  nodeLabel,
+  treeNode,
+  treeNodeLabel
+};

package/dist/overlays/element-details/TabPanelDeployments.d.ts

@@ -0,0 +1,7 @@
+import { Fqn } from '@likec4/core';
+import { NamedExoticComponent } from 'react';
+type TabPanelDeploymentsProps = {
+    elementFqn: Fqn;
+};
+export declare const TabPanelDeployments: NamedExoticComponent<TabPanelDeploymentsProps>;
+export {};

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

@@ -0,0 +1,173 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTree, Alert, Tree, Box, rem, Button, Group, Text, ThemeIcon, Menu } from "@mantine/core";
+import { IconInfoCircle, IconTarget, IconZoomScan } from "@tabler/icons-react";
+import { memo, useMemo, useEffect } from "react";
+import { useLikeC4ElementModel } from "../../likec4model/useLikeC4Model.js";
+import { stopPropagation } from "../../xyflow/utils.js";
+import { treeNode, treeNodeLabel, nodeLabel, instanceLabel } from "./TabPanelDeployments.css.js";
+import { useCurrentViewId, useDiagramStoreApi } from "../../hooks/useDiagramState.js";
+const DeploymentNodeRenderer = ({
+  node
+}) => /* @__PURE__ */ jsxs(Group, { className: nodeLabel, gap: 6, align: "baseline", wrap: "nowrap", children: [
+  /* @__PURE__ */ jsxs(Text, { component: "div", fz: 11, c: "dimmed", children: [
+    node.kind,
+    ":"
+  ] }),
+  /* @__PURE__ */ jsx(Text, { component: "div", fz: "sm", fw: "500", children: node.title })
+] });
+const DeployedInstanceRenderer = ({
+  instance
+}) => {
+  const currentViewId = useCurrentViewId();
+  const diagramApi = useDiagramStoreApi();
+  const views = [...instance.views()];
+  return /* @__PURE__ */ jsxs(Group, { className: instanceLabel, gap: 4, children: [
+    /* @__PURE__ */ jsx(ThemeIcon, { color: "gray", variant: "transparent", size: "xs", flex: 0, children: /* @__PURE__ */ jsx(IconTarget, { stroke: 1.2 }) }),
+    /* @__PURE__ */ jsx(Text, { component: "div", fz: "sm", fw: "500", flex: "1 1 100%", children: instance.title }),
+    /* @__PURE__ */ jsxs(Box, { onClick: stopPropagation, pos: "relative", "data-no-transform": true, flex: 0, children: [
+      views.length === 0 && /* @__PURE__ */ jsx(Button, { size: "compact-xs", variant: "transparent", color: "gray", disabled: true, children: "no views" }),
+      views.length > 0 && /* @__PURE__ */ jsxs(
+        Menu,
+        {
+          shadow: "md",
+          withinPortal: false,
+          position: "bottom-start",
+          offset: 0,
+          closeOnClickOutside: true,
+          clickOutsideEvents: ["pointerdown", "mousedown", "click"],
+          closeOnEscape: true,
+          trapFocus: true,
+          children: [
+            /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsxs(Button, { size: "compact-xs", variant: "subtle", color: "gray", children: [
+              views.length,
+              " view",
+              views.length > 1 ? "s" : ""
+            ] }) }),
+            /* @__PURE__ */ jsx(Menu.Dropdown, { children: views.map((view) => /* @__PURE__ */ jsx(
+              Menu.Item,
+              {
+                px: "xs",
+                py: 4,
+                disabled: view.id === currentViewId,
+                leftSection: /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", color: "gray", children: /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8, opacity: 0.65 }) }),
+                styles: {
+                  itemSection: {
+                    marginInlineEnd: rem(8)
+                  }
+                },
+                onClick: (e) => {
+                  var _a, _b;
+                  e.stopPropagation();
+                  (_b = (_a = diagramApi.getState()).onNavigateTo) == null ? void 0 : _b.call(_a, view.id);
+                },
+                children: view.title
+              },
+              view.id
+            )) })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+const TabPanelDeployments = memo(({ elementFqn }) => {
+  const element = useLikeC4ElementModel(elementFqn);
+  const deployments = [...element.deployments()];
+  const tree = useTree({
+    multiple: false
+  });
+  const data = useMemo(() => {
+    let roots = [];
+    let treeItems = /* @__PURE__ */ new Map();
+    for (const instance of element.deployments()) {
+      let instanceNode = {
+        label: /* @__PURE__ */ jsx(DeployedInstanceRenderer, { instance }),
+        value: instance.id,
+        type: "instance",
+        children: []
+      };
+      treeItems.set(instance.id, instanceNode);
+      let ancestor = instance.parent;
+      while (ancestor) {
+        let ancestorNode = treeItems.get(ancestor.id);
+        if (ancestorNode) {
+          ancestorNode.children.push(instanceNode);
+          break;
+        }
+        ancestorNode = {
+          label: /* @__PURE__ */ jsx(DeploymentNodeRenderer, { node: ancestor }),
+          value: ancestor.id,
+          type: "node",
+          children: [instanceNode]
+        };
+        treeItems.set(ancestor.id, ancestorNode);
+        instanceNode = ancestorNode;
+        ancestor = ancestor.parent;
+      }
+      if (!ancestor && !roots.includes(instanceNode)) {
+        roots.push(instanceNode);
+      }
+    }
+    return roots;
+  }, [element]);
+  useEffect(() => {
+    tree.expandAllNodes();
+  }, [data]);
+  if (deployments.length === 0) {
+    return /* @__PURE__ */ jsx(Alert, { variant: "light", color: "gray", icon: /* @__PURE__ */ jsx(IconInfoCircle, {}), children: "This element does not have any deployments" });
+  }
+  return (
+    // <Box></Box>
+    /* @__PURE__ */ jsx(
+      Tree,
+      {
+        levelOffset: "sm",
+        allowRangeSelection: false,
+        classNames: {
+          node: treeNode,
+          label: treeNodeLabel
+        },
+        styles: {
+          root: {
+            position: "relative",
+            width: "min-content",
+            minWidth: 300
+          }
+        },
+        data,
+        tree,
+        renderNode: ({ node, selected, elementProps, hasChildren }) => /* @__PURE__ */ jsx(
+          Box,
+          {
+            ...elementProps,
+            style: {
+              ...!hasChildren && {
+                marginBottom: rem(4)
+              }
+            },
+            children: hasChildren ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                fullWidth: true,
+                color: "gray",
+                variant: selected ? "transparent" : "subtle",
+                size: "xs",
+                justify: "flex-start",
+                styles: {
+                  root: {
+                    position: "unset",
+                    paddingInlineStart: rem(16)
+                  }
+                },
+                children: node.label
+              }
+            ) : node.label
+          }
+        )
+      }
+    )
+  );
+});
+export {
+  TabPanelDeployments
+};

package/dist/overlays/element-details/TabPanelRelationships.css.d.ts

@@ -0,0 +1,5 @@
+export declare const fqn: string;
+export declare const relationshipStat: string;
+export declare const xyflow: string;
+export declare const panelScope: string;
+export declare const edgeNum: string;