@likec4/diagram 1.55.1 → 1.56.0

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

@@ -1,154 +1,138 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { css } from '@likec4/styles/css';
-import { Box } from '@likec4/styles/jsx';
-import { Handle, Position } from '@xyflow/react';
-import { isTruthy } from 'remeda';
-import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
-import { ElementActions } from './ElementActions.js';
-import { NodeDrifts } from './NodeDrifts.js';
-import { NodeNotes } from './NodeNotes.js';
-import { ElementDetailsButtonWithHandler } from './nodes.js';
-import { ElementToolbar } from './toolbar/ElementToolbar.js';
-import { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
-import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
-import { ElementData } from '../../../base-primitives/element/ElementData.js';
-
-const positionMap = {
-  left: Position.Left,
-  right: Position.Right,
-  top: Position.Top,
-  bottom: Position.Bottom
+import "../../../_virtual/_rolldown/runtime.js";
+import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
+import { ElementData } from "../../../base-primitives/element/ElementData.js";
+import { ElementNodeContainer } from "../../../base-primitives/element/ElementNodeContainer.js";
+import { ElementShape } from "../../../base-primitives/element/ElementShape.js";
+import { ElementActions } from "./ElementActions.js";
+import { NodeDrifts } from "./NodeDrifts.js";
+import { NodeNotes } from "./NodeNotes.js";
+import { ElementToolbar } from "./toolbar/ElementToolbar.js";
+import { ElementDetailsButtonWithHandler } from "./nodes.js";
+import { css } from "@likec4/styles/css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Handle, Position } from "@xyflow/react";
+import { isTruthy } from "remeda";
+import { Box } from "@likec4/styles/jsx";
+//#region src/likec4diagram/custom/nodes/SequenceActorNode.tsx
+var positionMap = {
+	left: Position.Left,
+	right: Position.Right,
+	top: Position.Top,
+	bottom: Position.Bottom
 };
-const ActorStepPort = ({
-  data,
-  port: p
-}) => {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        "data-likec4-color": data.color,
-        className: css({
-          position: "absolute",
-          backgroundColor: "var(--likec4-palette-fill)",
-          rounded: "xs",
-          width: {
-            base: "5px",
-            _whenHovered: "7px",
-            _whenSelected: "7px"
-          },
-          transition: "fast",
-          translateX: "-1/2",
-          translateY: "-1/2",
-          translate: "auto"
-        }),
-        style: {
-          top: p.cy,
-          left: p.cx,
-          height: p.height
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Handle,
-      {
-        id: p.id,
-        type: p.type,
-        position: positionMap[p.position],
-        style: {
-          top: p.cy - 3,
-          left: p.cx - 3,
-          width: 6,
-          height: 6,
-          right: "unset",
-          bottom: "unset",
-          visibility: "hidden",
-          transform: p.position === "left" ? "translate(-150%, 0)" : "translate(100%, 0)"
-        }
-      }
-    )
-  ] });
+var ActorStepPort = ({ data, port: p }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Box, {
+		"data-likec4-color": data.color,
+		className: css({
+			position: "absolute",
+			backgroundColor: "var(--likec4-palette-fill)",
+			rounded: "xs",
+			width: {
+				base: "5px",
+				_whenHovered: "7px",
+				_whenSelected: "7px"
+			},
+			transition: "fast",
+			translateX: "-1/2",
+			translateY: "-1/2",
+			translate: "auto"
+		}),
+		style: {
+			top: p.cy,
+			left: p.cx,
+			height: p.height
+		}
+	}), /* @__PURE__ */ jsx(Handle, {
+		id: p.id,
+		type: p.type,
+		position: positionMap[p.position],
+		style: {
+			top: p.cy - 3,
+			left: p.cx - 3,
+			width: 6,
+			height: 6,
+			right: "unset",
+			bottom: "unset",
+			visibility: "hidden",
+			transform: p.position === "left" ? "translate(-150%, 0)" : "translate(100%, 0)"
+		}
+	})] });
 };
-const hasModelFqn = (node) => "modelFqn" in node.data && isTruthy(node.data.modelFqn);
+var hasModelFqn = (node) => "modelFqn" in node.data && isTruthy(node.data.modelFqn);
 function SequenceActorNode(props) {
-  const { enableElementDetails, enableReadOnly, enableCompareWithLatest, enableNotes } = useEnabledFeatures();
-  const data = props.data;
-  const {
-    id,
-    positionAbsoluteY,
-    data: {
-      viewHeight,
-      hovered: isHovered = false,
-      ports
-    }
-  } = props;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        "data-likec4-color": "gray",
-        className: css({
-          position: "absolute",
-          rounded: "xs",
-          top: "1",
-          pointerEvents: "none",
-          transition: "fast",
-          translateX: "-1/2",
-          translate: "auto"
-        }),
-        style: {
-          backgroundColor: "var(--likec4-palette-stroke)",
-          opacity: isHovered ? 0.6 : 0.4,
-          left: "50%",
-          width: isHovered ? 3 : 2,
-          height: viewHeight - positionAbsoluteY,
-          zIndex: -1,
-          pointerEvents: "none"
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-      enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-      /* @__PURE__ */ jsx(ElementShape, { ...props }),
-      /* @__PURE__ */ jsx(ElementData, { ...props }),
-      hasModelFqn(props) && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(ElementActions, { ...props }),
-        enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { id, data }),
-        !enableReadOnly && /* @__PURE__ */ jsx(ElementToolbar, { ...props })
-      ] }),
-      enableNotes && /* @__PURE__ */ jsx(NodeNotes, { ...props })
-    ] }),
-    ports.map((p) => /* @__PURE__ */ jsx(ActorStepPort, { port: p, data: props.data }, p.id))
-  ] });
+	const { enableElementDetails, enableReadOnly, enableCompareWithLatest, enableNotes } = useEnabledFeatures();
+	const data = props.data;
+	const { id, positionAbsoluteY, data: { viewHeight, hovered: isHovered = false, ports } } = props;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Box, {
+			"data-likec4-color": "gray",
+			className: css({
+				position: "absolute",
+				rounded: "xs",
+				top: "1",
+				pointerEvents: "none",
+				transition: "fast",
+				translateX: "-1/2",
+				translate: "auto"
+			}),
+			style: {
+				backgroundColor: "var(--likec4-palette-stroke)",
+				opacity: isHovered ? .6 : .4,
+				left: "50%",
+				width: isHovered ? 3 : 2,
+				height: viewHeight - positionAbsoluteY,
+				zIndex: -1,
+				pointerEvents: "none"
+			}
+		}),
+		/* @__PURE__ */ jsxs(ElementNodeContainer, {
+			nodeProps: props,
+			children: [
+				enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
+				/* @__PURE__ */ jsx(ElementShape, { ...props }),
+				/* @__PURE__ */ jsx(ElementData, { ...props }),
+				hasModelFqn(props) && /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(ElementActions, { ...props }),
+					enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, {
+						id,
+						data
+					}),
+					!enableReadOnly && /* @__PURE__ */ jsx(ElementToolbar, { ...props })
+				] }),
+				enableNotes && /* @__PURE__ */ jsx(NodeNotes, { ...props })
+			]
+		}),
+		ports.map((p) => /* @__PURE__ */ jsx(ActorStepPort, {
+			port: p,
+			data: props.data
+		}, p.id))
+	] });
 }
 function SequenceParallelArea(props) {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      "data-likec4-color": props.data.color,
-      css: {
-        width: "100%",
-        height: "100%",
-        border: "default",
-        rounded: "sm",
-        borderWidth: 1,
-        "--_color": {
-          base: "var(--likec4-palette-stroke)",
-          _dark: "[color-mix(in oklab, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]"
-        },
-        borderColor: "[var(--_color)/30]",
-        backgroundColor: "var(--likec4-palette-fill)/15",
-        pointerEvents: "none",
-        paddingLeft: "2",
-        paddingTop: "0.5",
-        fontSize: "xs",
-        fontWeight: "bold",
-        letterSpacing: ".75px",
-        color: "[var(--_color)/75]"
-      },
-      children: "PARALLEL"
-    }
-  );
+	return /* @__PURE__ */ jsx(Box, {
+		"data-likec4-color": props.data.color,
+		css: {
+			width: "100%",
+			height: "100%",
+			border: "default",
+			rounded: "sm",
+			borderWidth: 1,
+			"--_color": {
+				base: "var(--likec4-palette-stroke)",
+				_dark: "[color-mix(in oklab, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]"
+			},
+			borderColor: "[var(--_color)/30]",
+			backgroundColor: "var(--likec4-palette-fill)/15",
+			pointerEvents: "none",
+			paddingLeft: "2",
+			paddingTop: "0.5",
+			fontSize: "xs",
+			fontWeight: "bold",
+			letterSpacing: ".75px",
+			color: "[var(--_color)/75]"
+		},
+		children: "PARALLEL"
+	});
 }
