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

package/eventcatalog/src/pages/visualiser/[type]/[id]/_index.data.ts

@@ -0,0 +1,38 @@
+import type { PageTypes } from '@types';
+import { isVisualiserEnabled } from '@utils/feature';
+import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
+
+/** Resources with a visualiser page (domains and systems have their own, under the same URLs) */
+const VISUALISER_TYPES: PageTypes[] = [
+  'domains',
+  'systems',
+  'agents',
+  'services',
+  'events',
+  'commands',
+  'queries',
+  'flows',
+  'containers',
+  'channels',
+  'data-products',
+];
+
+const isVisualiserType = (type: string | undefined): type is PageTypes => VISUALISER_TYPES.includes(type as PageTypes);
+
+const getLatestWithVisualiser = async (type: PageTypes) =>
+  (await pageDataLoader[type]({ getAllVersions: false })).filter((item) => (item.data as any).visualiser !== false);
+
+/** The latest version of every resource with a visualiser page: the pages a static build redirects from */
+export const getVisualiserResources = async () => {
+  if (!isVisualiserEnabled()) return [];
+  const resources = await Promise.all(
+    VISUALISER_TYPES.map(async (type) => (await getLatestWithVisualiser(type)).map((item) => ({ type, item })))
+  );
+  return resources.flat();
+};
+
+/** The latest version of a resource with a visualiser page, looked up from its URL (a server renders pages on request) */
+export const findVisualiserResource = async (type: string | undefined, id: string | undefined) => {
+  if (!isVisualiserEnabled() || !isVisualiserType(type) || !id) return undefined;
+  return (await getLatestWithVisualiser(type)).find((item) => item.data.id === id);
+};

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

@@ -1,59 +1,36 @@
 ---
 import Seo from '@components/Seo.astro';
 import { buildUrl } from '@utils/url-builder';
-import { getEvents } from '@utils/collections/events';
-import { getCommands } from '@utils/collections/commands';
-import { getServices } from '@utils/collections/services';
-import { getDomains } from '@utils/collections/domains';
-import { getContainers } from '@utils/collections/containers';
-import type { CollectionEntry } from 'astro:content';
-import type { CollectionTypes } from '@types';
-import { isVisualiserEnabled } from '@utils/feature';
+import { isSSR } from '@utils/feature';
+import { findVisualiserResource, getVisualiserResources } from './_index.data';
 
-export async function getStaticPaths() {
-  if (!isVisualiserEnabled()) {
-    return [];
-  }
-
-  const [events, commands, services, domains, containers] = await Promise.all([
-    getEvents(),
-    getCommands(),
-    getServices(),
-    getDomains(),
-    getContainers(),
-  ]);
+export const prerender = !isSSR();
 
-  const resources = [...domains, ...events, ...services, ...commands, ...containers];
-  const resourcesWithVisualiserEnabled = resources.filter((resource) => resource.data.visualiser !== false);
+export async function getStaticPaths() {
+  const resources = await getVisualiserResources();
+  return resources.map(({ type, item }) => ({ params: { type, id: item.data.id }, props: item }));
+}
 
-  const buildPages = (collection: CollectionEntry<CollectionTypes>[]) => {
-    return collection.map((item) => ({
-      params: {
-        type: item.collection,
-        id: item.data.id,
-      },
-      props: {
-        type: item.collection,
-        ...item,
-      },
-    }));
-  };
+// A static build gets the resource from getStaticPaths; a server, which has no static paths, looks it up
+const resource = isSSR() ? await findVisualiserResource(Astro.params.type, Astro.params.id) : Astro.props;
 
-  return [...buildPages(resourcesWithVisualiserEnabled)];
+if (!resource?.data) {
+  return new Response(null, { status: 404, statusText: 'Not found' });
 }
 
-const props = Astro.props;
-const pageTitle = `${props.collection} | ${props.data.name}`.replace(/^\w/, (c) => c.toUpperCase());
-
-const { pathname } = Astro.url;
+const pageTitle = `${resource.collection} | ${resource.data.name}`.replace(/^\w/, (c) => c.toUpperCase());
+const redirectUrl = buildUrl(`${Astro.url.pathname.replace(/\/$/, '')}/${resource.data.latestVersion}`, false, true);
 
-const redirectUrl = buildUrl(pathname + '/' + props.data.latestVersion, false, true);
+// A server redirects straight away (with any query string); a static page redirects in the browser
+if (isSSR()) {
+  return Astro.redirect(`${redirectUrl}${Astro.url.search}`);
+}
 ---
 
 <!doctype html>
 <html lang="en">
   <head>
-    <Seo title={`EventCatalog | ${pageTitle}`} ogTitle={pageTitle} />
+    <Seo title={pageTitle} />
   </head>
   <body>
     <p>You are being redirected to <a href={redirectUrl}>{redirectUrl}</a></p>

package/eventcatalog/src/pages/visualiser/designs/[id]/_index.data.ts

@@ -45,13 +45,6 @@ export class Page extends HybridPage {
     };
   }
 
