@likec4/diagram 1.30.0 → 1.32.0

package/dist/likec4diagram/DiagramXYFlow.js

@@ -1,16 +1,17 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { nonNullable } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
 import { useTimeout, useDebouncedCallback, useCallbackRef } from '@mantine/hooks';
-import { deepEqual, shallowEqual } from 'fast-equals';
-import { r as reactExports } from '../_virtual/index.js';
+import { useCustomCompareMemo } from '@react-hookz/web';
+import { shallowEqual } from 'fast-equals';
 import { BaseXYFlow } from '../base/BaseXYFlow.js';
 import { useIsReducedGraphics, usePanningAtom } from '../context/ReduceGraphics.js';
 import { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
-import { edgeTypes, nodeTypes } from './custom/index.js';
+import { BuiltinNodes, edgeTypes } from './custom/index.js';
 import { DiagramUI } from './DiagramUI.js';
 import { useLayoutConstraints } from './useLayoutConstraints.js';
 import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
+import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
 
 const selectXYProps = (ctx) => ({
   initialized: ctx.initialized.xydata && ctx.initialized.xyflow,
@@ -30,14 +31,14 @@ 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 ?? null, b.viewport ?? null);
-const compareProps = (a, b) => a.nodesDraggable === b.nodesDraggable && a.nodesSelectable === b.nodesSelectable && deepEqual(a.background, b.background) && deepEqual(a.reactFlowProps ?? {}, b.reactFlowProps ?? {});
-const LikeC4DiagramXYFlow = reactExports.memo(({
+function LikeC4DiagramXYFlow({
   background = "dots",
   nodesDraggable = false,
   nodesSelectable = false,
   reactFlowProps = {},
-  children
-}) => {
+  children,
+  renderNodes
+}) {
   const diagram = useDiagram();
   const {
     initialized,
@@ -78,107 +79,121 @@ const LikeC4DiagramXYFlow = reactExports.memo(({
     diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
   }), onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });
-  });
-  return /* @__PURE__ */ jsxs(
-    BaseXYFlow,
-    {
-      nodes,
-      edges,
-      className: cx(initialized ? "initialized" : "not-initialized"),
-      nodeTypes,
-      edgeTypes,
-      onNodesChange: useCallbackRef((changes) => {
-        diagram.send({ type: "xyflow.applyNodeChanges", changes });
-      }),
-      onEdgesChange: useCallbackRef((changes) => {
-        diagram.send({ type: "xyflow.applyEdgeChanges", changes });
-      }),
-      background: initialized ? background : "transparent",
-      fitView: false,
-      onNodeClick: useCallbackRef((e, node) => {
-        e.stopPropagation();
-        diagram.send({ type: "xyflow.nodeClick", node });
-        onNodeClick?.(diagram.findDiagramNode(node.id), e);
-      }),
-      onEdgeClick: useCallbackRef((e, edge) => {
-        e.stopPropagation();
-        diagram.send({ type: "xyflow.edgeClick", edge });
-        onEdgeClick?.(diagram.findDiagramEdge(edge.id), e);
-      }),
-      onPaneClick: useCallbackRef((e) => {
-        e.stopPropagation();
-        diagram.send({ type: "xyflow.paneClick" });
-        onCanvasClick?.(e);
-      }),
-      onDoubleClick: useCallbackRef((e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        diagram.send({ type: "xyflow.paneDblClick" });
-        onCanvasDblClick?.(e);
-      }),
-      onNodeMouseEnter: useCallbackRef((_event, node) => {
-        _event.stopPropagation();
-        if (!node.data.hovered) {
-          diagram.send({ type: "xyflow.nodeMouseEnter", node });
-        }
-      }),
-      onNodeMouseLeave: useCallbackRef((_event, node) => {
-        _event.stopPropagation();
-        if (node.data.hovered) {
-          diagram.send({ type: "xyflow.nodeMouseLeave", node });
-        }
-      }),
-      onEdgeMouseEnter: useCallbackRef((_event, edge) => {
-        _event.stopPropagation();
-        if (!edge.data.hovered) {
-          diagram.send({ type: "xyflow.edgeMouseEnter", edge });
-        }
-      }),
-      onEdgeMouseLeave: useCallbackRef((_event, edge) => {
-        _event.stopPropagation();
-        if (edge.data.hovered) {
-          diagram.send({ type: "xyflow.edgeMouseLeave", edge });
-        }
-      }),
-      ...props.pannable && {
-        onMove
-      },
-      onMoveEnd,
-      onInit: useCallbackRef((instance) => {
-        diagram.send({ type: "xyflow.init", instance });
-      }),
-      onNodeContextMenu: useCallbackRef((event, node) => {
-        const diagramNode = nonNullable(
-          diagram.findDiagramNode(node.id),
-          `diagramNode ${node.id} not found`
-        );
-        onNodeContextMenu?.(diagramNode, event);
-      }),
-      onEdgeContextMenu: useCallbackRef((event, edge) => {
-        const diagramEdge = nonNullable(
-          diagram.findDiagramEdge(edge.id),
-          `diagramEdge ${edge.id} not found`
-        );
-        onEdgeContextMenu?.(diagramEdge, event);
-      }),
-      onPaneContextMenu: useCallbackRef((event) => {
-        onCanvasContextMenu?.(event);
-      }),
-      ...enableFitView && {
-        onViewportResize
-      },
-      nodesDraggable: notReadOnly && nodesDraggable,
-      nodesSelectable,
-      ...notReadOnly && nodesDraggable && layoutConstraints,
-      ...props,
-      ...reactFlowProps,
-      children: [
-        /* @__PURE__ */ jsx(DiagramUI, {}, "DiagramUI"),
-        children
-      ]
-    }
+  }), nodeTypes = useCustomCompareMemo(
+    () => {
+      return {
+        element: renderNodes?.element ?? BuiltinNodes.element,
+        deployment: renderNodes?.deployment ?? BuiltinNodes.deployment,
+        "compound-element": renderNodes?.compoundElement ?? BuiltinNodes["compound-element"],
+        "compound-deployment": renderNodes?.compoundDeployment ?? BuiltinNodes["compound-deployment"],
+        "view-group": renderNodes?.viewGroup ?? BuiltinNodes["view-group"]
+      };
+    },
+    [renderNodes],
+    shallowEqual
   );
-}, compareProps);
-LikeC4DiagramXYFlow.displayName = "LikeC4DiagramXYFlow";
+  useUpdateEffect(() => {
+    console.warn("renderNodes changed - this might degrade performance");
+  }, [nodeTypes]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BaseXYFlow,
+      {
+        nodes,
+        edges,
+        className: cx(initialized ? "initialized" : "not-initialized"),
+        nodeTypes,
+        edgeTypes,
+        onNodesChange: useCallbackRef((changes) => {
+          diagram.send({ type: "xyflow.applyNodeChanges", changes });
+        }),
+        onEdgesChange: useCallbackRef((changes) => {
+          diagram.send({ type: "xyflow.applyEdgeChanges", changes });
+        }),
+        background: initialized ? background : "transparent",
+        fitView: false,
+        onNodeClick: useCallbackRef((e, node) => {
+          e.stopPropagation();
+          diagram.send({ type: "xyflow.nodeClick", node });
+          onNodeClick?.(diagram.findDiagramNode(node.id), e);
+        }),
+        onEdgeClick: useCallbackRef((e, edge) => {
+          e.stopPropagation();
+          diagram.send({ type: "xyflow.edgeClick", edge });
+          onEdgeClick?.(diagram.findDiagramEdge(edge.id), e);
+        }),
+        onPaneClick: useCallbackRef((e) => {
+          e.stopPropagation();
+          diagram.send({ type: "xyflow.paneClick" });
+          onCanvasClick?.(e);
+        }),
+        onDoubleClick: useCallbackRef((e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          diagram.send({ type: "xyflow.paneDblClick" });
+          onCanvasDblClick?.(e);
+        }),
+        onNodeMouseEnter: useCallbackRef((_event, node) => {
+          _event.stopPropagation();
+          if (!node.data.hovered) {
+            diagram.send({ type: "xyflow.nodeMouseEnter", node });
+          }
+        }),
+        onNodeMouseLeave: useCallbackRef((_event, node) => {
+          _event.stopPropagation();
+          if (node.data.hovered) {
+            diagram.send({ type: "xyflow.nodeMouseLeave", node });
+          }
+        }),
+        onEdgeMouseEnter: useCallbackRef((_event, edge) => {
+          _event.stopPropagation();
+          if (!edge.data.hovered) {
+            diagram.send({ type: "xyflow.edgeMouseEnter", edge });
+          }
+        }),
+        onEdgeMouseLeave: useCallbackRef((_event, edge) => {
+          _event.stopPropagation();
+          if (edge.data.hovered) {
+            diagram.send({ type: "xyflow.edgeMouseLeave", edge });
+          }
+        }),
+        ...props.pannable && {
+          onMove
+        },
+        onMoveEnd,
+        onInit: useCallbackRef((instance) => {
+          diagram.send({ type: "xyflow.init", instance });
+        }),
+        onNodeContextMenu: useCallbackRef((event, node) => {
+          const diagramNode = nonNullable(
+            diagram.findDiagramNode(node.id),
+            `diagramNode ${node.id} not found`
+          );
+          onNodeContextMenu?.(diagramNode, event);
+        }),
+        onEdgeContextMenu: useCallbackRef((event, edge) => {
+          const diagramEdge = nonNullable(
+            diagram.findDiagramEdge(edge.id),
+            `diagramEdge ${edge.id} not found`
+          );
+          onEdgeContextMenu?.(diagramEdge, event);
+        }),
+        onPaneContextMenu: useCallbackRef((event) => {
+          onCanvasContextMenu?.(event);
+        }),
+        ...enableFitView && {
+          onViewportResize
+        },
+        nodesDraggable: notReadOnly && nodesDraggable,
+        nodesSelectable,
+        ...notReadOnly && nodesDraggable && layoutConstraints,
+        ...props,
+        ...reactFlowProps,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(DiagramUI, {}, "DiagramUI")
+  ] });
+}
 
 export { LikeC4DiagramXYFlow };

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Popover, PopoverTarget, PopoverDropdown, Stack, ScrollAreaAutosize, Text, CloseButton, Group, Button } from '@mantine/core';
 import { useDebouncedEffect } from '@react-hookz/web';
