@eventcatalog/core 3.12.7 → 3.12.9-beta.0

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "3.12.7";
+var version = "3.12.9-beta.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-PLQAZDJI.js";
-import "../chunk-RZOSO7BH.js";
+} from "../chunk-WTCJKTEF.js";
+import "../chunk-2UUS3AQ2.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "3.12.7";
+var version = "3.12.9-beta.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-YO6IQXB3.js";
-import "../chunk-PLQAZDJI.js";
+} from "../chunk-V7YMKA4P.js";
+import "../chunk-WTCJKTEF.js";
 import "../chunk-4UVFXLPI.js";
-import "../chunk-RZOSO7BH.js";
+import "../chunk-2UUS3AQ2.js";
 import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default

package/dist/{chunk-RZOSO7BH.js → chunk-2UUS3AQ2.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "3.12.7";
+var version = "3.12.9-beta.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-UFF5Q7GJ.js → chunk-EDX2LGRV.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-RZOSO7BH.js";
+} from "./chunk-2UUS3AQ2.js";
 
 // src/utils/cli-logger.ts
 import pc from "picocolors";

package/dist/{chunk-2EFYBMLH.js → chunk-RJOB6XEC.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-UFF5Q7GJ.js";
+} from "./chunk-EDX2LGRV.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/{chunk-YO6IQXB3.js → chunk-V7YMKA4P.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-PLQAZDJI.js";
+} from "./chunk-WTCJKTEF.js";
 import {
   countResources,
   serializeCounts

package/dist/{chunk-PLQAZDJI.js → chunk-WTCJKTEF.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-RZOSO7BH.js";
+} from "./chunk-2UUS3AQ2.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "3.12.7";
+var version = "3.12.9-beta.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-RZOSO7BH.js";
+} from "./chunk-2UUS3AQ2.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -109,7 +109,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.12.7";
+var version = "3.12.9-beta.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-PLNJC7NZ.js";
 import {
   log_build_default
-} from "./chunk-YO6IQXB3.js";
-import "./chunk-PLQAZDJI.js";
+} from "./chunk-V7YMKA4P.js";
+import "./chunk-WTCJKTEF.js";
 import "./chunk-4UVFXLPI.js";
 import {
   runMigrations
@@ -22,13 +22,13 @@ import {
 } from "./chunk-5VBIXL6C.js";
 import {
   generate
-} from "./chunk-2EFYBMLH.js";
+} from "./chunk-RJOB6XEC.js";
 import {
   logger
-} from "./chunk-UFF5Q7GJ.js";
+} from "./chunk-EDX2LGRV.js";
 import {
   VERSION
-} from "./chunk-RZOSO7BH.js";
+} from "./chunk-2UUS3AQ2.js";
 import {
   verifyRequiredFieldsAreInCatalogConfigFile
 } from "./chunk-UPONRQSN.js";

package/dist/generate.cjs

@@ -73,7 +73,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.12.7";
+var version = "3.12.9-beta.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-2EFYBMLH.js";
-import "./chunk-UFF5Q7GJ.js";
-import "./chunk-RZOSO7BH.js";
+} from "./chunk-RJOB6XEC.js";
+import "./chunk-EDX2LGRV.js";
+import "./chunk-2UUS3AQ2.js";
 import "./chunk-UPONRQSN.js";
 export {
   generate

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.12.7";
+var version = "3.12.9-beta.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-UFF5Q7GJ.js";
-import "../chunk-RZOSO7BH.js";
+} from "../chunk-EDX2LGRV.js";
+import "../chunk-2UUS3AQ2.js";
 export {
   logger
 };

package/eventcatalog/src/components/MDX/Design/Design.astro

@@ -3,7 +3,7 @@ const { file: designPath, filePath, search = true, title } = Astro.props;
 import fs from 'fs';
 import { getAbsoluteFilePathForAstroFile } from '@utils/files';
 import Admonition from '@components/MDX/Admonition';
-import NodeGraph from '../NodeGraph/NodeGraph';
+import AstroNodeGraph from '../NodeGraph/AstroNodeGraph';
 
 import { isVisualiserEnabled, isEventCatalogChatEnabled, isDevMode } from '@utils/feature';
 import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
@@ -54,7 +54,7 @@ const nodesWithLayout = design ? applyLayoutToNodes(design.nodes || [], savedLay
       />
 
       <div>
-        <NodeGraph
+        <AstroNodeGraph
           id={id}
           title={title ?? design.name}
           nodes={nodesWithLayout}

package/eventcatalog/src/components/MDX/EntityMap/EntityMap.astro

@@ -2,7 +2,7 @@
 import { getDomains } from '@utils/collections/domains';
 import { getNodesAndEdges } from '@utils/node-graphs/domain-entity-map.ts';
 import Admonition from '@components/MDX/Admonition';
-import NodeGraph from '../NodeGraph/NodeGraph';
+import AstroNodeGraph from '../NodeGraph/AstroNodeGraph';
 import { getVersionFromCollection } from '@utils/collections/versions';
 import { getServices } from '@utils/collections/services';
 import { isEventCatalogChatEnabled, isDevMode } from '@utils/feature';
@@ -70,7 +70,7 @@ const nodesWithLayout = applyLayoutToNodes(nodes as any[], savedLayout);
 </div>
 
 <div>
-  <NodeGraph
+  <AstroNodeGraph
     id={id}
     nodes={nodesWithLayout}
     edges={edges}

package/eventcatalog/src/components/MDX/Flow/Flow.astro

@@ -2,7 +2,7 @@
 import { getFlows } from '@utils/collections/flows';
 import { getNodesAndEdges } from '@utils/node-graphs/flows-node-graph';
 import Admonition from '@components/MDX/Admonition';
-import NodeGraph from '../NodeGraph/NodeGraph';
+import AstroNodeGraph from '../NodeGraph/AstroNodeGraph';
 import { getVersionFromCollection } from '@utils/collections/versions';
 import { isVisualiserEnabled, isEventCatalogChatEnabled, isDevMode } from '@utils/feature';
 import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
@@ -53,7 +53,7 @@ const nodesWithLayout = applyLayoutToNodes(nodes, savedLayout);
 </div>
 
 <div>
-  <NodeGraph
+  <AstroNodeGraph
     id={id}
     nodes={nodesWithLayout}
     edges={edges}

package/eventcatalog/src/components/MDX/NodeGraph/AstroNodeGraph.tsx

@@ -0,0 +1,104 @@
+/**
+ * Astro adapter for @eventcatalog/visualiser
+ *
+ * This component wraps the framework-agnostic NodeGraph from @eventcatalog/visualiser
+ * and provides Astro-specific integration including:
+ * - Navigation using Astro's navigate function
+ * - Layout persistence via Astro API routes
+ * - URL building with Astro's URL utilities
+ */
+
+import { useCallback } from 'react';
+import { NodeGraph } from '@eventcatalog/visualiser';
+import '@eventcatalog/visualiser/styles.css';
+import type { Node, Edge } from '@xyflow/react';
+
+interface AstroNodeGraphProps {
+  id: string;
+  nodes: Node[];
+  edges: Edge[];
+  title?: string;
+  href?: string;
+  hrefLabel?: string;
+  linkTo?: 'docs' | 'visualiser';
+  includeKey?: boolean;
+  footerLabel?: string;
+  linksToVisualiser?: boolean;
+  links?: { label: string; url: string }[];
+  mode?: 'full' | 'simple';
+  portalId?: string;
+  showFlowWalkthrough?: boolean;
+  showSearch?: boolean;
+  zoomOnScroll?: boolean;
+  designId?: string;
+  isChatEnabled?: boolean;
+  maxTextSize?: number;
+  isDevMode?: boolean;
+  resourceKey?: string;
+}
+
+const AstroNodeGraph = ({ isDevMode = false, resourceKey, ...otherProps }: AstroNodeGraphProps) => {
+  // Astro-specific navigation handler
+  const handleNavigate = useCallback((url: string) => {
+    // Use window.location for navigation since we can't import astro:transitions/client in a React component
+    window.location.href = url;
+  }, []);
+
+  // Astro-specific URL builder
+  const handleBuildUrl = useCallback((path: string) => {
+    // Simple URL builder - just return the path as-is
+    // The consuming app (core) should handle base URLs if needed
+    return path;
+  }, []);
+
+  // Layout persistence: Save layout to Astro API route
+  const handleSaveLayout = useCallback(
+    async (key: string, positions: Record<string, { x: number; y: number }>): Promise<boolean> => {
+      if (!key) return false;
+
+      try {
+        const response = await fetch('/api/dev/visualizer-layout/save', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ resourceKey: key, positions }),
+        });
+        const result = await response.json();
+        return result.success === true;
+      } catch {
+        return false;
+      }
+    },
+    []
+  );
+
+  // Layout persistence: Reset layout via Astro API route
+  const handleResetLayout = useCallback(async (key: string): Promise<boolean> => {
+    if (!key) return false;
+
+    try {
+      const response = await fetch('/api/dev/visualizer-layout/reset', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ resourceKey: key }),
+      });
+      const result = await response.json();
+      return result.success === true;
+    } catch {
+      return false;
+    }
+  }, []);
+
+  return (
+    <NodeGraph
+      {...otherProps}
+      resourceKey={resourceKey}
+      isDevMode={isDevMode}
+      onNavigate={handleNavigate}
+      onBuildUrl={handleBuildUrl}
+      onSaveLayout={handleSaveLayout}
+      onResetLayout={handleResetLayout}
+    />
+  );
+};
+
+export default AstroNodeGraph;

package/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.astro

@@ -1,5 +1,5 @@
 ---
-import NodeGraphNew from './NodeGraph';
+import AstroNodeGraph from './AstroNodeGraph';
 import { getNodesAndEdges as getNodesAndEdgesForService } from '@utils/node-graphs/services-node-graph';
 import {
   getNodesAndEdgesForCommands,
@@ -148,7 +148,7 @@ const nodesWithLayout = applyLayoutToNodes(nodes as any[], savedLayout);
 ---
 
 <div>
-  <NodeGraphNew
+  <AstroNodeGraph
     id={id}
     nodes={nodesWithLayout}
     edges={edges}

package/eventcatalog/src/components/MDX/NodeGraph/README.md

@@ -0,0 +1,85 @@
+# NodeGraph - Astro Adapter for @eventcatalog/visualiser
+
+## Overview
+
+This directory contains the Astro-specific adapter for the `@eventcatalog/visualiser` package. The visualiser package is framework-agnostic, and this adapter provides Astro-specific integrations.
+
+## Components
+
+### AstroNodeGraph.tsx
+
+The main adapter component that wraps the `NodeGraph` from `@eventcatalog/visualiser` and provides:
+
+- **Navigation**: Uses Astro's `navigate` function from `astro:transitions/client`
+- **URL Building**: Uses Astro's `buildUrl` utility for consistent URL generation
+- **Layout Persistence**: Integrates with Astro API routes for saving/resetting custom node layouts (dev mode only)
+  - `/api/dev/visualiser-layout/save` - Saves node positions
+  - `/api/dev/visualiser-layout/reset` - Resets node positions to defaults
+
+### NodeGraph.astro
+
+The Astro component that serves as the entry point for rendering node graphs. It:
+- Fetches nodes and edges based on the collection type (services, events, domains, etc.)
+- Applies saved layout positions when available (dev mode feature)
+- Renders the `AstroNodeGraph` component with `client:only="react"`
+
+### NodeGraphPortal.tsx
+
+A simple portal component that creates the DOM container where the React component will render. Used by MDX components to embed node graphs in documentation.
+
+## Usage
+
+### In Astro Pages
+
+```astro
+---
+import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
+---
+
+<div id="my-graph-portal"></div>
+<NodeGraph
+  id="my-graph"
+  collection="services"
+  version="1.0.0"
+  mode="full"
+  linkTo="visualiser"
+/>
+```
+
+### In MDX Content
+
+```mdx
+<NodeGraph id="my-service" collection="services" version="1.0.0" />
+```
+
+## Integration with @eventcatalog/visualiser
+
+The `AstroNodeGraph` component directly uses the `NodeGraph` component from `@eventcatalog/visualiser` and provides the framework-specific callbacks:
+
+```typescript
+<NodeGraph
+  {...props}
+  onNavigate={handleNavigate}
+  onBuildUrl={handleBuildUrl}
+  onSaveLayout={handleSaveLayout}
+  onResetLayout={handleResetLayout}
+/>
+```
+
+### Known Limitations
+
+Currently, the `onSaveLayout` and `onResetLayout` callbacks are passed through with a `@ts-expect-error` comment because the visualiser package's outer `NodeGraph` component doesn't expose these props in its TypeScript interface, even though the internal `NodeGraphBuilder` component does accept them.
+
+**TODO**: Update the `@eventcatalog/visualiser` package to expose `onSaveLayout` and `onResetLayout` in the `NodeGraphProps` interface and forward them to `NodeGraphBuilder`.
+
+## Migration Notes
+
+This adapter replaces the old monolithic `NodeGraph.tsx` component that was previously in this directory. The old component has been:
+- Refactored into the framework-agnostic `@eventcatalog/visualiser` package
+- Wrapped by this new `AstroNodeGraph` adapter for Astro-specific integrations
+
+Benefits of this architecture:
+- The visualiser can be used in other frameworks (Next.js, Remix, etc.)
+- Astro-specific concerns are isolated to this adapter
+- Easier to test and maintain
+- Clear separation of concerns

package/eventcatalog/src/pages/visualiser/designs/[id]/index.astro

@@ -1,5 +1,5 @@
 ---
-import NodeGraph from '@components/MDX/NodeGraph/NodeGraph';
+import AstroNodeGraph from '@components/MDX/NodeGraph/AstroNodeGraph';
 import { ClientRouter } from 'astro:transitions';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import { isEventCatalogChatEnabled } from '@utils/feature';
@@ -20,7 +20,7 @@ const { data } = props;
   <div class="bg-gray-100/50 m-4">
     <div class="h-[calc(100vh-130px)] w-full relative border border-gray-200" id={`${data.id}-portal`} transition:animate="fade">
     </div>
-    <NodeGraph
+    <AstroNodeGraph
       id={data.id}
       nodes={data.nodes}
       edges={data.edges}

package/eventcatalog/src/utils/node-graphs/container-node-graph.ts

@@ -1,6 +1,14 @@
 import type { CollectionEntry } from 'astro:content';
 import dagre from 'dagre';
-import { calculatedNodes, createDagreGraph, createEdge, generatedIdForEdge, generateIdForNode } from './utils/utils';
+import {
+  calculatedNodes,
+  createDagreGraph,
+  createEdge,
+  generatedIdForEdge,
+  generateIdForNode,
+  buildContextMenuForService,
+  buildContextMenuForResource,
+} from './utils/utils';
 import { MarkerType } from '@xyflow/react';
 import { findMatchingNodes } from '@utils/collections/util';
 import { getContainers } from '@utils/collections/containers';
@@ -52,7 +60,16 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
       type: service?.collection,
       sourcePosition: 'right',
       targetPosition: 'left',
-      data: { mode, service: { ...service.data } },
+      data: {
+        mode,
+        service: { ...service.data },
+        contextMenu: buildContextMenuForService({
+          id: service.data.id,
+          version: service.data.version,
+          specifications: service.data.specifications as { type: string; path: string }[],
+          repository: service.data.repository as { url: string },
+        }),
+      },
       position: { x: 250, y: 0 },
     });
 
@@ -79,7 +96,15 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
       type: 'data-products',
       sourcePosition: 'right',
       targetPosition: 'left',
-      data: { mode, dataProduct: { ...dataProduct.data } },
+      data: {
+        mode,
+        dataProduct: { ...dataProduct.data },
+        contextMenu: buildContextMenuForResource({
+          collection: 'data-products',
+          id: dataProduct.data.id,
+          version: dataProduct.data.version,
+        }),
+      },
       position: { x: 250, y: 0 },
     });
 
@@ -109,6 +134,11 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
       data: {
         ...container.data,
       },
+      contextMenu: buildContextMenuForResource({
+        collection: 'entities',
+        id: container.data.id,
+        version: container.data.version,
+      }),
     },
     position: { x: 0, y: 0 },
     type: 'data',
@@ -120,7 +150,17 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
       id: generateIdForNode(service),
       sourcePosition: 'left',
       targetPosition: 'right',
-      data: { title: service?.data.id, mode, service: { ...service.data } },
+      data: {
+        title: service?.data.id,
+        mode,
+        service: { ...service.data },
+        contextMenu: buildContextMenuForService({
+          id: service.data.id,
+          version: service.data.version,
+          specifications: service.data.specifications as { type: string; path: string }[],
+          repository: service.data.repository as { url: string },
+        }),
+      },
       position: { x: 0, y: 0 },
       type: service?.collection,
     });
