@eventcatalog/core 4.8.4 → 4.10.0

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 = "4.8.4";
+var version = "4.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-QB4W7ZUL.js";
-import "../chunk-FQEK3FUI.js";
+} from "../chunk-BQXEWQ5J.js";
+import "../chunk-BDFTJVGN.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -140,7 +140,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "4.8.4";
+var version = "4.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-Y57SL3H3.js";
-import "../chunk-QB4W7ZUL.js";
+} from "../chunk-HFAQXAG3.js";
+import "../chunk-BQXEWQ5J.js";
 import "../chunk-K2XIENVT.js";
-import "../chunk-FQEK3FUI.js";
+import "../chunk-BDFTJVGN.js";
 import "../chunk-6QENHZZP.js";
 export {
   log_build_default as default

package/dist/{chunk-EGWBSVND.js → chunk-5XURY2JV.js}

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

package/dist/{chunk-FQEK3FUI.js → chunk-BDFTJVGN.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "4.8.4";
+var version = "4.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-QB4W7ZUL.js → chunk-BQXEWQ5J.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-FQEK3FUI.js";
+} from "./chunk-BDFTJVGN.js";
 
 // src/analytics/analytics.js
 import os from "os";

package/dist/{chunk-Y57SL3H3.js → chunk-HFAQXAG3.js}

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

package/dist/{chunk-AATZMWL3.js → chunk-IC6XSXJO.js}

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

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/eventcatalog.cjs

@@ -144,7 +144,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "4.8.4";
+var version = "4.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -4,8 +4,8 @@ import {
 import "./chunk-CA4U2JP7.js";
 import {
   log_build_default
-} from "./chunk-Y57SL3H3.js";
-import "./chunk-QB4W7ZUL.js";
+} from "./chunk-HFAQXAG3.js";
+import "./chunk-BQXEWQ5J.js";
 import "./chunk-K2XIENVT.js";
 import {
   FederationConflictError,
@@ -31,10 +31,10 @@ import {
 } from "./chunk-B7HCX5HM.js";
 import {
   generate
-} from "./chunk-EGWBSVND.js";
+} from "./chunk-5XURY2JV.js";
 import {
   logger
-} from "./chunk-AATZMWL3.js";
+} from "./chunk-IC6XSXJO.js";
 import {
   resolve_catalog_dependencies_default
 } from "./chunk-LHR4G2UO.js";
@@ -54,7 +54,7 @@ import {
 import "./chunk-W5JQON7Z.js";
 import {
   VERSION
-} from "./chunk-FQEK3FUI.js";
+} from "./chunk-BDFTJVGN.js";
 import {
   linkCoreNodeModules,
   resolveInstalledCoreNodeModules

package/dist/generate.cjs

@@ -108,7 +108,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "4.8.4";
+var version = "4.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-EGWBSVND.js";
-import "./chunk-AATZMWL3.js";
-import "./chunk-FQEK3FUI.js";
+} from "./chunk-5XURY2JV.js";
+import "./chunk-IC6XSXJO.js";
+import "./chunk-BDFTJVGN.js";
 import "./chunk-6QENHZZP.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 = "4.8.4";
+var version = "4.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-AATZMWL3.js";
-import "../chunk-FQEK3FUI.js";
+} from "../chunk-IC6XSXJO.js";
+import "../chunk-BDFTJVGN.js";
 export {
   logger
 };

package/eventcatalog/src/components/Badge.astro

@@ -23,6 +23,8 @@ type Props = {
 
 const { badge, className = '' } = Astro.props;
 const href = getBadgeHref(badge);
+// Only links that leave the catalog get the external-link arrow.
+const isExternalHref = !!href && (/^[a-z][a-z0-9+.-]*:/i.test(href) || href.startsWith('//'));
 const Icon = badge.icon || badge.iconComponent;
 const hasThemedIcon = badge.iconURLLight && badge.iconURLDark;
 const classes = `
@@ -59,7 +61,7 @@ const classes = `
         <img src={badge.iconURL} class="w-3 h-3 flex-shrink-0 opacity-80" alt="" onerror="this.style.display='none'" />
       )}
       <span>{badge.content}</span>