-import { r as reactExports } from '../../../_virtual/index.js';
+import { useState } from 'react';
 import { isTruthy, isNonNull } from 'remeda';
 import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
 import { edgeNoteText, edgeNoteCloseButton } from './NotePopover.css.js';
@@ -21,7 +21,7 @@ const NotePopover = ({ notes, children }) => {
     hasPrevious: s.xyedges.findIndex((e) => e.id === s.activeWalkthrough?.stepId) > 0
   }));
   const diagram = useDiagram();
-  const [isOpened, setIsOpened] = reactExports.useState(false);
+  const [isOpened, setIsOpened] = useState(false);
   const portalProps = useMantinePortalProps();
   useDebouncedEffect(
     () => {

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

@@ -1,16 +1,17 @@
-import { EdgeId, NonEmptyArray, Point, Color, BBox, RelationshipLineType, RelationshipArrowType, ViewId } from '@likec4/core';
+import { EdgeId, NonEmptyArray, Point, Color, RelationshipArrowType, RelationshipLineType, BBox, ViewId } from '@likec4/core';
 import { XYPosition } from '@xyflow/react';
-import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
-export declare const RelationshipEdge: NamedExoticComponent<{
+import { EdgeData, Dimmed } from '../../../base/types.Base';
+export declare const RelationshipEdge: 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;
@@ -29,27 +30,23 @@ export declare const RelationshipEdge: NamedExoticComponent<{
     markerEnd?: string;
     pathOptions?: any;
     interactionWidth?: number;
-    data: {
+    data: EdgeData & {
         hovered?: boolean;
         active?: boolean;
-        dimmed?: import("../../../base").Base.Dimmed;
-    } & {
+        dimmed?: 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;
+        line: RelationshipLineType | undefined;
+        dir: "forward" | "back" | "both" | undefined;
+        technology: string | undefined;
         tail: RelationshipArrowType | undefined;
-        navigateTo: ViewId<string> | undefined;
+        labelBBox: BBox | null | undefined;
+        navigateTo: ViewId<string> | null | undefined;
         notes: string | undefined;
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
-        hovered?: boolean;
-        active?: boolean;
-        dimmed?: import("../../../base").Base.Dimmed;
     };
 }>;

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

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { nonNullable } from '@likec4/core';
+import { cx } from '@likec4/styles/css';
 import { useDebouncedEffect } from '@react-hookz/web';
 import { EdgeLabelRenderer } from '@xyflow/react';
-import clsx from 'clsx';
 import { line, curveCatmullRomOpen } from 'd3-shape';
-import { r as reactExports } from '../../../_virtual/index.js';
+import { useState, useRef, useEffect } from 'react';
 import { isTruthy, first, last } from 'remeda';
 import { ZIndexes } from '../../../base/const.js';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
@@ -28,7 +28,7 @@ const curve = line().curve(curveCatmullRomOpen).x((d) => d.x).y((d) => d.y);
 const selectActiveStepId = (s) => s.context.activeWalkthrough?.stepId ?? null;
 const RelationshipEdge = customEdge((props) => {
   const isPanning = useIsPanning();
-  const [isControlPointDragging, setIsControlPointDragging] = reactExports.useState(false);
+  const [isControlPointDragging, setIsControlPointDragging] = useState(false);
   const xyflowStore = useXYStoreApi();
   const xyflow = useXYFlow();
   const diagram = useDiagram();
@@ -83,12 +83,12 @@ const RelationshipEdge = customEdge((props) => {
     edgePath = bezierPath(points);
   }
   let labelX = labelBBox?.x ?? 0, labelY = labelBBox?.y ?? 0;
-  const [labelPos, setLabelPos] = reactExports.useState({
+  const [labelPos, setLabelPos] = useState({
     x: labelXY?.x ?? labelX,
     y: labelXY?.y ?? labelY
   });
-  const svgPathRef = reactExports.useRef(null);
-  reactExports.useEffect(() => {
+  const svgPathRef = useRef(null);
+  useEffect(() => {
     const path = svgPathRef.current;
     if (!path) return;
     const dompoint = path.getPointAtLength(path.getTotalLength() * 0.5);
@@ -158,6 +158,10 @@ const RelationshipEdge = customEdge((props) => {
       }
       setIsControlPointDragging(false);
     };
+    const onClick = (e2) => {
+      e2.stopPropagation();
+      e2.preventDefault();
+    };
     domNode.addEventListener("pointermove", onPointerMove, {
       capture: true
     });
@@ -165,6 +169,10 @@ const RelationshipEdge = customEdge((props) => {
       once: true,
       capture: true
     });
+    domNode.addEventListener("click", onClick, {
+      capture: true,
+      once: true
+    });
   };
   const onRmbControlPointerDown = (index, e, domNode) => {
     if (controlPoints.length <= 1) {
@@ -264,7 +272,7 @@ const RelationshipEdge = customEdge((props) => {
     }
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(EdgeContainer, { ...props, className: clsx(isControlPointDragging && controlDragging), children: [
+    /* @__PURE__ */ jsxs(EdgeContainer, { ...props, className: cx(isControlPointDragging && controlDragging), children: [
       /* @__PURE__ */ jsx(
         EdgePath,
         {
@@ -310,7 +318,7 @@ const RelationshipEdge = customEdge((props) => {
               "circle",
               {
                 onPointerDown: (e) => onControlPointerDown(i, e),
-                className: clsx("nodrag nopan", controlPoint),
+                className: cx("nodrag nopan", controlPoint),
                 cx: Math.round(p.x),
                 cy: Math.round(p.y),
                 r: 3

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

@@ -1,9 +1,9 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { DiagramNode, nameFromFqn } from '@likec4/core';
+import { 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,26 @@ 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 likec4model = useLikeC4Model(true);
+  const { diagramEdge, sourceNode, targetNode } = useDiagramContext(
+    (ctx) => ({
+      diagramEdge: findDiagramEdge(ctx, edgeId),
+      sourceNode: findDiagramNode(ctx, source),
+      targetNode: findDiagramNode(ctx, target)
+    }),
+    void 0,
+    [edgeId, source, target]
+  );
+  const likec4model = useLikeC4Model();
   const diagram = useDiagram();
   const portalProps = useMantinePortalProps();
-  const onClickOpenOverlay = reactExports.useCallback((e) => {
+  const onClickOpenOverlay = useCallback((e) => {
     e.stopPropagation();
     diagram.openRelationshipDetails(edgeId);
   }, [edgeId]);
@@ -63,7 +67,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 +134,7 @@ const RelationshipsDropdownMenu = reactExports.memo(({
     }
   );
 });
-const Relationship = reactExports.forwardRef(({
+const Relationship = forwardRef(({
   className,
   relationship: r,
   edge,
@@ -139,7 +143,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);
@@ -201,7 +205,7 @@ const Relationship = reactExports.forwardRef(({
   ] });
 });
 function getShortId(r, actualEndpointId, diagramNode) {
-  const diagramNodeId = r.isDeploymentRelation() ? diagramNode.id : DiagramNode.modelRef(diagramNode) || "";
+  const diagramNodeId = r.isDeploymentRelation() ? diagramNode.id : diagramNode.modelRef || "";
   return nameFromFqn(diagramNodeId) + actualEndpointId.slice(diagramNodeId.length);
 }
 

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

@@ -1,25 +1,26 @@
 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 { EdgeData, Dimmed } from '../../base/types.Base';
+import { EdgeId, NonEmptyArray, Point, Color, RelationshipArrowType, RelationshipLineType, 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 +39,24 @@ export declare const edgeTypes: {
         markerEnd?: string;
         pathOptions?: any;
         interactionWidth?: number;
-        data: {
+        data: EdgeData & {
             hovered?: boolean;
             active?: boolean;
-            dimmed?: import("../../base").Base.Dimmed;
-        } & {
+            dimmed?: 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;
+            line: RelationshipLineType | undefined;
+            dir: "forward" | "back" | "both" | undefined;
+            technology: string | undefined;
             tail: RelationshipArrowType | undefined;
-            navigateTo: ViewId<string> | undefined;
+            labelBBox: BBox | null | undefined;
+            navigateTo: ViewId<string> | null | 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 {};