@eventcatalog/core 3.36.4 → 3.37.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.36.4";
+var version = "3.37.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-HF27CRFY.js";
-import "../chunk-NV7DNZ3X.js";
+} from "../chunk-6UFDH5SD.js";
+import "../chunk-C24AACHY.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -111,7 +111,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "3.36.4";
+var version = "3.37.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-7WJEUZFM.js";
+} from "../chunk-3N5OG33R.js";
+import "../chunk-6UFDH5SD.js";
 import "../chunk-4UVFXLPI.js";
-import "../chunk-HF27CRFY.js";
-import "../chunk-NV7DNZ3X.js";
+import "../chunk-C24AACHY.js";
 import "../chunk-5T63CXKU.js";
 export {
   log_build_default as default

package/dist/{chunk-7WJEUZFM.js → chunk-3N5OG33R.js}

@@ -1,10 +1,10 @@
+import {
+  raiseEvent
+} from "./chunk-6UFDH5SD.js";
 import {
   countResources,
   serializeCounts
 } from "./chunk-4UVFXLPI.js";
-import {
-  raiseEvent
-} from "./chunk-HF27CRFY.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-HF27CRFY.js → chunk-6UFDH5SD.js}

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

package/dist/{chunk-NV7DNZ3X.js → chunk-C24AACHY.js}

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

package/dist/{chunk-XTJ636IF.js → chunk-G6DWKVUO.js}

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

package/dist/{chunk-6JY6QF7D.js → chunk-R6AVEQA4.js}

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

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/docs/development/bring-your-own-documentation/custom-pages/03-components.md

@@ -36,6 +36,10 @@ This is my custom documentation page, here is a NodeGraph:
 Rest of my markdown content...
 ```
 
+:::note Required props
+In custom documentation pages, `id`, `version`, and `type` are all required. A `<NodeGraph />` missing any of these props is silently ignored.
+:::
+
 #### NodeGraph props
 
 | Prop | Type | Required | Description |
@@ -43,4 +47,7 @@ Rest of my markdown content...
 | `id` | string | Yes | The id of the resource (domain, service, or message) |
 | `version` | string | Yes | The version of the resource |
 | `type` | string | Yes | The type of the resource (domain, service, command, event, query) |
+| `search` | boolean | No | Show or hide the search bar. Accepts `true`/`false` or `"true"`/`"false"`. Defaults to `true`. |
+| `legend` | boolean | No | Show or hide the legend. Accepts `true`/`false` or `"true"`/`"false"`. Defaults to `true`. |
+| `mode` | string | No | `"simple"` or `"full"`. Defaults to `"simple"`. |
 

package/dist/docs/development/components/components/08-flow.md

@@ -14,20 +14,29 @@ Embed flows into your pages.
 **Example**
 
 ```jsx /domains/MyDomain/index.mdx
-<Flow id="CancelSubscription" version="latest" includeKey={false} />
+<Flow id="CancelSubscription" version="latest" legend={false} />
 ```
 
 ### Output
 ![Example output](./img/flows.png)
 
 ### Props
+
+<AddedIn version="3.36.3" />
+
 | Name                    | Type      | Default           | Description                                                       |
 | ----------------------- | --------- | ----------------- | ----------------------------------------------------------------- |
 | `id` (required)                 | `string`  | (empty)           | Flow id to render in your page                               |
-| `version` (optional)             | `string`  | "latest"           | Version of the flow to render. Supports exact version and semver versions (e.g 1.0.x, ^1.3.5, latest)|
-| `includeKey` (optional)             | `boolean`  | true           | Renders the diagram key on the UI |
-| `search` (optional)             | `boolean`  | true           | Show or hide the search bar in the flow _(Added in v2.50.3)_ |
-| `mode` (optional)             | `string` ("simple" or "full")  | "simple"           | `simple` will render the flow in a simplfied view not rendering descriptions. Full will render the flow in a full view, rendering descriptions and other information _(Added in v2.50.3)_|
+| `version` (optional)             | `string`  | `"latest"`           | Version of the flow to render. Supports exact version and semver versions (e.g 1.0.x, ^1.3.5, latest)|
+| `legend` (optional)             | `boolean`  | `true`           | Show or hide the diagram key. Accepts `true`/`false` or `"true"`/`"false"`. `includeKey` is still accepted as an alias. |
+| `search` (optional)             | `boolean`  | `false`           | Show or hide the search bar in the flow. Accepts `true`/`false` or `"true"`/`"false"`. |
+| `walkthrough` (optional)             | `boolean`  | `false`           | Show or hide the step walkthrough controls. Accepts `true`/`false` or `"true"`/`"false"`. |
+| `mode` (optional)             | `string` ("simple" or "full")  | `"simple"`           | `simple` renders the flow in a simplified view without descriptions. `full` renders descriptions and other information.|
+
+:::tip Multiple embeds per page
+You can embed multiple `<Flow />` components on the same page and each one renders independently.
+:::
+
 
 ## Interactive controls
 

package/dist/docs/development/components/components/12-nodegraph.md

@@ -25,12 +25,15 @@ The `<NodeGraph/>` component is supported in domains, services, and all messages
 ![Example output](./img/nodegraph.png)
 
 #### Props
+
+<AddedIn version="3.36.3" />
+
 | Name                    | Type      | Default           | Description                                                       |
 | ----------------------- | --------- | ----------------- | ----------------------------------------------------------------- |
-| `maxHeight` (optional)             | `string`  | 30           | Max height to set the nodegraph in your document|
-| `search` (optional)             | `boolean`  | true           | Show or hide the search bar in the nodegraph _(Added in v2.50.3)_ |
-| `legend` (optional)             | `boolean`  | true           | Show or hide the legend in the nodegraph _(Added in v2.50.3)_ |
-| `mode` (optional)             | `string` ("simple" or "full")  | "simple"           | `simple` will render the nodegraph in a simplfied view not rendering descriptions. Full will render the nodegraph in a full view, rendering descriptions and other information _(Added in v2.50.3)_|
+| `maxHeight` (optional)             | `string`  | `30`           | Max height to set the nodegraph in your document|
+| `search` (optional)             | `boolean`  | `true`           | Show or hide the search bar. Accepts `true`/`false` or `"true"`/`"false"`. |
+| `legend` (optional)             | `boolean`  | `true`           | Show or hide the legend. Accepts `true`/`false` or `"true"`/`"false"`. |
+| `mode` (optional)             | `string` ("simple" or "full")  | `"simple"`           | `simple` renders a simplified view without descriptions. `full` renders descriptions and other information.|
 
 
 ## Interactive controls

package/dist/eventcatalog.cjs

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

package/dist/eventcatalog.js

@@ -1,7 +1,7 @@
 import {
-  log_build_default
-} from "./chunk-7WJEUZFM.js";
-import "./chunk-4UVFXLPI.js";
+  runMigrations
+} from "./chunk-XUAF2H54.js";
+import "./chunk-CA4U2JP7.js";
 import {
   resolve_catalog_dependencies_default
 } from "./chunk-WAJIJEI3.js";
@@ -12,10 +12,10 @@ import {
   watch
 } from "./chunk-K3ZVEX2Y.js";
 import {
-  runMigrations
-} from "./chunk-XUAF2H54.js";
-import "./chunk-CA4U2JP7.js";
-import "./chunk-HF27CRFY.js";
+  log_build_default
+} from "./chunk-3N5OG33R.js";
+import "./chunk-6UFDH5SD.js";
+import "./chunk-4UVFXLPI.js";
 import {
   catalogToAstro
 } from "./chunk-YDXB3BD2.js";
@@ -28,13 +28,13 @@ import {
 } from "./chunk-ULZYHF3V.js";
 import {
   generate
-} from "./chunk-6JY6QF7D.js";
+} from "./chunk-R6AVEQA4.js";
 import {
   logger
-} from "./chunk-XTJ636IF.js";
+} from "./chunk-G6DWKVUO.js";
 import {
   VERSION
-} from "./chunk-NV7DNZ3X.js";
+} from "./chunk-C24AACHY.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/generate.cjs

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

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-6JY6QF7D.js";
-import "./chunk-XTJ636IF.js";
-import "./chunk-NV7DNZ3X.js";
+} from "./chunk-R6AVEQA4.js";
+import "./chunk-G6DWKVUO.js";
+import "./chunk-C24AACHY.js";
 import "./chunk-5T63CXKU.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.36.4";
+var version = "3.37.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-XTJ636IF.js";
-import "../chunk-NV7DNZ3X.js";
+} from "../chunk-G6DWKVUO.js";
+import "../chunk-C24AACHY.js";
 export {
   logger
 };

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

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { SearchX, Copy, Check, AlertTriangle } from 'lucide-react';
 import { BoltIcon, ChatBubbleLeftIcon, MagnifyingGlassIcon } from '@heroicons/react/24/solid';
 import { buildUrl } from '@utils/url-builder';
+import { getCollectionTextColorClass } from '@utils/collection-colors';
 
 export interface FieldResult {
   path: string;
@@ -28,13 +29,6 @@ export interface FieldsTableProps {
   isScaleEnabled?: boolean;
 }
 
-const colorClasses: Record<string, string> = {
-  orange: 'text-orange-500',
-  blue: 'text-blue-500',
-  green: 'text-green-500',
-  gray: 'text-gray-500',
-};
-
 const getColorAndIconForMessageType = (type: string) => {
   switch (type) {
     case 'event':
@@ -58,7 +52,7 @@ function MessageBadge({ id, name, version, type }: { id: string; name?: string;
       onClick={(e) => e.stopPropagation()}
       className="group/msg inline-flex items-center gap-1.5 text-[0.8rem] text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-accent))] transition-colors"
     >
-      <Icon className={`h-3.5 w-3.5 ${colorClasses[color] || 'text-gray-500'} flex-shrink-0`} />
+      <Icon className={`h-3.5 w-3.5 ${getCollectionTextColorClass(color)} flex-shrink-0`} />
       <span className="truncate max-w-[160px] text-[rgb(var(--ec-page-text-muted))] group-hover/msg:text-[rgb(var(--ec-accent))]">
         {name || id}
       </span>

package/eventcatalog/src/components/MDX/Admonition.tsx

@@ -1,14 +1,10 @@
-import { InformationCircleIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
-
-type AdmonitionType = 'danger' | 'alert' | 'warning' | 'info' | 'note';
+type AdmonitionType = 'danger' | 'alert' | 'warning' | 'info' | 'note' | 'tip';
 
 interface AdmonitionConfig {
-  icon: typeof InformationCircleIcon;
+  iconPath: string;
   title: string;
   containerClasses: string;
-  iconClasses: string;
-  titleClasses: string;
-  contentClasses: string;
+  accentClasses: string;
 }
 
 const getConfigurationByType = (type: string): AdmonitionConfig => {
@@ -16,39 +12,38 @@ const getConfigurationByType = (type: string): AdmonitionConfig => {
     case 'danger':
     case 'alert':
       return {
-        icon: ExclamationTriangleIcon,
+        iconPath: 'M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86L7.86 2z M12 8v4 M12 16h.01',
         title: type === 'danger' ? 'Danger' : 'Alert',
-        containerClasses: 'bg-red-50 dark:bg-red-950/50 border-red-500',
-        iconClasses: 'text-red-500 dark:text-red-400',
-        titleClasses: 'text-red-600 dark:text-red-300',
-        contentClasses: 'text-red-700 dark:text-red-200',
+        containerClasses: 'bg-red-50/60 dark:bg-red-950/30 border border-red-200/70 dark:border-red-900/60',
+        accentClasses: 'text-red-700 dark:text-red-300',
       };
     case 'warning':
       return {
-        icon: ExclamationTriangleIcon,
+        iconPath: 'M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4 M12 17h.01',
         title: 'Warning',
-        containerClasses: 'bg-yellow-50 dark:bg-yellow-950/50 border-yellow-500',
-        iconClasses: 'text-yellow-500 dark:text-yellow-400',
-        titleClasses: 'text-yellow-600 dark:text-yellow-300',
-        contentClasses: 'text-yellow-700 dark:text-yellow-200',
+        containerClasses: 'bg-amber-50/60 dark:bg-amber-950/30 border border-amber-200/70 dark:border-amber-900/60',
+        accentClasses: 'text-amber-700 dark:text-amber-300',
       };
     case 'note':
       return {
-        icon: InformationCircleIcon,
+        iconPath: 'M12 20h9 M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z',
         title: 'Note',
-        containerClasses: 'bg-blue-50 dark:bg-blue-950/50 border-blue-500',
-        iconClasses: 'text-blue-500 dark:text-blue-400',
-        titleClasses: 'text-blue-600 dark:text-blue-300',
-        contentClasses: 'text-blue-700 dark:text-blue-200',
+        containerClasses: 'bg-slate-50/70 dark:bg-slate-900/40 border border-slate-200/70 dark:border-slate-700/60',
+        accentClasses: 'text-slate-600 dark:text-slate-300',
+      };
+    case 'tip':
+      return {
+        iconPath: 'M9 18h6 M10 22h4 M12 2a7 7 0 0 0-4 12.74V17h8v-2.26A7 7 0 0 0 12 2z',
+        title: 'Tip',
+        containerClasses: 'bg-emerald-50/60 dark:bg-emerald-900/40 border border-emerald-200/70 dark:border-emerald-700/80',
+        accentClasses: 'text-emerald-700 dark:text-emerald-300',
       };
     default:
       return {
-        icon: InformationCircleIcon,
+        iconPath: 'M12 2a10 10 0 100 20 10 10 0 000-20zM12 8h.01M11 12h1v4h1',
         title: 'Info',
-        containerClasses: 'bg-indigo-50 dark:bg-indigo-950/50 border-indigo-500',
-        iconClasses: 'text-indigo-500 dark:text-indigo-400',
-        titleClasses: 'text-indigo-600 dark:text-indigo-300',
-        contentClasses: 'text-indigo-700 dark:text-indigo-200',
+        containerClasses: 'bg-blue-50/60 dark:bg-blue-950/30 border border-blue-200/70 dark:border-blue-900/60',
+        accentClasses: 'text-blue-700 dark:text-blue-300',
       };
   }
 };
@@ -62,16 +57,31 @@ interface AdmonitionProps {
 
 export default function Admonition({ children, type = 'info', className = '', title }: AdmonitionProps) {
   const config = getConfigurationByType(type);
-  const Icon = config.icon;
 
   return (
-    <div className={`${config.containerClasses} border-l-4 p-4 my-4 ${className} rounded-md not-prose`}>
-      <div className="flex flex-col">
-        <div className="flex items-center justify-start">
-          <Icon className={`h-6 w-6 ${config.iconClasses} stroke-2`} aria-hidden="true" />
-          <h3 className={`ml-2 ${config.titleClasses} font-bold text-md`}>{title || config.title}</h3>
-        </div>
-        <div className={`mt-2 ${config.contentClasses} text-md`}>{children}</div>
+    <div
+      className={`ec-admonition ${config.containerClasses} rounded-md px-3 py-2.5 my-4 text-[0.85rem] leading-relaxed not-prose ${className}`}
+    >
+      <div className={`flex items-center gap-1.5 mb-1 ${config.accentClasses}`}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="lucide shrink-0"
+          aria-hidden="true"
+        >
+          <path d={config.iconPath} />
+        </svg>
+        <span className="text-[0.7rem] font-semibold uppercase tracking-wider">{title || config.title}</span>
+      </div>
+      <div className="prose prose-sm dark:prose-invert w-full max-w-none! prose-p:my-0.5 prose-p:text-inherit prose-p:text-[0.85rem] prose-p:leading-relaxed prose-code:text-[0.8rem]">
+        {children}
       </div>
     </div>
   );

package/eventcatalog/src/components/MDX/MessageTable/MessageTable.client.tsx

@@ -1,4 +1,5 @@
 import { getColorAndIconForCollection } from '@utils/collections/icons';
+import { getCollectionTextColorClass } from '@utils/collection-colors';
 import { buildUrl } from '@utils/url-builder';
 import { useState, useMemo, useCallback, memo } from 'react';
 
@@ -37,7 +38,7 @@ const MessageRow = memo(
         <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-[rgb(var(--ec-page-text))] sm:pl-6 relative">
           <a href={url} className="absolute inset-0 z-10" aria-label={`View details for ${message.name}`} />
           <div className="flex items-center gap-2 relative">
-            <Icon className={`h-5 w-5 text-${color}-500`} />
+            <Icon className={`h-5 w-5 ${getCollectionTextColorClass(color)}`} />
             <span className="group-hover:text-blue-600 break-all">{message.name}</span>
           </div>
         </td>

package/eventcatalog/src/components/MDX/ResourceGroupTable/ResourceGroupTable.client.tsx

@@ -1,4 +1,5 @@
 import { getColorAndIconForCollection } from '@utils/collections/icons';
+import { getCollectionTextColorClass } from '@utils/collection-colors';
 import { buildUrl } from '@utils/url-builder';
 import { useState, useMemo, useCallback, memo } from 'react';
 
@@ -41,7 +42,7 @@ const ResourceRow = memo(
         <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-[rgb(var(--ec-page-text))] sm:pl-6 relative">
           <a href={url} className="absolute inset-0 z-10" aria-label={`View details for ${resource.name}`} />
           <div className="flex items-center gap-2 relative">
-            <Icon className={`h-5 w-5 text-${color}-500`} />
+            <Icon className={`h-5 w-5 ${getCollectionTextColorClass(color)}`} />
             <span className="group-hover:text-[rgb(var(--ec-accent))] break-all">{resource.name}</span>
           </div>
         </td>

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

@@ -2,9 +2,11 @@
 import { buildUrl } from '@utils/url-builder';
 import { getItemsFromCollectionByIdAndSemverOrLatest, resourceToCollectionMap } from '@utils/collections/util';
 import { getCollection } from 'astro:content';
+import { getResourceReferenceStyle } from '@utils/resource-reference-colors';
 
 const { id, version, type } = Astro.props;
 const collection = resourceToCollectionMap[type as keyof typeof resourceToCollectionMap];
+const resourceReferenceStyle = getResourceReferenceStyle(type);
 
 let slotHTML = await Astro.slots.render('default');
 let href = '#';
@@ -43,7 +45,11 @@ try {
 
 {
   !linkHasError && (
-    <a href={href} class="text-[rgb(var(--ec-accent))] hover:text-[rgb(var(--ec-accent-hover))]">
+    <a
+      href={href}
+      class="rounded px-1 -mx-1 text-[var(--ec-resource-ref-color)] hover:bg-[var(--ec-resource-ref-bg)] transition-colors"
+      style={resourceReferenceStyle}
+    >
       {slotHTML}
     </a>
   )