@likec4/diagram 1.30.0 → 1.31.0

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

@@ -3,7 +3,7 @@ import { DiagramNode, nameFromFqn } from '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
 import { Menu, MenuTarget, MenuDropdown, MenuLabel, MenuDivider, Box, ActionIcon, MenuItem, Stack, Group, Text, TooltipGroup, Space, Tooltip as Tooltip$1 } from '@mantine/core';
 import { IconInfoCircle, IconArrowRight, IconZoomScan, IconFileSymlink } from '@tabler/icons-react';
-import { r as reactExports } from '../../../_virtual/index.js';
+import { memo, useCallback, Fragment as Fragment$1, forwardRef } from 'react';
 import { pipe, map, filter, isTruthy, partition } from 'remeda';
 import { Link } from '../../../components/Link.js';
 import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
@@ -11,7 +11,7 @@ import { findDiagramNode, findDiagramEdge } from '../../../state/utils.js';
 import { menuDropdown, endpoint, title, menuItemRelationship } from './RelationshipsDropdownMenu.css.js';
 import { useLikeC4Model } from '../../../likec4model/useLikeC4Model.js';
 import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
-import { useEnabledFeature, IfEnabled } from '../../../context/DiagramFeatures.js';
+import { useEnabledFeatures, IfEnabled } from '../../../context/DiagramFeatures.js';
 import { useDiagramEventHandlers } from '../../../context/DiagramEventHandlers.js';
 
 const stopPropagation = (e) => e.stopPropagation();
@@ -25,22 +25,24 @@ const Tooltip = Tooltip$1.withProps({
   offset: 8,
   withinPortal: false
 });