-      <ArrowTopRightOnSquareIcon className="w-2.5 h-2.5 flex-shrink-0 opacity-70" aria-hidden="true" />
+      {isExternalHref && <ArrowTopRightOnSquareIcon className="w-2.5 h-2.5 flex-shrink-0 opacity-70" aria-hidden="true" />}
     </a>
   ) : (
     <span id={badge.id || undefined} class={classes} style={getBadgeStyle(badge)} title={badge.content}>

package/eventcatalog/src/components/FieldsExplorer/FieldNodeGraph.tsx

@@ -224,11 +224,6 @@ function FieldNodeGraphInner({
   const { fitView } = useReactFlow();
   const wrapperRef = useRef<HTMLDivElement>(null);
 
-  // Load visualiser styles (animations, hover effects, theme variables)
-  useEffect(() => {
-    import('@eventcatalog/visualiser/styles-core.css');
-  }, []);
-
   useEffect(() => {
     const timer = setTimeout(() => fitView({ padding: 0.2 }), 50);
     return () => clearTimeout(timer);

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

@@ -4,6 +4,8 @@ import fs from 'fs';
 import { getAbsoluteFilePathForAstroFile } from '@utils/files';
 import Admonition from '@components/MDX/Admonition';
 import AstroNodeGraph from '../NodeGraph/AstroNodeGraph';
+// Visualiser styles ship in the page head so ClientRouter navigations keep them (see NodeGraph.astro).
+import '@eventcatalog/visualiser/styles-core.css';
 
 import { isVisualiserEnabled, isEventCatalogChatEnabled, isDevMode } from '@utils/feature';
 import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';

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

@@ -3,6 +3,8 @@ import { getDomains } from '@utils/collections/domains';
 import { getNodesAndEdges } from '@utils/node-graphs/domain-entity-map.ts';
 import Admonition from '@components/MDX/Admonition';
 import AstroNodeGraph from '../NodeGraph/AstroNodeGraph';
+// Visualiser styles ship in the page head so ClientRouter navigations keep them (see NodeGraph.astro).
+import '@eventcatalog/visualiser/styles-core.css';
 import { getVersionFromCollection } from '@utils/collections/versions';
 import { getServices } from '@utils/collections/services';
 import { isEventCatalogChatEnabled, isDevMode } from '@utils/feature';

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

@@ -3,6 +3,8 @@ import { getFlows } from '@utils/collections/flows';
 import { getNodesAndEdges } from '@utils/node-graphs/flows-node-graph';
 import Admonition from '@components/MDX/Admonition';
 import AstroNodeGraph from '../NodeGraph/AstroNodeGraph';
+// Visualiser styles ship in the page head so ClientRouter navigations keep them (see NodeGraph.astro).
+import '@eventcatalog/visualiser/styles-core.css';
 import { getVersionFromCollection } from '@utils/collections/versions';
 import { isVisualiserEnabled, isEventCatalogChatEnabled, isDevMode } from '@utils/feature';
 import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';

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

@@ -6,9 +6,13 @@
  * - Navigation using Astro's navigate function
  * - Layout persistence via Astro API routes
  * - URL building with Astro's URL utilities
+ *
+ * Note: the visualiser stylesheet is deliberately NOT imported here. Every Astro file that
+ * renders this component imports `@eventcatalog/visualiser/styles-core.css` itself so the
+ * CSS ships in the page head and survives ClientRouter navigations (see NodeGraph.astro).
  */
 
-import { useCallback, lazy, Suspense, useEffect } from 'react';
+import { useCallback, lazy, Suspense } from 'react';
 import type { Node, Edge } from '@xyflow/react';
 import { buildUrl } from '@utils/url-builder';
 
@@ -42,12 +46,6 @@ interface AstroNodeGraphProps {
 }
 
 const AstroNodeGraph = ({ isDevMode = false, resourceKey, ...otherProps }: AstroNodeGraphProps) => {
-  useEffect(() => {
-    // Load visualizer styles only when this component is mounted.
-    // Use the core-scoped stylesheet so visualizer styles don't override EventCatalog utility classes globally.
-    import('@eventcatalog/visualiser/styles-core.css');
-  }, []);
-
   // 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

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

@@ -1,5 +1,10 @@
 ---
 import AstroNodeGraph from './AstroNodeGraph';
+// Imported here (server side) rather than from the React island: Astro then emits it as a
+// <link> in the page head, which survives ClientRouter navigations. A dynamic import from the
+// island injects a <style> that the view-transition head swap removes — and the cached module
+// never re-injects it, leaving the graph unstyled until a full reload.
+import '@eventcatalog/visualiser/styles-core.css';
 import { getNodesAndEdges as getNodesAndEdgesForAgent } from '@utils/node-graphs/agents-node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForService } from '@utils/node-graphs/services-node-graph';
 import {

package/eventcatalog/src/components/MDX/SchemaViewer/schema-viewer-utils.spec.ts

@@ -9,7 +9,7 @@ const currentMessageSchema = {
     content: '{"type":"object","title":"OrderPlaced"}',
     default: true,
     message: {
-      collection: 'events',
+      collectionName: 'events',
       id: 'OrderPlaced',
       version: '1.0.0',
     },
@@ -42,7 +42,7 @@ describe('resolveSchemaViewer', () => {
         content: 'syntax = "proto3";\nmessage FraudCheckCompleted {\n  string transaction_id = 1;\n}',
         default: true,
         message: {
-          collection: 'events',
+          collectionName: 'events',
           id: 'FraudCheckCompleted',
           version: '1.0.0',
         },
@@ -75,7 +75,7 @@ describe('resolveSchemaViewer', () => {
         content: '{"this": "is not protobuf"}',
         default: true,
         message: {
-          collection: 'events',
+          collectionName: 'events',
           id: 'FraudCheckCompleted',
           version: '1.0.0',
         },

package/eventcatalog/src/components/MDX/SchemaViewer/schema-viewer-utils.ts

@@ -29,7 +29,7 @@ type CollectionSchema = {
       branch?: string;
     };
     message?: {
-      collection: string;
+      collectionName: string;
       id: string;
       version: string;
     };
@@ -79,7 +79,7 @@ const getCollectionSchemaForViewer = ({
   const resourceSchemas = collectionSchemas.filter((schema) => {
     const message = schema.data.message;
     if (!message) return false;
-    return message.collection === collection && message.id === id && message.version === version;
+    return message.collectionName === collection && message.id === id && message.version === version;
   });
 
   return resourceSchemas.find((schema) => schema.data.default) || resourceSchemas[0];

package/eventcatalog/src/components/SchemaExplorer/useDarkMode.ts

@@ -1,7 +1,16 @@
-import { useStore } from '@nanostores/react';
-import { themeStore } from '@stores/theme-store';
+import { useSyncExternalStore } from 'react';
+import { DEFAULT_THEME, themeStore } from '@stores/theme-store';
+
+const subscribe = (onChange: () => void) => themeStore.listen(onChange);
+const getSnapshot = () => themeStore.get() === 'dark';
+
+// On the client the store is initialised from localStorage before React hydrates, so it can
+// already differ from the value the server rendered with. React 18 keeps the server's inline
+// `style` attributes when they mismatch during hydration, which left dark-theme syntax colours
+// (and text-shadow) on light-mode pages until the component remounted. Hydrate with the server
+// value instead; React re-renders with the real client value straight after.
+const getServerSnapshot = () => DEFAULT_THEME === 'dark';
 
 export function useDarkMode(): boolean {
-  const theme = useStore(themeStore);
-  return theme === 'dark';
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }