@eventcatalog/core 5.0.0-beta.10 → 5.0.0-beta.12

package/README.md

@@ -1,7 +1,7 @@
 <div align="center">
 
 <!-- <h1>📖 EventCatalog</h1> -->
-<!-- <h3>The open source tool to help you discover and document your event-driven architectures</h3> -->
+<!-- <h3>The source-available tool to help you discover and document your event-driven architectures</h3> -->
 
 
 
@@ -35,7 +35,7 @@
 <div align="center">
 
 [![main](https://github.com/event-catalog/eventcatalog/actions/workflows/verify-build.yml/badge.svg)](https://github.com/event-catalog/eventcatalog/actions/workflows/verify-build.yml)
-[![License](https://img.shields.io/badge/License-MIT%20%2B%20Commercial-blue.svg)](./LICENSE)
+[![License: BSL 1.1](https://img.shields.io/badge/License-BSL%201.1-blue.svg)](https://github.com/event-catalog/eventcatalog/blob/main/LICENSE)
 [![npm version](https://badge.fury.io/js/@eventcatalog%2Fcore.svg)](https://badge.fury.io/js/@eventcatalog/core)
 
 </div>
@@ -205,6 +205,6 @@ This project follows the [all-contributors](https://github.com/all-contributors/
 
 # License
 
-`@eventcatalog/core` 5.0.0 (including its pre-releases) and later is licensed under the
-[Business Source License 1.1](./LICENSE). Releases up to and including 4.x remain available under the MIT
-License (see [NOTICE](./NOTICE)).
+EventCatalog is source-available under the [Business Source License 1.1](https://github.com/event-catalog/eventcatalog/blob/main/LICENSE). It is free for eligible organisations (under USD 10M revenue and under USD 10M funding). Otherwise it is covered by a subscription. See [pricing](https://www.eventcatalog.dev/pricing).
+
+`@eventcatalog/core` version 5.0.0 (including its pre-releases) and later is covered by that licence. Releases up to and including 4.x remain available under the MIT License (see [NOTICE](./NOTICE)).

package/dist/analytics/analytics.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(analytics_exports);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "5.0.0-beta.10";
+var version = "5.0.0-beta.12";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,8 +1,8 @@
 import {
   raiseEvent
-} from "../chunk-LJMXOEEC.js";
+} from "../chunk-CX2VB7AI.js";
 import "../chunk-CPW6G62V.js";
-import "../chunk-IONYKKOY.js";
+import "../chunk-FY6MSP6J.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -176,7 +176,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "5.0.0-beta.10";
+var version = "5.0.0-beta.12";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,11 +1,11 @@
 import {
   log_build_default
-} from "../chunk-CRKJBDN7.js";
+} from "../chunk-BWC4YKW3.js";
 import "../chunk-AWOO63ME.js";
 import "../chunk-ZAZHAVKB.js";
-import "../chunk-LJMXOEEC.js";
+import "../chunk-CX2VB7AI.js";
 import "../chunk-CPW6G62V.js";
-import "../chunk-IONYKKOY.js";
+import "../chunk-FY6MSP6J.js";
 import "../chunk-RFIXKATC.js";
 export {
   log_build_default as default

package/dist/{chunk-CRKJBDN7.js → chunk-BWC4YKW3.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-ZAZHAVKB.js";
 import {
   raiseEvent
-} from "./chunk-LJMXOEEC.js";
+} from "./chunk-CX2VB7AI.js";
 import {
   TELEMETRY_REQUEST_TIMEOUT_MS,
   isTelemetryDisabled

package/dist/{chunk-LJMXOEEC.js → chunk-CX2VB7AI.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-CPW6G62V.js";
 import {
   VERSION
-} from "./chunk-IONYKKOY.js";
+} from "./chunk-FY6MSP6J.js";
 
 // src/analytics/analytics.js
 import os from "os";

package/dist/{chunk-IONYKKOY.js → chunk-FY6MSP6J.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "5.0.0-beta.10";
+var version = "5.0.0-beta.12";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-2LBDRHE4.js → chunk-QB7X34OD.js}

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

package/dist/{chunk-EM36OL6A.js → chunk-TSY5CC27.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-2LBDRHE4.js";
+} from "./chunk-QB7X34OD.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/constants.cjs

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-IONYKKOY.js";
+} from "./chunk-FY6MSP6J.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -181,7 +181,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "5.0.0-beta.10";
+var version = "5.0.0-beta.12";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -4,7 +4,7 @@ import {
 import "./chunk-CA4U2JP7.js";
 import {
   log_build_default
-} from "./chunk-CRKJBDN7.js";
+} from "./chunk-BWC4YKW3.js";
 import {
   getLicenseStatus,
   printLicenseStatus
@@ -33,10 +33,10 @@ import {
 } from "./chunk-MDWB5HLO.js";
 import {
   generate
-} from "./chunk-EM36OL6A.js";
+} from "./chunk-TSY5CC27.js";
 import {
   logger
-} from "./chunk-2LBDRHE4.js";
+} from "./chunk-QB7X34OD.js";
 import {
   resolve_catalog_dependencies_default
 } from "./chunk-36RYTYT5.js";
@@ -50,7 +50,7 @@ import {
 import {
   watch
 } from "./chunk-U63GDPPY.js";
-import "./chunk-LJMXOEEC.js";
+import "./chunk-CX2VB7AI.js";
 import "./chunk-CPW6G62V.js";
 import {
   getAstroConfigPath
@@ -67,7 +67,7 @@ import {
 } from "./chunk-LFQJXLHG.js";
 import {
   VERSION
-} from "./chunk-IONYKKOY.js";
+} from "./chunk-FY6MSP6J.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/generate.cjs

@@ -112,7 +112,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "5.0.0-beta.10";
+var version = "5.0.0-beta.12";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-EM36OL6A.js";
-import "./chunk-2LBDRHE4.js";
-import "./chunk-IONYKKOY.js";
+} from "./chunk-TSY5CC27.js";
+import "./chunk-QB7X34OD.js";
+import "./chunk-FY6MSP6J.js";
 import "./chunk-RFIXKATC.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 = "5.0.0-beta.10";
+var version = "5.0.0-beta.12";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-2LBDRHE4.js";
-import "../chunk-IONYKKOY.js";
+} from "../chunk-QB7X34OD.js";
+import "../chunk-FY6MSP6J.js";
 export {
   logger
 };

package/eventcatalog/src/components/ChatPanel/ChatPanel.tsx

@@ -29,6 +29,8 @@ const CHAT_PANEL_STYLES = `
   }
   .ec-chat-surface { font-weight: 400; }
   .ec-chat-avatar { background: rgb(var(--ec-accent) / .06); animation: ec-chat-breathe 5s ease-in-out infinite; }
+  /* The closed panel stays on the page (off screen): a running animation there still costs every frame */
+  .ec-chat-surface[aria-hidden='true'] .ec-chat-avatar { animation-play-state: paused; }
   .ec-chat-suggestion { width: fit-content; max-width: 100%; transition: background 180ms, transform 180ms; }
   .ec-chat-suggestion:hover { transform: translateX(3px); }
   .ec-chat-message { animation: fadeInUp 280ms ease-out both; }

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

@@ -12,10 +12,14 @@
  * CSS ships in the page head and survives ClientRouter navigations (see NodeGraph.astro).
  */
 
-import { useCallback, lazy, Suspense } from 'react';
+import { useCallback, useState, lazy, Suspense } from 'react';
 import type { Node, Edge } from '@xyflow/react';
-import type { FlowGroupBy } from '@eventcatalog/visualiser';
+import type { FlowGroupBy, OpenInStudioRequest } from '@eventcatalog/visualiser';
 import { buildUrl } from '@utils/url-builder';
+import { createCanvasThroughApi } from '@features/studio/api/client';
+import { canvasFromVisualiser } from '@features/studio/from-visualiser';
+import { getStoredName } from '@features/studio/identity';
+import OpenInStudioDialog from '@features/studio/components/OpenInStudioDialog';
 
 const NodeGraph = lazy(() =>
   import('@eventcatalog/visualiser').then((module) => ({ default: module.NodeGraph }))
@@ -57,9 +61,11 @@ interface AstroNodeGraphProps {
   preferenceScope?: string;
   // Group a flow's steps into swimlanes to start with
   swimlanes?: FlowGroupBy;
+  // The Studio API's address, when Studio is on: the menu can then start a canvas from the diagram
+  studioApiUrl?: string;
 }
 
-const AstroNodeGraph = ({ isDevMode = false, resourceKey, ...otherProps }: AstroNodeGraphProps) => {
+const AstroNodeGraph = ({ isDevMode = false, resourceKey, studioApiUrl, ...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
@@ -108,6 +114,29 @@ const AstroNodeGraph = ({ isDevMode = false, resourceKey, ...otherProps }: Astro
     }
   }, []);
 
+  // Opening the diagram in Studio: asks what to call the canvas, then makes it with what the diagram shows and opens
+  // it (in this tab) at the level shown. What it shows is only taken once it's named (laying a level out can take a
+  // moment), and anything that goes wrong is shown in the dialog.
+  const [toOpen, setToOpen] = useState<OpenInStudioRequest | null>(null);
+  const closeOpenInStudio = useCallback(() => setToOpen(null), []);
+  const openInStudio = useCallback(
+    async (title: string | undefined) => {
+      if (!studioApiUrl || !toOpen) return;
+      const snapshot = await toOpen.getSnapshot();
+      const { nodes, edges, levels } = canvasFromVisualiser(snapshot);
+      if (nodes.length === 0) throw new Error('Nothing on this diagram can go on a canvas yet');
+      const canvas = await createCanvasThroughApi(studioApiUrl, {
+        title,
+        createdBy: getStoredName() ?? undefined,
+        nodes,
+        edges,
+        levels,
+      });
+      window.location.assign(snapshot.level === 3 ? canvas.url : `${canvas.url}?level=${snapshot.level}`);
+    },
+    [studioApiUrl, toOpen]
+  );
+
   return (
     <Suspense fallback={<div>Loading graph...</div>}>
       <NodeGraph
@@ -118,7 +147,9 @@ const AstroNodeGraph = ({ isDevMode = false, resourceKey, ...otherProps }: Astro
         onBuildUrl={handleBuildUrl}
         onSaveLayout={handleSaveLayout}
         onResetLayout={handleResetLayout}
+        onOpenInStudio={studioApiUrl ? setToOpen : undefined}
       />
+      {toOpen && <OpenInStudioDialog title={toOpen.title} onOpen={openInStudio} onClose={closeOpenInStudio} />}
     </Suspense>
   );
 };

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

@@ -31,11 +31,14 @@ import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
 import { getNodesAndEdges as getNodesAndEdgesForContainer } from '@utils/node-graphs/container-node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForChannel } from '@utils/node-graphs/channel-node-graph';
 import config from '@config';
-import { isEventCatalogChatVisible, isDevMode } from '@utils/feature';
+import { isEventCatalogChatVisible, isDevMode, isCanvasEnabled } from '@utils/feature';
+import { CANVASES_API_PATH } from '@features/studio/api/canvases-api';
 import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
 import { compactVisualiserGraph } from '@utils/node-graphs/compact-visualiser-graph';
 
 const isChatEnabled = isEventCatalogChatVisible();
+// With Studio on, the menu can start a canvas from the diagram
+const studioApiUrl = isCanvasEnabled() ? buildUrl(CANVASES_API_PATH, true) : undefined;
 
 interface Props {
   id: string;
@@ -257,6 +260,7 @@ if (overview && levelsOverview) {
     hiddenMessagesGraph={hiddenMessagesGraph}
     preferenceScope={collection}
     swimlanes={lanes}
+    studioApiUrl={studioApiUrl}
   />
 </div>
 

package/eventcatalog/src/components/NavigationProgress.astro

@@ -22,12 +22,19 @@
     opacity: 1;
   }
 
+  /* On every page, hidden until a navigation takes a while: paused until then (a running animation costs a style
+     recalc and paint on every frame, even when it can't be seen) */
   .navigation-progress__bar {
     width: 35%;
     height: 100%;
     background: rgb(var(--ec-accent));
     box-shadow: 0 0 10px rgb(var(--ec-accent) / 0.55);
     animation: navigation-progress 1.1s ease-in-out infinite;
+    animation-play-state: paused;
+  }
+
+  #navigation-progress[data-visible='true'] .navigation-progress__bar {
+    animation-play-state: running;
   }
 
   :global([data-navigation-pending='true']) {

package/eventcatalog/src/features/mcp/apps/architecture-diagram/node-chat.tsx

@@ -6,7 +6,8 @@
 import { useEffect, useRef, useState, type FormEvent, type KeyboardEvent, type RefObject } from 'react';
 import type { Node } from '@xyflow/react';
 import { Check, Network, SendHorizontal, X } from 'lucide-react';
-import type { ArchitectureDiagramCollection } from '@utils/node-graphs/architecture-diagram-types';
+import { isArchitectureDiagramCollection } from '@utils/node-graphs/architecture-diagram-types';
+import { getNodeCatalogResource, getNodeResourceDetails } from '@utils/node-graphs/node-resource';
 import type { DiagramLink } from './links';
 import { RESOURCE_TYPE_LABELS } from '../shared/resource-types';
 
@@ -36,53 +37,13 @@ const NODE_TYPE_LABELS: Record<string, string> = {
   externalSystem: 'External system',
 };
 
-// Where each node type keeps the resource it shows
-const RESOURCE_DATA_KEYS = [
-  'service',
-  'agent',
-  'message',
-  'channel',
-  'data',
-  'dataProduct',
-  'flow',
-  'entity',
-  'domain',
-  'system',
-  'custom',
-];
-
-// The collection of each node type the architecture diagram tool can draw a diagram for
-const DIAGRAM_COLLECTIONS: Record<string, ArchitectureDiagramCollection> = {
-  services: 'services',
-  agents: 'agents',
-  events: 'events',
-  commands: 'commands',
-  queries: 'queries',
-  flows: 'flows',
-  data: 'containers',
-  containers: 'containers',
-  'data-products': 'data-products',
-  domains: 'domains',
-  'context-domain': 'domains',
-  'domain-group': 'domains',
-  systems: 'systems',
-  'system-group': 'systems',
-};
-
-// Domain and system boundaries only have their catalog id in the node id: {kind}-group-{id}-{version}
-const catalogIdOfGroup = (node: Node, version?: string) => {
-  const match = node.id.match(/^(?:domain|system)-group-(.+)$/);
-  if (!match) return undefined;
-  return version && match[1].endsWith(`-${version}`) ? match[1].slice(0, -(version.length + 1)) : match[1];
-};
-
 export function describeNode(node: Node): SelectedNode {
   const data = (node.data ?? {}) as Record<string, any>;
-  const resource = RESOURCE_DATA_KEYS.map((key) => data[key]).find(Boolean) ?? data;
-  const details = resource?.data ?? resource;
+  const details = (getNodeResourceDetails(node) ?? data) as Record<string, any>;
   const version: string | undefined = details?.version;
-  const id: string = details?.id ?? catalogIdOfGroup(node, version) ?? node.id;
-  const collection = DIAGRAM_COLLECTIONS[node.type ?? ''];
+  const id: string = details?.id ?? node.id;
+  const resource = getNodeCatalogResource(node);
+  const collection = resource && isArchitectureDiagramCollection(resource.collection) ? resource.collection : undefined;
 
   return {
     nodeId: node.id,