-const RelationshipsDropdownMenu = reactExports.memo(({
+const RelationshipsDropdownMenu = memo(({
   edgeId,
   source,
   target,
   disabled = false,
   children
 }) => {
-  const { diagramEdge, sourceNode, targetNode } = useDiagramContext((ctx) => ({
-    diagramEdge: findDiagramEdge(ctx, edgeId),
-    sourceNode: findDiagramNode(ctx, source),
-    targetNode: findDiagramNode(ctx, target)
-  }));
+  const { diagramEdge, sourceNode, targetNode } = useDiagramContext(
+    useCallback((ctx) => ({
+      diagramEdge: findDiagramEdge(ctx, edgeId),
+      sourceNode: findDiagramNode(ctx, source),
+      targetNode: findDiagramNode(ctx, target)
+    }), [edgeId, source, target])
+  );
   const likec4model = useLikeC4Model(true);
   const diagram = useDiagram();
   const portalProps = useMantinePortalProps();
-  const onClickOpenOverlay = reactExports.useCallback((e) => {
+  const onClickOpenOverlay = useCallback((e) => {
     e.stopPropagation();
     diagram.openRelationshipDetails(edgeId);
   }, [edgeId]);
@@ -63,7 +65,7 @@ const RelationshipsDropdownMenu = reactExports.memo(({
     filter(isTruthy),
     partition((r) => r.source.id === sourceNode.id && r.target.id === targetNode.id)
   );
-  const renderRelationship = (relationship, index) => /* @__PURE__ */ jsxs(reactExports.Fragment, { children: [
+  const renderRelationship = (relationship, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
     index > 0 && /* @__PURE__ */ jsx(MenuDivider, { opacity: 0.65 }),
     /* @__PURE__ */ jsx(
       MenuItem,
@@ -130,7 +132,7 @@ const RelationshipsDropdownMenu = reactExports.memo(({
     }
   );
 });
-const Relationship = reactExports.forwardRef(({
+const Relationship = forwardRef(({
   className,
   relationship: r,
   edge,
@@ -139,7 +141,7 @@ const Relationship = reactExports.forwardRef(({
   ...props
 }, ref) => {
   const diagram = useDiagram();
-  const { enableNavigateTo } = useEnabledFeature("NavigateTo");
+  const { enableNavigateTo } = useEnabledFeatures();
   const { onOpenSource } = useDiagramEventHandlers();
   const viewId = diagram.currentView.id;
   const sourceId = getShortId(r, r.source.id, sourceNode);

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

@@ -1,25 +1,25 @@
 import { Types } from '../types';
-import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { MemoExoticComponent, FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { NodeProps } from '../../base';
 import { Position, XYPosition } from '@xyflow/system';
-import { EdgeId, NonEmptyArray, Point, Color, BBox, RelationshipLineType, RelationshipArrowType, ViewId } from '@likec4/core';
-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>>;
+import { EdgeId, NonEmptyArray, Point, Color, RelationshipLineType, RelationshipArrowType, BBox, ViewId } from '@likec4/core';
+export declare const BuiltinNodes: {
+    element: MemoExoticComponent<(props: NodeProps<Types.ElementNodeData, "element">) => import("react/jsx-runtime").JSX.Element>;
+    deployment: MemoExoticComponent<(props: NodeProps<Types.DeploymentElementNodeData, "deployment">) => import("react/jsx-runtime").JSX.Element>;
+    'compound-element': MemoExoticComponent<(props: NodeProps<Types.CompoundElementNodeData, "compound-element">) => import("react/jsx-runtime").JSX.Element>;
+    'compound-deployment': MemoExoticComponent<(props: NodeProps<Types.CompoundDeploymentNodeData, "compound-deployment">) => import("react/jsx-runtime").JSX.Element>;
+    'view-group': MemoExoticComponent<(props: NodeProps<Types.ViewGroupNodeData, "view-group">) => import("react/jsx-runtime").JSX.Element>;
 };
 export declare const edgeTypes: {
-    relationship: NamedExoticComponent<{
+    relationship: FunctionComponent<{
         id: string;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         style?: CSSProperties;
+        animated?: boolean;
         source: string;
         target: string;
-        animated?: boolean;
         sourceX: number;
         sourceY: number;
         targetX: number;
@@ -38,28 +38,24 @@ export declare const edgeTypes: {
         markerEnd?: string;
         pathOptions?: any;
         interactionWidth?: number;
-        data: {
+        data: import("../../base").Base.EdgeData & {
             hovered?: boolean;
             active?: boolean;
             dimmed?: import("../../base").Base.Dimmed;
-        } & {
             id: EdgeId;
             label: string | null;
             points: NonEmptyArray<Point>;
-            technology: string | undefined;
             color: Color | undefined;
-            labelBBox: BBox | null | undefined;
-            dir: "forward" | "back" | "both" | undefined;
             line: RelationshipLineType | undefined;
-            head: RelationshipArrowType | undefined;
+            dir: "forward" | "back" | "both" | undefined;
             tail: RelationshipArrowType | undefined;
+            head: RelationshipArrowType | undefined;
+            technology: string | undefined;
+            labelBBox: BBox | null | undefined;
             navigateTo: ViewId<string> | undefined;
             notes: string | undefined;
             labelXY: XYPosition | null;
             controlPoints: XYPosition[] | undefined | null;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../../base").Base.Dimmed;
         };
     }>;
 };

package/dist/likec4diagram/custom/index.js

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

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

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
+import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
-import { useEnabledFeature } from '../../../context/DiagramFeatures.js';
 import { CompoundActionButton } from '../../../base/primitives/compound/CompoundActionButton.js';
 
 const CompoundActions = (props) => {
-  const { enableNavigateTo } = useEnabledFeature("NavigateTo");
+  const { enableNavigateTo } = useEnabledFeatures();
   const diagram = useDiagram();
   const { navigateTo } = props.data;
   if (navigateTo && enableNavigateTo) {

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

@@ -1,7 +1,30 @@
+import { ElementActionButtons } from '../../../base/primitives';
 import { NodeProps } from '../../../base/types';
 import { Types } from '../../types';
-type ElementActionsProps = NodeProps<Types.ElementNodeData>;
-export declare const ElementActions: (props: ElementActionsProps) => import("react/jsx-runtime").JSX.Element;
-type DeploymentElementActionsProps = NodeProps<Types.DeploymentElementNodeData>;
-export declare const DeploymentElementActions: (props: DeploymentElementActionsProps) => import("react/jsx-runtime").JSX.Element;
+type WithExtraButtons = {
+    /**
+     * Add extra action buttons
+     * @example
+     * ```tsx
+     * <ElementActions
+     *   extraButtons={[
+     *     {
+     *       key: 'extra',
+     *       icon: <IconZoomScan />,
+     *       onClick: (e) => {
+     *         e.stopPropagation()
+     *         console.log('extra action clicked')
+     *       },
+     *       },
+     *     },
+     *   ]}
+     * />
+     * ```
+     */
+    extraButtons?: ElementActionButtons.Item[];
+};
+export type ElementActionsProps = NodeProps<Types.ElementNodeData> & WithExtraButtons;
+export declare const ElementActions: ({ extraButtons, ...props }: ElementActionsProps) => import("react/jsx-runtime").JSX.Element;
+export type DeploymentElementActionsProps = NodeProps<Types.DeploymentElementNodeData> & WithExtraButtons;
+export declare const DeploymentElementActions: ({ extraButtons, ...props }: DeploymentElementActionsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,68 +1,82 @@
 import { jsx } from 'react/jsx-runtime';
+import { hasAtLeast } from '@likec4/core';
 import { IconZoomScan, IconTransform } from '@tabler/icons-react';
+import { useMemo } from 'react';
+import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
-import { useEnabledFeature } from '../../../context/DiagramFeatures.js';
 import { ElementActionButtons } from '../../../base/primitives/element/ElementActionButtons.js';
 
-const ElementActions = (props) => {
-  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeature("RelationshipBrowser", "NavigateTo");
+const ElementActions = ({
+  extraButtons,
+  ...props
+}) => {
+  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
   const diagram = useDiagram();
-  const buttons = [];
   const { navigateTo, modelFqn } = props.data;
-  if (navigateTo && enableNavigateTo) {
-    buttons.push({
-      key: "navigate",
-      icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
-      onClick: (e) => {
-        e.stopPropagation();
-        diagram.navigateTo(navigateTo, props.id);
-      }
-    });
-  }
-  if (enableRelationshipBrowser) {
-    buttons.push({
-      key: "relationships",
-      icon: /* @__PURE__ */ jsx(IconTransform, {}),
-      onClick: (e) => {
-        e.stopPropagation();
-        diagram.openRelationshipsBrowser(modelFqn);
-      }
-    });
-  }
-  return /* @__PURE__ */ jsx(
-    ElementActionButtons,
-    {
-      buttons,
-      ...props
+  let buttons = useMemo(() => {
+    const buttons2 = [];
+    if (navigateTo && enableNavigateTo) {
+      buttons2.push({
+        key: "navigate",
+        icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
+        onClick: (e) => {
+          e.stopPropagation();
+          diagram.navigateTo(navigateTo, props.id);
+        }
+      });
     }
-  );
+    if (enableRelationshipBrowser) {
+      buttons2.push({
+        key: "relationships",
+        icon: /* @__PURE__ */ jsx(IconTransform, {}),
+        onClick: (e) => {
+          e.stopPropagation();
+          diagram.openRelationshipsBrowser(modelFqn);
+        }
+      });
+    }
+    return buttons2;
+  }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, props.id]);
+  if (extraButtons && hasAtLeast(extraButtons, 1)) {
+    buttons = [...buttons, ...extraButtons];
+  }
+  return /* @__PURE__ */ jsx(ElementActionButtons, { ...props, buttons });
 };
-const DeploymentElementActions = (props) => {
-  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeature("NavigateTo", "RelationshipBrowser");
+const DeploymentElementActions = ({
+  extraButtons,
+  ...props
+}) => {
+  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures();
   const diagram = useDiagram();
-  const buttons = [];
   const { navigateTo, modelFqn } = props.data;
-  if (navigateTo && enableNavigateTo) {
-    buttons.push({
-      key: "navigate",
-      icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
-      onClick: (e) => {
-        e.stopPropagation();
-        diagram.navigateTo(navigateTo, props.id);
-      }
-    });
-  }
-  if (enableRelationshipBrowser && !!modelFqn) {
-    buttons.push({
-      key: "relationships",
-      icon: /* @__PURE__ */ jsx(IconTransform, {}),
-      onClick: (e) => {
-        e.stopPropagation();
-        diagram.openRelationshipsBrowser(modelFqn);
-      }
-    });
+  let buttons = useMemo(() => {
+    const buttons2 = [];
+    if (navigateTo && enableNavigateTo) {
+      buttons2.push({
+        key: "navigate",
+        icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
+        onClick: (e) => {
+          e.stopPropagation();
+          diagram.navigateTo(navigateTo, props.id);
+        }
+      });
+    }
+    if (enableRelationshipBrowser && !!modelFqn) {
+      buttons2.push({
+        key: "relationships",
+        icon: /* @__PURE__ */ jsx(IconTransform, {}),
+        onClick: (e) => {
+          e.stopPropagation();
+          diagram.openRelationshipsBrowser(modelFqn);
+        }
+      });
+    }
+    return buttons2;
+  }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, props.id]);
+  if (extraButtons && hasAtLeast(extraButtons, 1)) {
+    buttons = [...buttons, ...extraButtons];
   }
-  return /* @__PURE__ */ jsx(ElementActionButtons, { buttons, ...props });
+  return /* @__PURE__ */ jsx(ElementActionButtons, { ...props, buttons });
 };
 
 export { DeploymentElementActions, ElementActions };

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

@@ -0,0 +1,8 @@
+export { CompoundActions } from './CompoundActions';
+export { DeploymentElementActions, ElementActions } from './ElementActions';
+export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode, } from './nodes';
+export * from './CompoundActions';
+export * from './ElementActions';
+export * from './toolbar/CompoundToolbar';
+export * from './toolbar/ElementToolbar';
+export * from './toolbar/Toolbar';

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

@@ -0,0 +1,10 @@
+import { NodeProps } from '../../../base';
+import { Types } from '../../types';
+import { MemoExoticComponent } from 'react';
+export declare function ElementDetailsButtonWithHandler(props: NodeProps<Types.ElementNodeData | Types.DeploymentElementNodeData>): import("react/jsx-runtime").JSX.Element | null;
+export declare function CompoundDetailsButtonWithHandler(props: NodeProps<Types.CompoundElementNodeData | Types.CompoundDeploymentNodeData>): import("react/jsx-runtime").JSX.Element | null;
+export declare const ElementNode: MemoExoticComponent<(props: NodeProps<Types.ElementNodeData, "element">) => import("react/jsx-runtime").JSX.Element>;
+export declare const DeploymentNode: MemoExoticComponent<(props: NodeProps<Types.DeploymentElementNodeData, "deployment">) => import("react/jsx-runtime").JSX.Element>;
+export declare const CompoundElementNode: MemoExoticComponent<(props: NodeProps<Types.CompoundElementNodeData, "compound-element">) => import("react/jsx-runtime").JSX.Element>;
+export declare const CompoundDeploymentNode: MemoExoticComponent<(props: NodeProps<Types.CompoundDeploymentNodeData, "compound-deployment">) => import("react/jsx-runtime").JSX.Element>;
+export declare const ViewGroupNode: MemoExoticComponent<(props: NodeProps<Types.ViewGroupNodeData, "view-group">) => import("react/jsx-runtime").JSX.Element>;

package/dist/likec4diagram/custom/nodes/{nodeTypes.js → nodes.js}

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@likec4/core';
+import { IfNotReadOnly, IfEnabled, useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { CompoundActions } from './CompoundActions.js';
 import { DeploymentElementActions, ElementActions } from './ElementActions.js';
@@ -8,18 +8,18 @@ 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 { 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';
 import { ElementTitle } from '../../../base/primitives/element/ElementTitle.js';
+import { CompoundDetailsButton } from '../../../base/primitives/compound/CompoundDetailsButton.js';
 import { ElementDetailsButton } from '../../../base/primitives/element/ElementDetailsButton.js';
 
-const ElementDetailsButtonWithHandler = ({ fqn, ...props }) => {
-  const { enableElementDetails } = useEnabledFeature("ElementDetails");
+function ElementDetailsButtonWithHandler(props) {
+  const { enableElementDetails } = useEnabledFeatures();
   const diagram = useDiagram();
-  if (!enableElementDetails) return null;
+  const fqn = props.data.modelFqn;
+  if (!enableElementDetails || !fqn) return null;
   return /* @__PURE__ */ jsx(
     ElementDetailsButton,
     {
@@ -30,63 +30,63 @@ const ElementDetailsButtonWithHandler = ({ fqn, ...props }) => {
       }
     }
   );
-};
+}
+function CompoundDetailsButtonWithHandler(props) {
+  const { enableElementDetails } = useEnabledFeatures();
+  const diagram = useDiagram();
+  const fqn = props.data.modelFqn;
+  if (!enableElementDetails || !fqn) return null;
+  return /* @__PURE__ */ jsx(
+    CompoundDetailsButton,
+    {
+      ...props,
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.openElementDetails(fqn, props.id);
+      }
+    }
+  );
+}
 const ElementNode = customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-  /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple }),
+  /* @__PURE__ */ jsx(ElementShape, { ...props }),
   /* @__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(ElementDetailsButtonWithHandler, { ...props }),
+  /* @__PURE__ */ jsx(IfNotReadOnly, { children: /* @__PURE__ */ jsx(ElementToolbar, { ...props }) }),
   /* @__PURE__ */ jsx(DefaultHandles, {})
 ] }));
+ElementNode.displayName = "ElementNode";
 const DeploymentNode = customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-  /* @__PURE__ */ jsx(ElementShape, { ...props, isMultiple: props.data.isMultiple }),
+  /* @__PURE__ */ jsx(ElementShape, { ...props }),
   /* @__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(ElementDetailsButtonWithHandler, { ...props }),
+  /* @__PURE__ */ jsx(IfNotReadOnly, { children: /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }) }),
   /* @__PURE__ */ jsx(DefaultHandles, {})
 ] }));
+DeploymentNode.displayName = "DeploymentNode";
 const CompoundElementNode = customNode((props) => {
-  const diagram = useDiagram();
+  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(IfEnabled, { feature: "ElementDetails", children: /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }) }),
+    /* @__PURE__ */ jsx(IfNotReadOnly, { children: /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }) }),
     /* @__PURE__ */ jsx(DefaultHandles, {})
   ] });
 });
+CompoundElementNode.displayName = "CompoundElementNode";
 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(IfNotReadOnly, { children: /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }) }),
   /* @__PURE__ */ jsx(DefaultHandles, {})
 ] }));
+CompoundDeploymentNode.displayName = "CompoundDeploymentNode";
 const ViewGroupNode = customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
   /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
   /* @__PURE__ */ jsx(DefaultHandles, {})
 ] }));
+ViewGroupNode.displayName = "ViewGroupNode";
 
-export { CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode, ViewGroupNode };
+export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode };

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

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { defaultTheme } from '@likec4/core';
 import { Popover, PopoverTarget, Button, ColorSwatch, PopoverDropdown, Space, Divider, Stack, TooltipGroup, Flex, Tooltip, CheckIcon, rem, Slider } from '@mantine/core';
 import { useUpdateEffect } from '@react-hookz/web';
-import { r as reactExports } from '../../../../_virtual/index.js';
+import { useState } from 'react';
 import { themedColors, colors } from './_shared.js';
 
 function ColorButton({
@@ -137,7 +137,7 @@ function OpacityOption({
   elementOpacity = 100,
   onOpacityChange
 }) {
-  const [value, setValue] = reactExports.useState(elementOpacity);
+  const [value, setValue] = useState(elementOpacity);
   useUpdateEffect(() => {
     setValue(elementOpacity);
   }, [elementOpacity]);

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

@@ -1,14 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@likec4/core';
 import { Box, SegmentedControl } from '@mantine/core';
-import { r as reactExports } from '../../../../_virtual/index.js';
+import { useState, useEffect } from 'react';
+import { useEnabledFeatures } from '../../../../context/DiagramFeatures.js';
 import { useHandlers, GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
 import { ColorButton } from './ColorButton.js';
 import { Toolbar } from './Toolbar.js';
-import { useEnabledFeature } from '../../../../context/DiagramFeatures.js';
 
 function CompoundElementToolbar(props) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature("RelationshipBrowser", "Vscode");
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();
   const {
     data: {
       style,
@@ -48,7 +47,7 @@ function CompoundElementToolbar(props) {
   );
 }
 function CompoundDeploymentToolbar(props) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature("RelationshipBrowser", "Vscode");
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();
   const {
     data: {
       deploymentFqn,
@@ -92,8 +91,8 @@ function BorderStyleOption({
   elementBorderStyle = "dashed",
   onChange
 }) {
-  const [value, setValue] = reactExports.useState(elementBorderStyle);
-  reactExports.useEffect(() => {
+  const [value, setValue] = useState(elementBorderStyle);
+  useEffect(() => {
     setValue(elementBorderStyle);
   }, [elementBorderStyle]);
   return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(

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

@@ -2,14 +2,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { ElementShapes } from '@likec4/core';
 import { Menu, MenuTarget, Button, MenuDropdown, MenuItem } from '@mantine/core';
 import { IconSelector, IconCheck } from '@tabler/icons-react';
+import { useEnabledFeatures } from '../../../../context/DiagramFeatures.js';
 import { stopPropagation } from '../../../../utils/xyflow.js';
 import { useHandlers, GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
 import { ColorButton } from './ColorButton.js';
 import { Toolbar } from './Toolbar.js';
-import { useEnabledFeature } from '../../../../context/DiagramFeatures.js';
 
 function ElementToolbar(props) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature("RelationshipBrowser", "Vscode");
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();
   const {
     data: {
       shape,
@@ -47,7 +47,7 @@ function ElementToolbar(props) {
   );
 }
 function DeploymentElementToolbar(props) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature("RelationshipBrowser", "Vscode");
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();
   const {
     data: {
       shape,

package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.d.ts

@@ -1,8 +1,9 @@
 import { NodeToolbarProps } from '@xyflow/react';
 import { ReactNode } from 'react';
-import { Base } from '../../../../base';
+import { NodeProps } from '../../../../base/types';
+import { Types } from '../../../types';
 export type ToolbarProps = Omit<NodeToolbarProps, 'title'> & {
-    nodeProps: Base.NodeProps;
+    nodeProps: NodeProps<Types.NodeData>;
     title: ReactNode;
 };
 export declare function Toolbar({ title, children, nodeProps, ...props }: ToolbarProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
 import { Paper, Stack, Box, Text, Group } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { NodeToolbar } from '@xyflow/react';
-import clsx from 'clsx';
 import { useDiagramContext } from '../../../../hooks/useDiagram.js';
 import { stopPropagation } from '../../../../utils/xyflow.js';
 import { toolbarTitle } from './styles.css.js';
@@ -45,7 +45,7 @@ function Toolbar({ title, children, nodeProps, ...props }) {
       children: /* @__PURE__ */ jsx(
         Paper,
         {
-          className: clsx("nodrag", "nopan"),
+          className: cx("nodrag", "nopan"),
           px: 5,
           pb: 8,
           pt: 4,

package/dist/likec4diagram/custom/nodes/toolbar/_shared.d.ts

@@ -16,7 +16,7 @@ export declare const themedColors: ({
     value: `#${string}`;
 })[];
 export declare const colors: {
-    key: "amber" | "blue" | "gray" | "slate" | "green" | "indigo" | "red" | "sky";
+    key: "blue" | "gray" | "green" | "indigo" | "red" | "amber" | "slate" | "sky";
     value: `#${string}`;
 }[];
 export type ThemeColorKey = typeof themedColors[0]['key'];
@@ -26,7 +26,7 @@ export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttri
     renderRoot?: (props: Record<string, any>) => React.ReactNode;
 }>;
 export declare function useHandlers(target: Fqn, props: NodeProps<Types.NodeData>): {
-    elementColor: "amber" | "blue" | "gray" | "slate" | "green" | "indigo" | "muted" | "primary" | "red" | "secondary" | "sky";
+    elementColor: "blue" | "gray" | "green" | "indigo" | "red" | "amber" | "slate" | "muted" | "primary" | "secondary" | "sky";
     onColorPreview: (color: ThemeColor | null) => void;
     onChange: OnStyleChange;
 };