-
+//#endregion
 export { SequenceActorNode, SequenceParallelArea };

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

@@ -1,165 +1,154 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { css } from '@likec4/styles/css';
-import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
-import '@xstate/react';
-import 'fast-equals';
-import 'react';
-import { useDiagram } from '../../../hooks/safeContext.js';
-import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
-import { CompoundActions } from './CompoundActions.js';
-import { DeploymentElementActions, ElementActions } from './ElementActions.js';
-import { NodeDrifts } from './NodeDrifts.js';
-import { NodeNotes } from './NodeNotes.js';
-import { CompoundDeploymentToolbar, CompoundElementToolbar } from './toolbar/CompoundToolbar.js';
-import { DeploymentElementToolbar, ElementToolbar } from './toolbar/ElementToolbar.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 { CompoundDetailsButton } from '../../../base-primitives/compound/CompoundDetailsButton.js';
-import { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
-import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
-import { ElementData } from '../../../base-primitives/element/ElementData.js';
-import { ElementDetailsButton } from '../../../base-primitives/element/ElementDetailsButton.js';
-import { ElementTags as ElementTags$1 } from '../../../base-primitives/element/ElementTags.js';
-
+import "../../../_virtual/_rolldown/runtime.js";
+import { useCallbackRef } from "../../../hooks/useCallbackRef.js";
+import { useEnabledFeatures } from "../../../context/DiagramFeatures.js";
+import { useDiagram } from "../../../hooks/safeContext.js";
+import { CompoundDetailsButton } from "../../../base-primitives/compound/CompoundDetailsButton.js";
+import { CompoundNodeContainer } from "../../../base-primitives/compound/CompoundNodeContainer.js";
+import { CompoundTitle } from "../../../base-primitives/compound/CompoundTitle.js";
+import { ElementData } from "../../../base-primitives/element/ElementData.js";
+import { ElementDetailsButton } from "../../../base-primitives/element/ElementDetailsButton.js";
+import { ElementNodeContainer } from "../../../base-primitives/element/ElementNodeContainer.js";
+import { ElementShape } from "../../../base-primitives/element/ElementShape.js";
+import { ElementTags as ElementTags$1 } from "../../../base-primitives/element/ElementTags.js";
+import { DefaultHandles } from "../../../base-primitives/NodeHandles.js";
+import { CompoundActions } from "./CompoundActions.js";
+import { DeploymentElementActions, ElementActions } from "./ElementActions.js";
+import { NodeDrifts } from "./NodeDrifts.js";
+import { NodeNotes } from "./NodeNotes.js";
+import { CompoundDeploymentToolbar, CompoundElementToolbar } from "./toolbar/CompoundToolbar.js";
+import { DeploymentElementToolbar, ElementToolbar } from "./toolbar/ElementToolbar.js";
+import { css } from "@likec4/styles/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/likec4diagram/custom/nodes/nodes.tsx
 function ElementTags(props) {
-  const diagram = useDiagram();
-  return /* @__PURE__ */ jsx(
-    ElementTags$1,
-    {
-      onTagClick: useCallbackRef((tag) => {
-        diagram.openSearch(tag);
-      }),
-      onTagMouseEnter: useCallbackRef((tag) => {
-        diagram.send({ type: "tag.highlight", tag });
-      }),
-      onTagMouseLeave: useCallbackRef((_tag) => {
-        diagram.send({ type: "tag.unhighlight" });
-      }),
-      ...props
-    }
-  );
+	const diagram = useDiagram();
+	return /* @__PURE__ */ jsx(ElementTags$1, {
+		onTagClick: useCallbackRef((tag) => {
+			diagram.openSearch(tag);
+		}),
+		onTagMouseEnter: useCallbackRef((tag) => {
+			diagram.send({
+				type: "tag.highlight",
+				tag
+			});
+		}),
+		onTagMouseLeave: useCallbackRef((_tag) => {
+			diagram.send({ type: "tag.unhighlight" });
+		}),
+		...props
+	});
 }
 function ElementDetailsButtonWithHandler(props) {
-  const diagram = useDiagram();
-  const fqn = props.data.modelFqn;
-  if (!fqn) return null;
-  return /* @__PURE__ */ jsx(
-    ElementDetailsButton,
-    {
-      ...props,
-      onClick: (e) => {
-        e.stopPropagation();
-        diagram.openElementDetails(fqn, props.id);
-      }
-    }
-  );
+	const diagram = useDiagram();
+	const fqn = props.data.modelFqn;
+	if (!fqn) return null;
+	return /* @__PURE__ */ jsx(ElementDetailsButton, {
+		...props,
+		onClick: (e) => {
+			e.stopPropagation();
+			diagram.openElementDetails(fqn, props.id);
+		}
+	});
 }
 function CompoundDetailsButtonWithHandler(props) {
-  const diagram = useDiagram();
-  const fqn = props.data.modelFqn;
-  if (!fqn) return null;
-  return /* @__PURE__ */ jsx(
-    CompoundDetailsButton,
-    {
-      ...props,
-      onClick: (e) => {
-        e.stopPropagation();
-        diagram.openElementDetails(fqn, props.id);
-      }
-    }
-  );
+	const diagram = useDiagram();
+	const fqn = props.data.modelFqn;
+	if (!fqn) return null;
+	return /* @__PURE__ */ jsx(CompoundDetailsButton, {
+		...props,
+		onClick: (e) => {
+			e.stopPropagation();
+			diagram.openElementDetails(fqn, props.id);
+		}
+	});
 }
+/**
+* Renders an element node.
+*/
 function ElementNode(props) {
-  const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest, enableNotes } = useEnabledFeatures();
-  return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-    enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-    /* @__PURE__ */ jsx(ElementShape, { ...props }),
-    /* @__PURE__ */ jsx(ElementData, { ...props }),
-    enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
-    /* @__PURE__ */ jsx(ElementActions, { ...props }),
-    enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
-    !enableReadOnly && /* @__PURE__ */ jsx(ElementToolbar, { ...props }),
-    enableNotes && /* @__PURE__ */ jsx(NodeNotes, { ...props }),
-    /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
-  ] });
+	const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest, enableNotes } = useEnabledFeatures();
+	return /* @__PURE__ */ jsxs(ElementNodeContainer, {
+		nodeProps: props,
+		children: [
+			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
+			/* @__PURE__ */ jsx(ElementShape, { ...props }),
+			/* @__PURE__ */ jsx(ElementData, { ...props }),
+			enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
+			/* @__PURE__ */ jsx(ElementActions, { ...props }),
+			enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
+			!enableReadOnly && /* @__PURE__ */ jsx(ElementToolbar, { ...props }),
+			enableNotes && /* @__PURE__ */ jsx(NodeNotes, { ...props }),
+			/* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
+		]
+	});
 }
 function DeploymentNode(props) {
-  const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest, enableNotes } = useEnabledFeatures();
-  return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-    enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-    /* @__PURE__ */ jsx(ElementShape, { ...props }),
-    /* @__PURE__ */ jsx(ElementData, { ...props }),
-    enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
-    /* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
-    enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
-    !enableReadOnly && /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }),
-    enableNotes && /* @__PURE__ */ jsx(NodeNotes, { ...props }),
-    /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
-  ] });
+	const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest, enableNotes } = useEnabledFeatures();
+	return /* @__PURE__ */ jsxs(ElementNodeContainer, {
+		nodeProps: props,
+		children: [
+			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
+			/* @__PURE__ */ jsx(ElementShape, { ...props }),
+			/* @__PURE__ */ jsx(ElementData, { ...props }),
+			enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
+			/* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
+			enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
+			!enableReadOnly && /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }),
+			enableNotes && /* @__PURE__ */ jsx(NodeNotes, { ...props }),
+			/* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
+		]
+	});
 }
-const compoundHasDrifts = css({
-  outlineColor: "likec4.compare.manual.outline",
-  outlineWidth: "4px",
-  outlineStyle: "dashed",
-  outlineOffset: "1.5"
+var compoundHasDrifts = css({
+	outlineColor: "likec4.compare.manual.outline",
+	outlineWidth: "4px",
+	outlineStyle: "dashed",
+	outlineOffset: "1.5"
 });
-const hasDrifts = (props) => {
-  return props.data.drifts && props.data.drifts.length > 0;
+var hasDrifts = (props) => {
+	return props.data.drifts && props.data.drifts.length > 0;
 };
 function CompoundElementNode(props) {
-  const { enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
-  const showDrifts = enableCompareWithLatest && hasDrifts(props);
-  return /* @__PURE__ */ jsxs(
-    CompoundNodeContainer,
-    {
-      className: showDrifts ? compoundHasDrifts : void 0,
-      nodeProps: props,
-      children: [
-        enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-        /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-        /* @__PURE__ */ jsx(CompoundActions, { ...props }),
-        enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
-        !enableReadOnly && /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }),
-        /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
-      ]
-    }
-  );
+	const { enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
+	return /* @__PURE__ */ jsxs(CompoundNodeContainer, {
+		className: enableCompareWithLatest && hasDrifts(props) ? compoundHasDrifts : void 0,
+		nodeProps: props,
+		children: [
+			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
+			/* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+			/* @__PURE__ */ jsx(CompoundActions, { ...props }),
+			enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
+			!enableReadOnly && /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }),
+			/* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
+		]
+	});
 }
 function CompoundDeploymentNode(props) {
-  const { enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
-  const showDrifts = enableCompareWithLatest && hasDrifts(props);
-  return /* @__PURE__ */ jsxs(
-    CompoundNodeContainer,
-    {
-      className: showDrifts ? compoundHasDrifts : void 0,
-      nodeProps: props,
-      children: [
-        enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-        /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-        /* @__PURE__ */ jsx(CompoundActions, { ...props }),
-        enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
-        !enableReadOnly && /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }),
-        /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
-      ]
-    }
-  );
+	const { enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
+	return /* @__PURE__ */ jsxs(CompoundNodeContainer, {
+		className: enableCompareWithLatest && hasDrifts(props) ? compoundHasDrifts : void 0,
+		nodeProps: props,
+		children: [
+			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
+			/* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+			/* @__PURE__ */ jsx(CompoundActions, { ...props }),
+			enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
+			!enableReadOnly && /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }),
+			/* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
+		]
+	});
 }
 function ViewGroupNode(props) {
-  const { enableCompareWithLatest } = useEnabledFeatures();
-  const showDrifts = enableCompareWithLatest && hasDrifts(props);
-  return /* @__PURE__ */ jsxs(
-    CompoundNodeContainer,
-    {
-      className: showDrifts ? compoundHasDrifts : void 0,
-      nodeProps: props,
-      children: [
-        enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
-        /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-        /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
-      ]
-    }
-  );
+	const { enableCompareWithLatest } = useEnabledFeatures();
+	return /* @__PURE__ */ jsxs(CompoundNodeContainer, {
+		className: enableCompareWithLatest && hasDrifts(props) ? compoundHasDrifts : void 0,
+		nodeProps: props,
+		children: [
+			enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
+			/* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+			/* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
+		]
+	});
 }
-
+//#endregion
 export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode };