@eventcatalog/core 5.0.0-beta.3 → 5.0.0-beta.30

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

@@ -1,7 +1,14 @@
 import { hideMessageNodes, layoutWithElk } from '@eventcatalog/visualiser/layout';
+import { isSSR } from '@utils/feature';
 
 type Graph = { nodes: any[]; edges: any[] };
 
+// A build renders one route at a time (every message's docs page, then every schema page), so the
+// cache has to outlast a whole route to be reused. A server keeps running as the catalog changes and
+// renders pages as they're asked for, so it keeps the most recent layouts only.
+const MAX_CACHED_LAYOUTS = isSSR() ? 200 : 5000;
+const layouts = new Map<string, ReturnType<typeof layoutWithElk>>();
+
 /**
  * Lays a node graph out for the visualiser (with ELK, left to right). Builders
  * create their nodes and edges without positions and lay the finished graph
@@ -9,7 +16,19 @@ type Graph = { nodes: any[]; edges: any[] };
  * (nodes with children) are sized to fit them, and edges get the route they're
  * drawn along (`data.route`), with room for their labels.
  */
-export const layoutNodeGraph = async <G extends Graph>(graph: G): Promise<G> => (await layoutWithElk(graph)) as unknown as G;
+export const layoutNodeGraph = async <G extends Graph>(graph: G): Promise<G> => {
+  // A build lays the same graph out on several pages (a message's docs, visualiser and schema pages):
+  // reuse the layout. Each caller gets its own copy, so it can't change the one kept.
+  const key = JSON.stringify(graph);
+  let layout = layouts.get(key);
+  if (!layout) {
+    layout = layoutWithElk(graph);
+    layouts.set(key, layout);
+    layout.catch(() => layouts.delete(key));
+    if (layouts.size > MAX_CACHED_LAYOUTS) layouts.delete(layouts.keys().next().value!);
+  }
+  return structuredClone(await layout) as unknown as G;
+};
 
 /**
  * Lays out the graphs of a levels page: level 1 (`overview`: domains, systems

package/eventcatalog/src/utils/node-graphs/node-resource.ts

@@ -0,0 +1,67 @@
+/**
+ * The catalog resource a diagram node shows, for the node types the node graphs build. Has no imports so it can
+ * be shared by the server and the browser (the visualiser's "Open in Studio", the MCP App views).
+ */
+
+// The collection each node type shows a resource of
+const NODE_COLLECTIONS: Record<string, string> = {
+  service: 'services',
+  services: 'services',
+  agent: 'agents',
+  agents: 'agents',
+  event: 'events',
+  events: 'events',
+  command: 'commands',
+  commands: 'commands',
+  query: 'queries',
+  queries: 'queries',
+  channel: 'channels',
+  channels: 'channels',
+  flow: 'flows',
+  flows: 'flows',
+  data: 'containers',
+  containers: 'containers',
+  'data-products': 'data-products',
+  domain: 'domains',
+  domains: 'domains',
+  'context-domain': 'domains',
+  'domain-group': 'domains',
+  system: 'systems',
+  systems: 'systems',
+  'system-group': 'systems',
+};
+
+// Where each node type keeps the resource it shows
+const RESOURCE_DATA_KEYS = [
+  'service',
+  'agent',
+  'message',
+  'channel',
+  'data',
+  'dataProduct',
+  'flow',
+  'entity',
+  'domain',
+  'system',
+  'custom',
+];
+
+type DiagramNode = { type?: string; data?: Record<string, unknown> };
+type ResourceDetails = { id?: unknown; version?: unknown; [key: string]: unknown };
+
+/** The resource a node shows, as in its data: the fields shown, or the catalog entry's data (if it holds the entry) */
+export const getNodeResourceDetails = (node: DiagramNode): ResourceDetails | undefined => {
+  const data = node.data ?? {};
+  const resource = RESOURCE_DATA_KEYS.map((key) => data[key]).find(Boolean) as
+    | (ResourceDetails & { data?: ResourceDetails })
+    | undefined;
+  return resource?.data ?? resource;
+};
+
+/** The catalog resource a node shows (its collection, id and version), if it shows one */
+export const getNodeCatalogResource = (node: DiagramNode): { collection: string; id: string; version?: string } | undefined => {
+  const collection = NODE_COLLECTIONS[node.type ?? ''];
+  const details = getNodeResourceDetails(node);
+  if (!collection || typeof details?.id !== 'string') return undefined;
+  return { collection, id: details.id, ...(typeof details.version === 'string' && { version: details.version }) };
+};

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