@@ -137,8 +177,8 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
           // type: 'animatedData',
           markerStart: {
             type: MarkerType.ArrowClosed,
-            width: 40,
-            height: 40,
+            width: 20,
+            height: 20,
           },
           markerEnd: undefined,
         })
@@ -152,7 +192,16 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
       id: generateIdForNode(dataProduct),
       sourcePosition: 'left',
       targetPosition: 'right',
-      data: { title: dataProduct?.data.id, mode, dataProduct: { ...dataProduct.data } },
+      data: {
+        title: dataProduct?.data.id,
+        mode,
+        dataProduct: { ...dataProduct.data },
+        contextMenu: buildContextMenuForResource({
+          collection: 'data-products',
+          id: dataProduct.data.id,
+          version: dataProduct.data.version,
+        }),
+      },
       position: { x: 0, y: 0 },
       type: 'data-products',
     });
@@ -168,8 +217,8 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
           type: 'multiline',
           markerStart: {
             type: MarkerType.ArrowClosed,
-            width: 40,
-            height: 40,
+            width: 20,
+            height: 20,
           },
           markerEnd: undefined,
         })
@@ -189,13 +238,13 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
           type: 'multiline',
           markerStart: {
             type: MarkerType.ArrowClosed,
-            width: 40,
-            height: 40,
+            width: 20,
+            height: 20,
           },
           markerEnd: {
             type: MarkerType.ArrowClosed,
-            width: 40,
-            height: 40,
+            width: 20,
+            height: 20,
           },
         })
       );
@@ -214,13 +263,13 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
           type: 'multiline',
           markerStart: {
             type: MarkerType.ArrowClosed,
-            width: 40,
-            height: 40,
+            width: 20,
+            height: 20,
           },
           markerEnd: {
             type: MarkerType.ArrowClosed,
-            width: 40,
-            height: 40,
+            width: 20,
+            height: 20,
           },
         })
       );

package/eventcatalog/src/utils/node-graphs/data-products-node-graph.ts

@@ -7,6 +7,7 @@ import {
   calculatedNodes,
   createEdge,
   getColorFromString,
+  buildContextMenuForResource,
 } from '@utils/node-graphs/utils/utils';
 
 import { findInMap, createVersionedMap, mergeMaps, collectionToResourceMap } from '@utils/collections/util';
@@ -135,8 +136,8 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
         markerEnd: {
           type: MarkerType.ArrowClosed,
           color: '#666',
-          width: 40,
-          height: 40,
+          width: 20,
+          height: 20,
         },
       })
     );
@@ -147,7 +148,15 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
     id: generateIdForNode(dataProduct),
     sourcePosition: 'right',
     targetPosition: 'left',
-    data: { mode, dataProduct: { ...dataProduct.data } },
+    data: {
+      mode,
+      dataProduct: { ...dataProduct.data },
+      contextMenu: buildContextMenuForResource({
+        collection: 'data-products',
+        id: dataProduct.data.id,
+        version: dataProduct.data.version,
+      }),
+    },
     type: 'data-products',
   });
 
@@ -191,8 +200,8 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
         markerEnd: {
           type: MarkerType.ArrowClosed,
           color: '#666',
-          width: 40,
-          height: 40,
+          width: 20,
+          height: 20,
         },
       })
     );