-  protected static createNotFoundResponse(): Response {
-    return new Response(null, {
-      status: 404,
-      statusText: 'Design not found',
-    });
-  }
-
   static get clientAuthScript(): string {
     if (!isAuthEnabled() || !isVisualiserEnabled()) {
       return '';

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

@@ -13,7 +13,8 @@ const isChatEnabled = isEventCatalogChatVisible();
 export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
-const props = Astro.props;
+const props = await Page.getData(Astro);
+if (!props) return Astro.rewrite('/404');
 
 const { data } = props;
 ---

package/eventcatalog/src/pages/visualiser/domains/[id]/[version]/entity-map/_index.data.ts

@@ -47,13 +47,6 @@ export class Page extends HybridPage {
     return item;
   }
 
-  protected static createNotFoundResponse(): Response {
-    return new Response(null, {
-      status: 404,
-      statusText: 'Domain entity map page not found',
-    });
-  }
-
   static get clientAuthScript(): string {
     if (!isAuthEnabled() || !isVisualiserEnabled()) {
       return '';

package/eventcatalog/src/pages/visualiser/domains/[id]/[version]/entity-map/index.astro

@@ -10,6 +10,7 @@ export const getStaticPaths = Page.getStaticPaths;
 
 // Get data
 const props = await Page.getData(Astro);
+if (!props) return Astro.rewrite('/404');
 
 const {
   data: { id },

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

@@ -11,6 +11,7 @@ export const getStaticPaths = Page.getStaticPaths;
 
 // Get data
 const props = await Page.getData(Astro);
+if (!props) return Astro.rewrite('/404');
 
 const {
   data: { id },

package/eventcatalog/src/pages/visualiser/domains/[id]/[version]/systems-context/_index.data.ts

@@ -58,13 +58,6 @@ export class Page extends HybridPage {
     return item;
   }
 
-  protected static createNotFoundResponse(): Response {
-    return new Response(null, {
-      status: 404,
-      statusText: 'Domain System Diagram page not found',
-    });
-  }
-
   static get clientAuthScript(): string {
     if (!isAuthEnabled() || !isVisualiserEnabled()) {
       return '';

package/eventcatalog/src/pages/visualiser/domains/[id]/[version]/systems-context/index.astro

@@ -8,6 +8,7 @@ export const getStaticPaths = Page.getStaticPaths;
 
 // Get data
 const props = await Page.getData(Astro);
+if (!props) return Astro.rewrite('/404');
 
 // The System Diagram is now level 1 of the domain's visualiser page
 return Astro.redirect(buildUrl(`/visualiser/domains/${props.data.id}/${props.data.version}?level=1`));

package/eventcatalog/src/pages/visualiser/systems/[id]/[version]/context/_index.data.ts

@@ -61,13 +61,6 @@ export class Page extends HybridPage {
     return item;
   }
 
-  protected static createNotFoundResponse(): Response {
-    return new Response(null, {
-      status: 404,
-      statusText: 'System Diagram page not found',
-    });
-  }
-
   static get clientAuthScript(): string {
     if (!isAuthEnabled() || !isVisualiserEnabled()) {
       return '';

package/eventcatalog/src/pages/visualiser/systems/[id]/[version]/context/index.astro

@@ -8,6 +8,7 @@ export const getStaticPaths = Page.getStaticPaths;
 
 // Get data
 const props = await Page.getData(Astro);
+if (!props) return Astro.rewrite('/404');
 
 // The System Context diagram is now level 1 of the system's visualiser page
 return Astro.redirect(buildUrl(`/visualiser/systems/${props.data.id}/${props.data.version}?level=1`));

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

@@ -11,6 +11,7 @@ export const getStaticPaths = Page.getStaticPaths;
 
 // Get data
 const props = await Page.getData(Astro);
+if (!props) return Astro.rewrite('/404');
 
 const {
   data: { id },

package/eventcatalog/src/types/react-syntax-highlighter.d.ts

@@ -12,3 +12,13 @@ declare module 'react-syntax-highlighter' {
 }
 
 declare module 'react-syntax-highlighter/dist/esm/styles/prism/material-light';
+
+declare module 'react-syntax-highlighter/dist/cjs/create-element.js' {
+  import type { CSSProperties } from 'react';
+
+  export function createStyleObject(
+    classNames: string[],
+    elementStyle?: CSSProperties,
+    stylesheet?: { [selector: string]: CSSProperties }
+  ): CSSProperties;
+}

package/eventcatalog/src/utils/collections/util.ts

@@ -1,16 +1,19 @@
 import type { CollectionTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
-import path from 'node:path';
 import { compareVersions, toComparableVersion, versionSatisfiesRange } from './version-compare';
 
 // --- FILE PATH HELPERS ---
 
+// Without node:path: node graph builders that import this module also run in the browser (the Fields Explorer)
+const pathSegments = (filePath: string) => filePath.split(/[\\/]/).filter(Boolean);
+const getBasename = (filePath: string) => pathSegments(filePath).at(-1) ?? '';
+
 /**
  * Extract the folder name from an Astro collection entry's filePath.
  * Replaces the expensive SDK getResourceFolderName which globs + reads every file.
  */
 export const getFolderNameFromFilePath = (filePath: string): string => {
-  return path.basename(path.dirname(filePath));
+  return pathSegments(filePath).at(-2) ?? '';
 };
 
 // --- SPECIFICATION HELPERS ---
@@ -73,8 +76,9 @@ export const processSpecifications = (
   return specs.map((spec) => ({
     ...spec,
     name: spec.name || getDefaultSpecificationName(spec.type),
-    filename: path.basename(spec.path),
-    filenameWithoutExtension: path.basename(spec.path, path.extname(spec.path)),
+    filename: getBasename(spec.path),
+    // Keeps a leading dot, as path.extname does (`.env` has no extension)
+    filenameWithoutExtension: getBasename(spec.path).replace(/(?<=.)\.[^.]*$/, ''),
   }));
 };
 

package/eventcatalog/src/utils/feature.ts

@@ -27,4 +27,12 @@ export const isAuthEnabled = () =>
   (config?.auth?.enabled ?? false) && fs.existsSync(join(projectDirectory(), 'eventcatalog.auth.js')) && isSSR();
 
 export const isEventCatalogMCPEnabled = () => isSSR() && (config?.mcp?.enabled ?? true);
+
+// Collaborative canvases (EventCatalog Studio, /studio) are an experiment: on the dev server (unless studio.enabled is
+// false), and in production (server output) when studio.enabled is set. With sign-in on, only signed-in people can
+// open them.
+export const isCanvasEnabled = () => {
+  const enabled = config?.studio?.enabled;
+  return enabled !== false && (isDevMode() || (isSSR() && enabled === true));
+};
 export const isEventCatalogMCPAuthEnabled = () => isEventCatalogMCPEnabled() && (config?.mcp?.auth?.enabled ?? false);

package/eventcatalog/src/utils/git.ts

@@ -1,7 +1,6 @@
 import { execFileSync } from 'node:child_process';
 import fs from 'node:fs';
 import path from 'node:path';
-import shell from 'shelljs';
 
 type Commit = { timestamp: number; author: string };
 
@@ -9,10 +8,6 @@ const COMMIT_MARKER = '\x1e';
 
 const newestCommitsByRepository = new Map<string, Map<string, Commit> | undefined>();
 
-export function hasGit() {
-  return !!shell.which('git');
-}
-
 const runGit = (args: string[]) => {
   try {
     return execFileSync('git', ['-c', 'log.showSignature=false', ...args], {
@@ -25,6 +20,17 @@ const runGit = (args: string[]) => {
   }
 };
 
+// Checked once per PATH, as git history is read for every page
+const gitInstalledByPath = new Map<string | undefined, boolean>();
+
+export function hasGit() {
+  const searchPath = process.env.PATH;
+  if (!gitInstalledByPath.has(searchPath)) {
+    gitInstalledByPath.set(searchPath, runGit(['--version']) !== undefined);
+  }
+  return gitInstalledByPath.get(searchPath)!;
+}
+
 const parseCommit = (header: string): Commit => {
   const [timestamp, ...author] = header.split(',');
   return { timestamp: Number(timestamp) * 1_000, author: author.join(',') };
@@ -81,6 +87,17 @@ const readCommit = (filePath: string, age: 'newest' | 'oldest'): Commit => {
   return parseCommit(match.groups.header);
 };
 
+/**
+ * When a file was last committed, from the history read once for the whole repository: never runs git for one file,
+ * so it's cheap to ask for many (e.g. every resource on the homepage). Undefined without git, or for a file that isn't
+ * committed.
+ */
+export function getLastCommitDate(filePath: string): Date | undefined {
+  if (!hasGit()) return undefined;
+  const commit = getNewestCommits()?.get(toRealPath(filePath));
+  return commit ? new Date(commit.timestamp) : undefined;
+}
+
 export function getGitHistory(
   filePath: string,
   {

package/eventcatalog/src/utils/homepage-dashboard.ts

@@ -0,0 +1,143 @@
+import path from 'node:path';
+import { statSync } from 'node:fs';
+import { getCollection } from 'astro:content';
+import { getLastCommitDate } from '@utils/git';
+import { buildUrl } from '@utils/url-builder';
+
+/** The resources the dashboard shows, by collection */
+export type DashboardCollection = 'domains' | 'services' | 'events' | 'commands' | 'queries' | 'flows';
+
+type Owner = { id: string };
+
+/** The fields the dashboard reads from a collection entry */
+export type DashboardEntry = {
+  filePath?: string;
+  data: {
+    id: string;
+    name?: string;
+    version: string;
+    summary?: string;
+    hidden?: boolean;
+    owners?: Owner[];
+    schemaPath?: string;
+  };
+};
+
+export type DashboardResource = {
+  collection: DashboardCollection;
+  id: string;
+  version: string;
+  name: string;
+  summary?: string;
+  href: string;
+  owners: { id: string; name: string }[];
+  updatedAt?: number;
+};
+
+export type DashboardData = {
+  counts: Record<DashboardCollection | 'messages' | 'schemas' | 'teams' | 'users', number>;
+  recentlyUpdated: DashboardResource[];
+};
+
+const MESSAGE_COLLECTIONS = ['events', 'commands', 'queries'] as const;
+
+// The latest version of a resource that isn't hidden (older versions live in a `versioned` folder)
+const isCurrent = (entry: DashboardEntry) => entry.data.hidden !== true && !entry.filePath?.includes('versioned');
+
+/**
+ * Everything the homepage dashboard shows, from the catalog's collections: counts, and what changed recently.
+ */
+export const buildDashboard = ({
+  collections,
+  teams,
+  users,
+  getUpdatedAt,
+}: {
+  collections: Record<DashboardCollection, DashboardEntry[]>;
+  teams: DashboardEntry[];
+  users: DashboardEntry[];
+  /** When a resource's file last changed (unix ms), if known */
+  getUpdatedAt: (entry: DashboardEntry) => number | undefined;
+}): DashboardData => {
+  const ownerNames = new Map<string, string>();
+  for (const owner of [...teams, ...users]) ownerNames.set(owner.data.id, owner.data.name ?? owner.data.id);
+
+  const toResource = (collection: DashboardCollection, entry: DashboardEntry): DashboardResource => ({
+    collection,
+    id: entry.data.id,
+    version: entry.data.version,
+    name: entry.data.name ?? entry.data.id,
+    summary: entry.data.summary?.trim() || undefined,
+    href: buildUrl(`/docs/${collection}/${entry.data.id}/${entry.data.version}`),
+    owners: (entry.data.owners ?? []).map(({ id }) => ({ id, name: ownerNames.get(id) ?? id })),
+    updatedAt: getUpdatedAt(entry),
+  });
+
+  const current = Object.fromEntries(
+    Object.entries(collections).map(([collection, entries]) => [collection, entries.filter(isCurrent)])
+  ) as Record<DashboardCollection, DashboardEntry[]>;
+  const messages = MESSAGE_COLLECTIONS.flatMap((collection) => current[collection]);
+  const all = (Object.keys(current) as DashboardCollection[]).flatMap((collection) =>
+    current[collection].map((entry) => ({ entry, resource: toResource(collection, entry) }))
+  );
+
+  const recentlyUpdated = all
+    .map(({ resource }) => resource)
+    .filter((resource) => resource.updatedAt !== undefined)
+    .sort((a, b) => b.updatedAt! - a.updatedAt!)
+    .slice(0, 8);
+
+  const withSchema = messages.filter((entry) => entry.data.schemaPath).length;
+
+  return {
+    counts: {
+      domains: current.domains.length,
+      services: current.services.length,
+      events: current.events.length,
+      commands: current.commands.length,
+      queries: current.queries.length,
+      flows: current.flows.length,
+      messages: messages.length,
+      schemas: withSchema,
+      teams: teams.filter(isCurrent).length,
+      users: users.filter(isCurrent).length,
+    },
+    recentlyUpdated,
+  };
+};
+
+// When a resource's file last changed: its last commit, or (without git, or before it's committed) the file's date
+const getUpdatedAt = (entry: DashboardEntry) => {
+  if (!entry.filePath) return undefined;
+  const file = path.resolve(process.env.PROJECT_DIR || process.cwd(), entry.filePath);
+  const committed = getLastCommitDate(file);
+  if (committed) return committed.getTime();
+  try {
+    return statSync(file).mtimeMs;
+  } catch {
+    return undefined;
+  }
+};
+
+/** The homepage dashboard for this catalog */
+export const getDashboard = async (): Promise<DashboardData> => {
+  const [domains, services, events, commands, queries, flows, teams, users] = await Promise.all([
+    getCollection('domains'),
+    getCollection('services'),
+    getCollection('events'),
+    getCollection('commands'),
+    getCollection('queries'),
+    getCollection('flows'),
+    getCollection('teams'),
+    getCollection('users'),
+  ]);
+  return buildDashboard({
+    collections: { domains, services, events, commands, queries, flows } as unknown as Record<
+      DashboardCollection,
+      DashboardEntry[]
+    >,
+    teams: teams as unknown as DashboardEntry[],
+    users: users as unknown as DashboardEntry[],
+    getUpdatedAt,
+  });
+};

package/eventcatalog/src/utils/license.ts

@@ -2,7 +2,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { clearCache, hasCommercialLicense, verifyOfflineLicense } from '@eventcatalog/license';
 
-export { LICENSE_FAQ_URL, LICENSE_RENEW_URL } from './trial';
+export { BUY_BUSINESS_URL, LICENSE_FAQ_URL, LICENSE_RENEW_URL, PRICING_URL } from './trial';
 
 // Details from the license token
 export type LicenseDetails = { org?: string; licenseId?: string; issuedAt?: Date };

package/eventcatalog/src/utils/link-validation.ts

@@ -1,6 +1,6 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
-import { parse, type DefaultTreeAdapterMap } from 'parse5';
+import { Parser } from 'htmlparser2';
 import picomatch from 'picomatch';
 
 export type LinkValidationSeverity = 'warn' | 'error' | 'ignore';
@@ -42,30 +42,36 @@ const decodeUrlPart = (value: string): string => {
   }
 };
 
+// Elements whose contents browsers don't render as markup (<noscript> when scripts run)
+const INERT_ELEMENTS = new Set(['template', 'noscript']);
+
 // Parse HTML rather than searching markup with a regex: attributes can contain
 // entities, quoted > characters, or single/unquoted values. Scripts and inert
 // template contents must not be mistaken for rendered links or anchor targets.
+// A streaming parser, not a document tree: pages can be large (island props),
+// and building a tree of each one made link validation a large part of a build.
 const readPage = (html: string, source: string): PageLinks => {
   const page: PageLinks = { source, anchors: new Set(), links: new Set() };
-  const nodes: DefaultTreeAdapterMap['node'][] = [parse(html)];
-  while (nodes.length > 0) {
-    const node = nodes.pop()!;
-    if ('tagName' in node) {
-      const attrs = new Map(node.attrs.map((attr) => [attr.name, attr.value]));
-      const id = attrs.get('id');
-      if (id) page.anchors.add(id);
-      if (node.tagName === 'a' && attrs.get('name')) page.anchors.add(attrs.get('name')!);
-      const href = attrs.get('href');
-      if (href !== undefined) {
-        if (node.tagName === 'base' && page.baseHref === undefined) page.baseHref = href;
-        if (node.tagName === 'a' || node.tagName === 'area') page.links.add(href);
+  let inert = 0;
+  const parser = new Parser({
+    onopentag(tagName, attrs) {
+      if (inert === 0) {
+        if (attrs.id) page.anchors.add(attrs.id);
+        if (tagName === 'a' && attrs.name) page.anchors.add(attrs.name);
+        const href = attrs.href;
+        if (href !== undefined) {
+          // Parsed in document order, so the first <base href> wins
+          if (tagName === 'base' && page.baseHref === undefined) page.baseHref = href;
+          if (tagName === 'a' || tagName === 'area') page.links.add(href);
+        }
       }
-    }
-    // Reverse the stack so the first <base href> wins in document order.
-    if ('childNodes' in node) {
-      for (let i = node.childNodes.length - 1; i >= 0; i--) nodes.push(node.childNodes[i]);
-    }
-  }
+      if (INERT_ELEMENTS.has(tagName)) inert++;
+    },
+    onclosetag(tagName) {
+      if (INERT_ELEMENTS.has(tagName) && inert > 0) inert--;
+    },
+  });
+  parser.end(html);
   return page;
 };
 

package/eventcatalog/src/utils/node-graphs/domain-entity-map.ts

@@ -212,7 +212,9 @@ export const getNodesAndEdges = async ({ id, version, entities, type = 'domains'
             height: 20,
           },
         });
-      } else {
+      } else if (!entityMap.has(referencedEntityId)) {
+        // Only a reference to an entity missing from the catalog is broken. An external entity's own
+        // references can point further away than this map shows: those edges are left out.
         console.warn(`Referenced entity "${referencedEntityId}" not found for ${entity.data.name}.${referenceProperty.name}`);
       }
     }

package/eventcatalog/src/utils/node-graphs/domain-levels-node-graph.ts

@@ -267,7 +267,7 @@ export const buildDomainGraph = ({
         draggable: false,
         selectable: false,
         data: {
-          domain: { name: d.data.name, version: d.data.version },
+          domain: { id: d.data.id, name: d.data.name, version: d.data.version },
           // The domain viewed may itself be a subdomain of another
           subdomain: !!parentId || parentDomainOf.has(d.data.id),
           isFocused: !parentId,
@@ -309,7 +309,7 @@ export const buildDomainGraph = ({
         position: { x: 0, y: 0 },
         ...(parentId ? { parentId } : {}),
         data: {
-          domain: { name: other.data.name, version: other.data.version },
+          domain: { id: other.data.id, name: other.data.name, version: other.data.version },
           subdomain: !!parentId,
           isFocused: false,
           otherDomain: true,
@@ -375,7 +375,7 @@ export const buildDomainGraph = ({
         type: 'system-group',
         parentId: domainGroup,
         position: { x: 0, y: 0 },
-        data: { system: { name: system.data.name, version: system.data.version } },
+        data: { system: { id: system.data.id, name: system.data.name, version: system.data.version } },
       });
     }
     addNodes(graph.nodes);

package/eventcatalog/src/utils/node-graphs/export-mermaid.ts

@@ -38,7 +38,6 @@ const NODE_SHAPE_MAP: Record<string, [string, string]> = {
   'context-actor': ['((', '))'], // circle
   flows: ['([', '])'], // stadium (rounded)
   flow: ['([', '])'],
-  systems: ['[[', ']]'],
   system: ['[[', ']]'],
   step: ['[', ']'], // rectangle
   user: ['((', '))'], // circle
@@ -79,7 +78,6 @@ const NODE_STYLE_CLASSES: Record<string, string> = {
   domains: 'fill:#eab308,stroke:#a16207,color:#000',
   domain: 'fill:#eab308,stroke:#a16207,color:#000',
   'context-domain': 'fill:#eab308,stroke:#a16207,color:#000',
-  systems: 'fill:#7c3aed,stroke:#5b21b6,color:#fff',
   'context-actor': 'fill:#8b5cf6,stroke:#6d28d9,color:#fff',
   flows: 'fill:#14b8a6,stroke:#0f766e,color:#fff',
   flow: 'fill:#14b8a6,stroke:#0f766e,color:#fff',

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

@@ -1,6 +1,6 @@
 import type { Node, Edge } from '@xyflow/react';
 import { createEdge, createNode, buildContextMenuForMessage, buildContextMenuForService } from './utils/utils';
-import { layoutNodeGraph } from '@utils/node-graphs/layout-node-graph';
+import { layoutWithElk } from '@eventcatalog/visualiser/layout';
 
 export interface FieldOccurrence {
   messageId: string;
@@ -173,5 +173,7 @@ export const getNodesAndEdges = async ({
 
   if (!layout) return { nodes, edges };
 
-  return layoutNodeGraph({ nodes, edges });
+  // Lays out with ELK directly rather than layoutNodeGraph: this runs in the browser (the Fields Explorer),
+  // and layoutNodeGraph's cache reads the catalog's config, which would put the config in the browser's bundle
+  return (await layoutWithElk({ nodes, edges })) as unknown as { nodes: Node[]; edges: Edge[] };
 };