@@ -142,7 +142,7 @@ const wrapNodesInSystemGroup = (systemNodes: any[], system: any) => {
     draggable: false,
     selectable: false,
     data: {
-      system: { name: system.data.name, version: system.data.version },
+      system: { id: system.data.id, name: system.data.name, version: system.data.version },
       // The system is the resource being viewed on its own diagram
       isFocused: true,
     },

package/eventcatalog/src/utils/page-loaders/hybrid-page.ts

@@ -24,7 +24,9 @@ export class HybridPage<T = any> {
   }
 
   /**
-   * Static method for getting data
+   * The page's data: its props in a static build, or looked up from its URL on a server. Undefined
+   * when nothing matches (an unknown resource or version): the page then returns
+   * `Astro.rewrite('/404')`. Throwing a Response instead made Astro answer with an empty 500.
    */
   static async getData(astro: AstroGlobal): Promise<any> {
     // Try props first (static mode)
@@ -32,13 +34,7 @@ export class HybridPage<T = any> {
       return this.transformProps(astro.props);
     }
 
-    const data = await this.fetchData(astro.params);
-
-    if (!data) {
-      throw this.createNotFoundResponse();
-    }
-
-    return data;
+    return (await this.fetchData(astro.params)) ?? undefined;
   }
 
   /**
@@ -58,11 +54,4 @@ export class HybridPage<T = any> {
   protected static transformProps(props: any): any {
     return props;
   }
-
-  protected static createNotFoundResponse(): Response {
-    return new Response(null, {
-      status: 404,
-      statusText: 'Not found',
-    });
-  }
 }

package/eventcatalog/src/utils/page-title.ts

@@ -0,0 +1,15 @@
+import config from '@config';
+
+/** The catalog's name: `title` in eventcatalog.config.js, or EventCatalog when it has none */
+export const getCatalogTitle = (): string => config?.title?.trim() || 'EventCatalog';
+
+/**
+ * A page's title, as browser tabs and link previews show it: the page's own title, then the
+ * catalog's (`Domains | Ordering | Acme Inc`), so tabs show the page first. A page without a title
+ * of its own (the homepage) is just the catalog's.
+ */
+export const formatPageTitle = (title?: string): string => {
+  const catalogTitle = getCatalogTitle();
+  const pageTitle = title?.trim();
+  return pageTitle && pageTitle !== catalogTitle ? `${pageTitle} | ${catalogTitle}` : catalogTitle;
+};

package/eventcatalog/src/utils/syntax-highlighter-renderer.ts

@@ -0,0 +1,64 @@
+import { createElement, type CSSProperties, type ReactNode } from 'react';
+import { createStyleObject } from 'react-syntax-highlighter/dist/cjs/create-element.js';
+
+type Stylesheet = { [selector: string]: CSSProperties };
+type HighlightedNode = {
+  type: 'element' | 'text';
+  value?: string | number;
+  tagName?: any;
+  properties?: { className?: string[]; style?: CSSProperties; [key: string]: unknown };
+  children?: HighlightedNode[];
+};
+
+const selectorsByStylesheet = new WeakMap<Stylesheet, Set<string>>();
+
+/** The class names a theme styles, worked out once per theme */
+const stylesheetSelectors = (stylesheet: Stylesheet) => {
+  let selectors = selectorsByStylesheet.get(stylesheet);
+  if (!selectors) {
+    selectors = new Set(Object.keys(stylesheet).flatMap((selector) => selector.split('.')));
+    selectorsByStylesheet.set(stylesheet, selectors);
+  }
+  return selectors;
+};
+
+const renderNode = (node: HighlightedNode, stylesheet: Stylesheet, useInlineStyles: boolean, key: string): ReactNode => {
+  if (node.type === 'text') return node.value;
+  if (!node.tagName) return undefined;
+
+  const properties = node.properties ?? {};
+  const classNames = properties.className;
+  let props;
+  if (!useInlineStyles) {
+    props = { ...properties, className: classNames?.join(' ') };
+  } else {
+    // Theme classes become inline styles; any other class names stay
+    const selectors = stylesheetSelectors(stylesheet);
+    const className =
+      classNames && (classNames.includes('token') ? ['token'] : []).concat(classNames.filter((name) => !selectors.has(name)));
+    props = {
+      ...properties,
+      className: className?.join(' ') || undefined,
+      style: createStyleObject(classNames ?? [], { ...properties.style }, stylesheet),
+    };
+  }
+
+  const children = (node.children ?? []).map((child, i) => renderNode(child, stylesheet, useInlineStyles, `code-segment-1-${i}`));
+  return createElement(node.tagName, { key, ...props }, children);
+};
+
+/**
+ * Renders react-syntax-highlighter's rows as its default renderer does (same elements, styles and keys), but
+ * works out the theme's class names once per theme rather than for every token: the default renderer did
+ * that for every token, which made highlighting a schema on the server take tens of milliseconds a page.
+ * Set `wrapLines`: with a custom renderer, react-syntax-highlighter turns it on when it isn't set.
+ */
+export const renderHighlightedRows = ({
+  rows,
+  stylesheet,
+  useInlineStyles,
+}: {
+  rows: HighlightedNode[];
+  stylesheet: Stylesheet;
+  useInlineStyles: boolean;
+}): ReactNode[] => rows.map((node, i) => renderNode(node, stylesheet, useInlineStyles, `code-segment-${i}`));

package/eventcatalog/src/utils/trial.ts

@@ -1,10 +1,23 @@
-export const TRIAL_LENGTH_DAYS = 90;
+export const TRIAL_LENGTH_DAYS = 60;
 
 export const LICENSE_FAQ_URL = 'https://www.eventcatalog.dev/license-faq';
 
 // Where a commercial license is renewed
 export const LICENSE_RENEW_URL = 'https://eventcatalog.cloud';
 
+// Where the Business plan is bought: the order form on the website
+export const BUY_BUSINESS_URL = 'https://www.eventcatalog.dev/buy?source=cli';
+
+// Prices for a commercial license, linked while the trial is running
+export const PRICING_URL = 'https://www.eventcatalog.dev/pricing';
+
+// Questions about licensing or buying: talk to the EventCatalog team
+export const TALK_TO_US_URL = 'https://www.eventcatalog.dev/book-demo';
+
+// Shown with the trial, so organisations that qualify for Free Use don't read it as "EventCatalog is now paid"
+export const FREE_USE_NOTE =
+  'Under $10M revenue and $10M raised, an individual or an open-source project? You qualify for Free Use; get a free key at eventcatalog.cloud.';
+
 const DAY_IN_MS = 24 * 60 * 60 * 1000;
 
 export type TrialStatus = {

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "BUSL-1.1",
   "type": "module",
-  "version": "5.0.0-beta.3",
+  "version": "5.0.0-beta.30",
   "publishConfig": {
     "access": "public"
   },
@@ -47,10 +47,10 @@
   ],
   "dependencies": {
     "@ai-sdk/react": "^4.0.109",
-    "@astrojs/markdown-remark": "^7.3.1",
-    "@astrojs/mdx": "^8.0.1",
-    "@astrojs/node": "^11.1.6",
-    "@astrojs/react": "^6.0.6",
+    "@astrojs/markdown-remark": "^7.3.2",
+    "@astrojs/mdx": "^8.0.3",
+    "@astrojs/node": "^11.1.7",
+    "@astrojs/react": "^7.0.1",
     "@astrojs/rss": "^4.0.19",
     "@asyncapi/avro-schema-parser": "3.0.24",
     "@asyncapi/parser": "^3.6.0",
@@ -60,7 +60,11 @@
     "@fontsource/inter": "^5.2.5",
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
+    "@hocuspocus/provider": "^4.7.0",
+    "@hocuspocus/server": "^4.7.0",
     "@iconify-json/logos": "^1.2.4",
+    "@mcp-b/webmcp-local-relay": "5.1.0",
+    "@mcp-b/webmcp-polyfill": "5.1.0",
     "@mermaid-js/layout-elk": "^0.2.0",
     "@modelcontextprotocol/ext-apps": "^1.7.5",
     "@modelcontextprotocol/sdk": "^1.30.0",
@@ -77,9 +81,9 @@
     "@tanstack/react-table": "^8.17.3",
     "@xyflow/react": "^12.12.0",
     "ai": "^7.0.106",
-    "astro": "7.3.3",
+    "astro": "7.3.8",
     "astro-expressive-code": "^0.44.0",
-    "astro-seo": "^0.8.4",
+    "astro-seo": "^1.2.0",
     "boxen": "^8.0.1",
     "commander": "^12.1.0",
     "cross-env": "^7.0.3",
@@ -93,8 +97,9 @@
     "elkjs": "^0.10.0",
     "glob": "^13.0.6",
     "gray-matter": "^4.0.3",
-    "hono": "4.13.5",
+    "hono": "^4.13.7",
     "html-to-image": "^1.11.11",
+    "htmlparser2": "^12.0.0",
     "js-yaml": "^4.3.2",
     "jsonpath-plus": "^10.4.0",
     "jsonwebtoken": "^9.0.2",
@@ -113,6 +118,7 @@
     "picomatch": "^4.0.4",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-hotkeys-hook": "^5.3.3",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.1",
     "recast": "^0.23.11",
@@ -125,7 +131,6 @@
     "rimraf": "^6.1.3",
     "semver": "7.6.3",
     "set-cookie-parser": "^2.7.1",
-    "shelljs": "^0.9.0",
     "sonner": "^2.0.7",
     "sql.js": "^1.12.0",
     "tailwindcss": "^4.3.1",
@@ -133,10 +138,12 @@
     "unist-util-visit": "^5.0.0",
     "update-notifier": "^7.3.1",
     "uuid": "^11.1.1",
+    "y-protocols": "^1.0.7",
+    "yjs": "^13.6.33",
     "zod": "^4.3.6",
-    "@eventcatalog/linter": "1.2.0-beta.0",
-    "@eventcatalog/sdk": "2.30.0-beta.0",
-    "@eventcatalog/visualiser": "^5.0.0-beta.2"
+    "@eventcatalog/linter": "1.2.0-beta.4",
+    "@eventcatalog/sdk": "2.30.0-beta.1",
+    "@eventcatalog/visualiser": "^5.0.0-beta.7"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.10",
@@ -156,7 +163,6 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/semver": "^7.5.8",
     "@types/set-cookie-parser": "^2.4.10",
-    "@types/shelljs": "^0.8.15",
     "@types/update-notifier": "^6.0.8",
     "@types/uuid": "^10.0.0",
     "jsdom": "27.0.0",

package/dist/runtime-dependencies/shelljs.mjs

@@ -1,3 +0,0 @@
-export * from "shelljs";
-import * as dependency from "shelljs";
-export default dependency.default;

package/eventcatalog/src/components/Studio/StudioPageModal.tsx

@@ -1,150 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
-import { ExternalLinkIcon, CheckIcon, ClipboardIcon, Loader2 } from 'lucide-react';
-
-const StudioPageModal: React.FC = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [copySuccess, setCopySuccess] = useState(false);
-  const [hasCopied, setHasCopied] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const handleOpen = () => setIsOpen(true);
-    window.addEventListener('openStudioModal', handleOpen);
-    return () => window.removeEventListener('openStudioModal', handleOpen);
-  }, []);
-
-  const handleCopyResources = async () => {
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const response = await fetch('/api/catalog');
-
-      if (!response.ok) {
-        throw new Error('Failed to fetch catalog data');
-      }
-
-      const catalogData = await response.json();
-
-      await navigator.clipboard.writeText(JSON.stringify(catalogData, null, 2));
-      setCopySuccess(true);
-      setHasCopied(true);
-      setTimeout(() => setCopySuccess(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy resources:', err);
-      setError('Failed to copy resources. Please try again.');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleOpenStudio = () => {
-    window.open(
-      'https://app.eventcatalog.studio/playground?import-resources=true&utm_source=eventcatalog&utm_medium=referral&utm_campaign=studio-page',
-      '_blank'
-    );
-    setIsOpen(false);
-  };
-
-  return (
-    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
-      <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" />
-        <Dialog.Content className="fixed top-1/2 left-1/2 w-[90vw] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-xl focus:outline-hidden data-[state=open]:animate-contentShow z-[100]">
-          <Dialog.Title className="text-lg font-semibold text-gray-900 mb-3">Open EventCatalog Studio</Dialog.Title>
-
-          <Dialog.Description className="text-sm text-gray-600 mb-6">
-            Import your catalog resources into{' '}
-            <a
-              href="https://eventcatalog.studio"
-              className="text-gray-900 hover:text-gray-700 underline font-semibold"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              EventCatalog Studio
-            </a>{' '}
-            to create architecture diagrams.
-          </Dialog.Description>
-
-          <div className="space-y-4">
-            {/* Step 1: Copy Resources */}
-            <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
-              <h4 className="text-sm font-bold text-gray-900 mb-2">Step 1: Copy your resources</h4>
-              <p className="text-xs text-gray-600 mb-3">Copy your EventCatalog resources to your clipboard.</p>
-
-              <button
-                onClick={handleCopyResources}
-                disabled={isLoading}
-                className={`w-full flex items-center justify-center space-x-2 px-4 py-2 text-sm font-medium rounded-md border transition-colors ${
-                  copySuccess
-                    ? 'bg-green-50 border-green-200 text-green-700'
-                    : isLoading
-                      ? 'bg-gray-100 border-gray-300 text-gray-400 cursor-not-allowed'
-                      : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'
-                }`}
-              >
-                {isLoading ? (
-                  <>
-                    <Loader2 className="w-4 h-4 animate-spin" />
-                    <span>Loading resources...</span>
-                  </>
-                ) : copySuccess ? (
-                  <>
-                    <CheckIcon className="w-4 h-4" />
-                    <span>Copied!</span>
-                  </>
-                ) : (
-                  <>
-                    <ClipboardIcon className="w-4 h-4" />
-                    <span>Copy resources to clipboard</span>
-                  </>
-                )}
-              </button>
-
-              {error && <p className="text-xs text-red-600 mt-2">{error}</p>}
-            </div>
-
-            {/* Step 2: Open Studio */}
-            <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
-              <h4 className="text-sm font-bold text-gray-900 mb-2">Step 2: Open EventCatalog Studio</h4>
-              <p className="text-xs text-gray-600 mb-3">
-                Go to EventCatalog Studio and paste your resources into the modal dialog.
-              </p>
-
-              <button
-                onClick={handleOpenStudio}
-                disabled={!hasCopied}
-                className={`w-full flex items-center justify-center space-x-2 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
-                  hasCopied ? 'bg-gray-900 text-white hover:bg-gray-800' : 'bg-gray-300 text-gray-500 cursor-not-allowed'
-                }`}
-              >
-                <ExternalLinkIcon className="w-4 h-4" />
-                <span>Open EventCatalog Studio</span>
-              </button>
-
-              <p className="text-[12px] text-gray-500 italic mt-4 mb-0">
-                All data is stored locally in your browser. Nothing is sent to external servers.
-              </p>
-            </div>
-          </div>
-
-          <div className="mt-6 flex justify-end">
-            <Dialog.Close asChild>
-              <button
-                type="button"
-                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
-                onClick={() => setIsOpen(false)}
-              >
-                Close
-              </button>
-            </Dialog.Close>
-          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};
-
-export default StudioPageModal;