@likec4/diagram 1.24.0 → 1.25.0

package/dist/hooks/useDiagram.js

@@ -9,6 +9,7 @@ function useDiagram() {
   const actor = useDiagramActorRef();
   const [, startTransition] = useTransition();
   return useMemo(() => ({
+    actor,
     send: actor.send,
     navigateTo: (viewId, fromNode) => {
       startTransition(() => {
@@ -123,6 +124,10 @@ function useDiagramActorSnapshot(selector, compare = shallowEqual) {
   const actorRef = useDiagramActorRef();
   return useSelector(actorRef, useCallbackRef(selector), compare);
 }
+function useDiagramSyncLayoutState(selector, compare = shallowEqual) {
+  const syncLayoutActorRef = useDiagramActorSnapshot((s) => s.context.syncLayoutActorRef);
+  return useSelector(syncLayoutActorRef, useCallbackRef(selector), compare);
+}
 function useDiagramContext(selector, compare = shallowEqual) {
   return useDiagramActorSnapshot(useCallbackRef((s) => selector(s.context)), compare);
 }
@@ -130,5 +135,6 @@ export {
   useDiagram,
   useDiagramActorRef,
   useDiagramActorSnapshot,
-  useDiagramContext
+  useDiagramContext,
+  useDiagramSyncLayoutState
 };

package/dist/hooks/useIsReducedGraphics.d.ts

@@ -0,0 +1,4 @@
+export declare const ReducedGraphicsContext: ({ children, value }: {
+    value: boolean;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useIsReducedGraphics: () => boolean;

package/dist/hooks/useIsReducedGraphics.js

@@ -0,0 +1,8 @@
+import { createSafeContext } from "@mantine/core";
+const [ReducedGraphicsContext, useIsReducedGraphics] = createSafeContext(
+  "ReducedGraphicsContext is not provided"
+);
+export {
+  ReducedGraphicsContext,
+  useIsReducedGraphics
+};

package/dist/hooks/useXYFlow.js

@@ -10,7 +10,7 @@ function useXYStore(selector, equalityFn) {
 }
 const useXYStoreApi = useStoreApi;
 const useXYInternalNode = useInternalNode;
-const selectZoom = (state) => state.transform[2] < 0.2;
+const selectZoom = (state) => state.transform[2] < 0.25;
 function useIsZoomTooSmall() {
   return useStore(selectZoom);
 }

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export type { ControlsCustomLayout, ControlsCustomLayoutProps } from './context/ControlsCustomLayout';
 export { FramerMotionConfig } from './context/FramerMotionConfig';
 export { LikeC4Diagram } from './LikeC4Diagram';
 export type { LikeC4DiagramProps } from './LikeC4Diagram';

package/dist/likec4diagram/DiagramUI.d.ts

@@ -1 +1,2 @@
-export declare function DiagramUI(): import("react/jsx-runtime").JSX.Element;
+import { MemoExoticComponent } from 'react';
+export declare const DiagramUI: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/likec4diagram/DiagramUI.js

@@ -1,4 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { memo } from "react";
 import { useDiagramActorSnapshot } from "../hooks/useDiagram.js";
 import { Overlays } from "../overlays/Overlays.js";
 import { useEnabledFeatures } from "../context/DiagramFeatures.js";
@@ -6,13 +7,13 @@ import { Controls } from "./ui/controls/Controls.js";
 import { DiagramTitlePanel } from "./ui/diagram-title/DiagramTitlePanel.js";
 import { NotationPanel } from "./ui/notation/NotationPanel.js";
 import { DynamicViewWalkthrough } from "./ui/walkthrough/DynamicViewWalkthrough.js";
-function DiagramUI() {
+const DiagramUI = memo(() => {
   const {
     enableViewTitle,
     enableNotations,
     enableDynamicViewWalkthrough
   } = useEnabledFeatures();
-  const overlaysActorRef = useDiagramActorSnapshot((s) => s.children.overlays);
+  const overlaysActorRef = useDiagramActorSnapshot((s) => s.children.overlays, Object.is);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Controls, {}),
     overlaysActorRef && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef }),
@@ -20,7 +21,8 @@ function DiagramUI() {
     enableNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
     enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {})
   ] });
-}
+});
+DiagramUI.displayName = "DiagramUI";
 export {
   DiagramUI
 };

package/dist/likec4diagram/XYFlow.d.ts

@@ -1,11 +1,7 @@
+import { PropsWithChildren, NamedExoticComponent } from 'react';
 import { EnforceOptional } from 'type-fest/source/enforce-optional';
 import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
-import { NamedExoticComponent } from 'react';
 type Picked = EnforceOptional<Pick<LikeC4DiagramProperties, 'background' | 'nodesDraggable' | 'nodesSelectable'>>;
-export type LikeC4DiagramXYFlowProps = Required<Picked>;
-export declare const LikeC4DiagramXYFlow: NamedExoticComponent<Required<{
-    background?: "solid" | "transparent" | "dots" | "lines" | "cross";
-    nodesDraggable?: boolean;
-    nodesSelectable?: boolean;
-}>>;
+export type LikeC4DiagramXYFlowProps = PropsWithChildren<Required<Picked>>;
+export declare const LikeC4DiagramXYFlow: NamedExoticComponent<LikeC4DiagramXYFlowProps>;
 export {};

package/dist/likec4diagram/XYFlow.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { nonNullable } from "@likec4/core";
 import { useCallbackRef } from "@mantine/hooks";
 import clsx from "clsx";
@@ -6,11 +6,10 @@ import { shallowEqual } from "fast-equals";
 import { memo } from "react";
 import { BaseXYFlow } from "../base/BaseXYFlow.js";
 import { useDiagram, useDiagramContext } from "../hooks/useDiagram.js";
-import { edgeTypes } from "./custom/index.js";
+import { edgeTypes, nodeTypes } from "./custom/index.js";
 import { DiagramUI } from "./DiagramUI.js";
 import { useLayoutConstraints } from "./useLayoutConstraints.js";
 import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
-import { nodeTypes } from "./custom/nodes/nodeTypes.js";
 const selectXYProps = (ctx) => ({
   initialized: ctx.initialized,
   nodes: ctx.xynodes,
@@ -29,7 +28,12 @@ const selectXYProps = (ctx) => ({
   }
 });
 const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.fitViewPadding === b.fitViewPadding && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport, b.viewport);
-const LikeC4DiagramXYFlow = memo(({ background, nodesDraggable, nodesSelectable }) => {
+const LikeC4DiagramXYFlow = memo(({
+  background,
+  nodesDraggable,
+  nodesSelectable,
+  children
+}) => {
   const diagram = useDiagram();
   const {
     initialized,
@@ -53,7 +57,7 @@ const LikeC4DiagramXYFlow = memo(({ background, nodesDraggable, nodesSelectable
   const onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });
   });
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     BaseXYFlow,
     {
       nodes,
@@ -120,7 +124,10 @@ const LikeC4DiagramXYFlow = memo(({ background, nodesDraggable, nodesSelectable
       nodesSelectable,
       ...notReadOnly && nodesDraggable && layoutConstraints,
       ...props,
-      children: /* @__PURE__ */ jsx(DiagramUI, {})
+      children: [
+        /* @__PURE__ */ jsx(DiagramUI, {}),
+        children
+      ]
     }
   );
 }, shallowEqual);

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -1,14 +1,16 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { nonNullable, isStepEdgeId } from "@likec4/core";
 import { useDebouncedEffect } from "@react-hookz/web";
+import { EdgeLabelRenderer } from "@xyflow/react";
 import clsx from "clsx";
 import { line, curveCatmullRomOpen } from "d3-shape";
 import { useState, useRef, useEffect } from "react";
 import { isTruthy, first, last } from "remeda";
 import { useDiagram } from "../../../hooks/useDiagram.js";
+import { useIsReducedGraphics } from "../../../hooks/useIsReducedGraphics.js";
 import { VectorImpl, vector } from "../../../utils/vector.js";
 import { isSamePoint, bezierControlPoints, bezierPath } from "../../../utils/xyflow.js";
-import { controlPoint, controlDragging } from "./edges.css.js";
+import { controlPointsContainer, controlPoint, controlDragging } from "./edges.css.js";
 import { NotePopover } from "./NotePopover.js";
 import { RelationshipsDropdownMenu } from "./RelationshipsDropdownMenu.js";
 import { getNodeIntersectionFromCenterToPoint } from "./utils.js";
@@ -22,6 +24,7 @@ import { EdgeActionButton } from "../../../base/primitives/edge/EdgeActionButton
 const curve = line().curve(curveCatmullRomOpen).x((d) => d.x).y((d) => d.y);
 const RelationshipEdge = customEdge((props) => {
   var _a;
+  const isReducedGraphicsMode = useIsReducedGraphics();
   const [isControlPointDragging, setIsControlPointDragging] = useState(false);
   const xyflowStore = useXYStoreApi();
   const xyflow = useXYFlow();
@@ -39,10 +42,11 @@ const RelationshipEdge = customEdge((props) => {
     target,
     targetX,
     targetY,
+    selected = false,
     data: {
       id: edgeId,
-      navigateTo,
       points,
+      hovered = false,
       active = false,
       dimmed = false,
       labelBBox,
@@ -50,6 +54,7 @@ const RelationshipEdge = customEdge((props) => {
       ...data
     }
   } = props;
+  const navigateTo = enableNavigateTo ? data.navigateTo : void 0;
   const sourceNode = nonNullable(useXYInternalNode(source), `source node ${source} not found`);
   const targetNode = nonNullable(useXYInternalNode(target), `target node ${target} not found`);
   const isModified = isTruthy(data.controlPoints) || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data.position) || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data.position);
@@ -243,7 +248,7 @@ const RelationshipEdge = customEdge((props) => {
     const notes = props.data.notes;
     if (notes && isStepEdgeId(props.id) && ((_a = diagram.getContext().activeWalkthrough) == null ? void 0 : _a.stepId) === props.id) {
       renderLabel = (props2) => /* @__PURE__ */ jsx(NotePopover, { notes, children: /* @__PURE__ */ jsx("div", { ...props2 }) });
-    } else if (enableRelationshipDetails) {
+    } else if (enableRelationshipDetails && (!isReducedGraphicsMode || hovered || selected || active)) {
       renderLabel = (props2) => /* @__PURE__ */ jsx(
         RelationshipsDropdownMenu,
         {
@@ -258,26 +263,6 @@ const RelationshipEdge = customEdge((props) => {
   }
   return /* @__PURE__ */ jsxs(EdgeContainer, { ...props, className: clsx(isControlPointDragging && controlDragging), children: [
     /* @__PURE__ */ jsx(EdgePath, { ...props, svgPath: edgePath, ref: svgPathRef, onEdgePointerDown }),
-    enableEdgeEditing && /* @__PURE__ */ jsx(
-      "g",
-      {
-        onContextMenu: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        },
-        children: controlPoints.map((p, i) => /* @__PURE__ */ jsx(
-          "circle",
-          {
-            onPointerDown: (e) => onControlPointerDown(i, e),
-            className: controlPoint,
-            cx: p.x,
-            cy: p.y,
-            r: 3
-          },
-          i
-        ))
-      }
-    ),
     /* @__PURE__ */ jsx(
       EdgeLabel,
       {
@@ -288,7 +273,7 @@ const RelationshipEdge = customEdge((props) => {
           translate: isModified ? "translate(-50%, 0)" : void 0
         },
         ...renderLabel && { renderRoot: renderLabel },
-        children: !isControlPointDragging && enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(
+        children: !isControlPointDragging && navigateTo && /* @__PURE__ */ jsx(
           EdgeActionButton,
           {
             ...props,
@@ -299,7 +284,27 @@ const RelationshipEdge = customEdge((props) => {
           }
         )
       }
-    )
+    ),
+    enableEdgeEditing && controlPoints.length > 0 && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(EdgeContainer, { component: "svg", className: controlPointsContainer, ...props, children: /* @__PURE__ */ jsx(
+      "g",
+      {
+        onContextMenu: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        children: controlPoints.map((p, i) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            onPointerDown: (e) => onControlPointerDown(i, e),
+            className: clsx("nodrag nopan", controlPoint),
+            cx: Math.round(p.x),
+            cy: Math.round(p.y),
+            r: 3
+          },
+          i
+        ))
+      }
+    ) }) })
   ] });
 });
 export {

package/dist/likec4diagram/custom/edges/edges.css.d.ts

@@ -1,2 +1,3 @@
+export declare const controlPointsContainer: string;
 export declare const controlPoint: string;
 export declare const controlDragging: string;

package/dist/likec4diagram/custom/edges/edges.css.js

@@ -1,7 +1,9 @@
 /* empty css                         */
-var controlPoint = "_1fw3wl00";
-var controlDragging = "_1fw3wl01";
+var controlPointsContainer = "_1fw3wl00";
+var controlPoint = "_1fw3wl01";
+var controlDragging = "_1fw3wl02";
 export {
   controlDragging,
-  controlPoint
+  controlPoint,
+  controlPointsContainer
 };

package/dist/likec4diagram/custom/index.d.ts

@@ -1,7 +1,15 @@
+import { Types } from '../types';
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { NodeProps } from '../../base';
 import { Position, XYPosition } from '@xyflow/system';
 import { EdgeId, NonEmptyArray, Point, Color, ViewId, RelationshipArrowType, RelationshipLineType, BBox } from '@likec4/core';
-export { nodeTypes } from './nodes/nodeTypes';
+export declare const nodeTypes: {
+    element: NamedExoticComponent<NodeProps<Types.ElementNodeData>>;
+    deployment: NamedExoticComponent<NodeProps<Types.DeploymentElementNodeData>>;
+    'compound-element': NamedExoticComponent<NodeProps<Types.CompoundElementNodeData>>;
+    'compound-deployment': NamedExoticComponent<NodeProps<Types.CompoundDeploymentNodeData>>;
+    'view-group': NamedExoticComponent<NodeProps<Types.ViewGroupNodeData>>;
+};
 export declare const edgeTypes: {
     relationship: NamedExoticComponent<{
         source: string;

package/dist/likec4diagram/custom/index.js

@@ -1,7 +1,16 @@
 import { RelationshipEdge } from "./edges/RelationshipEdge.js";
+import { ViewGroupNode, CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode } from "./nodes/nodeTypes.js";
+const nodeTypes = {
+  element: ElementNode,
+  deployment: DeploymentNode,
+  "compound-element": CompoundElementNode,
+  "compound-deployment": CompoundDeploymentNode,
+  "view-group": ViewGroupNode
+};
 const edgeTypes = {
   relationship: RelationshipEdge
 };
 export {
-  edgeTypes
+  edgeTypes,
+  nodeTypes
 };

package/dist/likec4diagram/custom/nodes/nodeTypes.d.ts

@@ -1,10 +1,8 @@
 import { NodeProps } from '../../../base';
 import { Types } from '../../types';
 import { NamedExoticComponent } from 'react';
-export declare const nodeTypes: {
-    element: NamedExoticComponent<NodeProps<Types.ElementNodeData>>;
-    deployment: NamedExoticComponent<NodeProps<Types.DeploymentElementNodeData>>;
-    'compound-element': NamedExoticComponent<NodeProps<Types.CompoundElementNodeData>>;
-    'compound-deployment': NamedExoticComponent<NodeProps<Types.CompoundDeploymentNodeData>>;
-    'view-group': NamedExoticComponent<NodeProps<Types.ViewGroupNodeData>>;
-};
+export declare const ElementNode: NamedExoticComponent<NodeProps<Types.ElementNodeData>>;
+export declare const DeploymentNode: NamedExoticComponent<NodeProps<Types.DeploymentElementNodeData>>;
+export declare const CompoundElementNode: NamedExoticComponent<NodeProps<Types.CompoundElementNodeData>>;
+export declare const CompoundDeploymentNode: NamedExoticComponent<NodeProps<Types.CompoundDeploymentNodeData>>;
+export declare const ViewGroupNode: NamedExoticComponent<NodeProps<Types.ViewGroupNodeData>>;

package/dist/likec4diagram/custom/nodes/nodeTypes.js

@@ -8,8 +8,8 @@ import { DeploymentElementToolbar, ElementToolbar } from "./toolbar/ElementToolb
 import { customNode } from "../../../base/primitives/customNode.js";
 import { CompoundNodeContainer } from "../../../base/primitives/compound/CompoundNodeContainer.js";
 import { CompoundTitle } from "../../../base/primitives/compound/CompoundTitle.js";
-import { DefaultHandles } from "../../../base/primitives/NodeHandles.js";
 import { IfNotEnabled, IfEnabled, useEnabledFeature } from "../../../context/DiagramFeatures.js";
+import { DefaultHandles } from "../../../base/primitives/NodeHandles.js";
 import { CompoundDetailsButton } from "../../../base/primitives/compound/CompoundDetailsButton.js";
 import { ElementNodeContainer } from "../../../base/primitives/element/ElementNodeContainer.js";
 import { ElementShape } from "../../../base/primitives/element/ElementShape.js";
@@ -30,65 +30,67 @@ const ElementDetailsButtonWithHandler = ({ fqn, ...props }) => {
     }
   );
 };
-const nodeTypes = {
-  element: customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple }),
-    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
-    /* @__PURE__ */ jsx(ElementActions, { ...props }),
-    /* @__PURE__ */ jsx(
-      ElementDetailsButtonWithHandler,
-      {
-        fqn: props.data.modelFqn,
-        ...props
-      }
-    ),
-    /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(ElementToolbar, { ...props }) }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] })),
-  deployment: customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple }),
-    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
-    /* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
-    !!props.data.modelFqn && /* @__PURE__ */ jsx(
-      ElementDetailsButtonWithHandler,
-      {
-        fqn: props.data.modelFqn,
-        ...props
-      }
-    ),
-    /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }) }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] })),
-  "compound-element": customNode((props) => {
-    const diagram = useDiagram();
-    return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
-      /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-      /* @__PURE__ */ jsx(CompoundActions, { ...props }),
-      /* @__PURE__ */ jsx(IfEnabled, { feature: "ElementDetails", children: /* @__PURE__ */ jsx(
-        CompoundDetailsButton,
-        {
-          ...props,
-          onClick: (e) => {
-            e.stopPropagation();
-            diagram.openElementDetails(props.data.modelFqn, props.id);
-          }
-        }
-      ) }),
-      /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }) }),
-      /* @__PURE__ */ jsx(DefaultHandles, {})
-    ] });
-  }),
-  "compound-deployment": customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+const ElementNode = customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+  /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple, withSelectedIndicator: props.selected }),
+  /* @__PURE__ */ jsx(ElementTitle, { ...props }),
+  /* @__PURE__ */ jsx(ElementActions, { ...props }),
+  /* @__PURE__ */ jsx(
+    ElementDetailsButtonWithHandler,
+    {
+      fqn: props.data.modelFqn,
+      ...props
+    }
+  ),
+  /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(ElementToolbar, { ...props }) }),
+  /* @__PURE__ */ jsx(DefaultHandles, {})
+] }));
+const DeploymentNode = customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+  /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple, withSelectedIndicator: props.selected }),
+  /* @__PURE__ */ jsx(ElementTitle, { ...props }),
+  /* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
+  !!props.data.modelFqn && /* @__PURE__ */ jsx(
+    ElementDetailsButtonWithHandler,
+    {
+      fqn: props.data.modelFqn,
+      ...props
+    }
+  ),
+  /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }) }),
+  /* @__PURE__ */ jsx(DefaultHandles, {})
+] }));
+const CompoundElementNode = customNode((props) => {
+  const diagram = useDiagram();
+  return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
     /* @__PURE__ */ jsx(CompoundActions, { ...props }),
-    /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }) }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] })),
-  "view-group": customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
-    /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+    /* @__PURE__ */ jsx(IfEnabled, { feature: "ElementDetails", children: /* @__PURE__ */ jsx(
+      CompoundDetailsButton,
+      {
+        ...props,
+        onClick: (e) => {
+          e.stopPropagation();
+          diagram.openElementDetails(props.data.modelFqn, props.id);
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }) }),
     /* @__PURE__ */ jsx(DefaultHandles, {})
-  ] }))
-};
+  ] });
+});
+const CompoundDeploymentNode = customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+  /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+  /* @__PURE__ */ jsx(CompoundActions, { ...props }),
+  /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }) }),
+  /* @__PURE__ */ jsx(DefaultHandles, {})
+] }));
+const ViewGroupNode = customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+  /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+  /* @__PURE__ */ jsx(DefaultHandles, {})
+] }));
 export {
-  nodeTypes
+  CompoundDeploymentNode,
+  CompoundElementNode,
+  DeploymentNode,
+  ElementNode,
+  ViewGroupNode
 };