@eventcatalog/core 2.54.8 → 2.55.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 = "2.54.8";
+var version = "2.55.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-ERICNBX2.js";
-import "../chunk-ZVJRM3VC.js";
+} from "../chunk-HVIAPJSO.js";
+import "../chunk-C2SLLLIQ.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

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

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-LK5JF3WD.js";
-import "../chunk-ERICNBX2.js";
-import "../chunk-ZVJRM3VC.js";
-import "../chunk-E7TXTI7G.js";
+} from "../chunk-MYOJ2HFW.js";
+import "../chunk-HVIAPJSO.js";
+import "../chunk-C2SLLLIQ.js";
+import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default
 };

package/dist/catalog-to-astro-content-directory.cjs

@@ -35,7 +35,7 @@ __export(catalog_to_astro_content_directory_exports, {
 });
 module.exports = __toCommonJS(catalog_to_astro_content_directory_exports);
 
-// node_modules/.pnpm/tsup@8.3.6_jiti@1.21.7_postcss@8.5.1_typescript@5.7.3_yaml@2.7.0/node_modules/tsup/assets/cjs_shims.js
+// node_modules/.pnpm/tsup@8.5.0_jiti@1.21.7_postcss@8.5.6_typescript@5.9.2_yaml@2.8.1/node_modules/tsup/assets/cjs_shims.js
 var getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${__filename}`).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
 var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
 

package/dist/catalog-to-astro-content-directory.js

@@ -1,9 +1,9 @@
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
-} from "./chunk-IZMM7ZGY.js";
-import "./chunk-LDBRNJIL.js";
-import "./chunk-E7TXTI7G.js";
+} from "./chunk-R2BJ7MJG.js";
+import "./chunk-55D645EH.js";
+import "./chunk-UPONRQSN.js";
 export {
   catalogToAstro,
   checkAndConvertMdToMdx

package/dist/{chunk-BLDONK5J.js → chunk-2C7LRK2M.js}

@@ -1,10 +1,10 @@
 import {
   getEventCatalogConfigFile
-} from "./chunk-E7TXTI7G.js";
+} from "./chunk-UPONRQSN.js";
 
 // src/resolve-catalog-dependencies.js
-import path from "node:path";
-import fs from "node:fs";
+import path from "path";
+import fs from "fs";
 import matter from "gray-matter";
 var resolve_catalog_dependencies_default = async (catalogDir, core) => {
   const catalogConfig = await getEventCatalogConfigFile(catalogDir);

package/dist/{chunk-YEQVKHST.js → chunk-3W6JYTHP.js}

@@ -1,10 +1,10 @@
 import {
   cleanup,
   getEventCatalogConfigFile
-} from "./chunk-E7TXTI7G.js";
+} from "./chunk-UPONRQSN.js";
 
 // src/generate.js
-import path from "node:path";
+import path from "path";
 function getDefaultExport(importedModule) {
   if (importedModule === null || typeof importedModule !== "object") {
     throw new Error("Invalid module");

package/dist/{chunk-LDBRNJIL.js → chunk-55D645EH.js}

@@ -1,5 +1,5 @@
 // src/map-catalog-to-astro.js
-import path from "node:path";
+import path from "path";
 var COLLECTION_KEYS = [
   "events",
   "commands",

package/dist/{chunk-ZVJRM3VC.js → chunk-C2SLLLIQ.js}

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

package/dist/{chunk-ERICNBX2.js → chunk-HVIAPJSO.js}

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

package/dist/{chunk-MCSZBCOG.js → chunk-I23A46WZ.js}

@@ -1,11 +1,11 @@
 import {
   getEventCatalogConfigFile
-} from "./chunk-E7TXTI7G.js";
+} from "./chunk-UPONRQSN.js";
 
 // src/features.ts
 import boxen from "boxen";
-import { join } from "node:path";
-import fs from "node:fs";
+import { join } from "path";
+import fs from "fs";
 var getProjectOutDir = async () => {
   const config = await getEventCatalogConfigFile(process.env.PROJECT_DIR || "");
   return config?.outDir || "dist";

package/dist/{chunk-LK5JF3WD.js → chunk-MYOJ2HFW.js}

@@ -1,10 +1,10 @@
 import {
   raiseEvent
-} from "./chunk-ERICNBX2.js";
+} from "./chunk-HVIAPJSO.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile
-} from "./chunk-E7TXTI7G.js";
+} from "./chunk-UPONRQSN.js";
 
 // src/analytics/log-build.js
 var getFeatures = async (configFile) => {

package/dist/{chunk-XE6PFSH5.js → chunk-PLNJC7NZ.js}

@@ -1,10 +1,10 @@
 import {
   mapCatalogToAstro
-} from "./chunk-LDBRNJIL.js";
+} from "./chunk-55D645EH.js";
 
 // src/watcher.js
 import watcher from "@parcel/watcher";
-import fs from "node:fs";
+import fs from "fs";
 import { rimrafSync } from "rimraf";
 async function watch(projectDirectory, catalogDirectory, callback = void 0) {
   const subscription = await watcher.subscribe(

package/dist/{chunk-IZMM7ZGY.js → chunk-R2BJ7MJG.js}

@@ -1,16 +1,16 @@
 import {
   mapCatalogToAstro
-} from "./chunk-LDBRNJIL.js";
+} from "./chunk-55D645EH.js";
 import {
   verifyRequiredFieldsAreInCatalogConfigFile
-} from "./chunk-E7TXTI7G.js";
+} from "./chunk-UPONRQSN.js";
 
 // src/catalog-to-astro-content-directory.js
 import { glob } from "glob";
-import * as path from "node:path";
+import * as path from "path";
 import fs from "fs";
 import { fileURLToPath } from "url";
-import os from "node:os";
+import os from "os";
 var __filename = fileURLToPath(import.meta.url);
 var rootPkg = path.resolve(path.dirname(__filename), "../");
 var copyFiles = async (source, target) => {

package/dist/{chunk-E7TXTI7G.js → chunk-UPONRQSN.js}

@@ -1,8 +1,8 @@
 // src/eventcatalog-config-file-utils.js
-import { readFile, writeFile, rm } from "node:fs/promises";
-import { existsSync } from "node:fs";
-import { copyFile } from "node:fs/promises";
-import path from "node:path";
+import { readFile, writeFile, rm } from "fs/promises";
+import { existsSync } from "fs";
+import { copyFile } from "fs/promises";
+import path from "path";
 import { v4 as uuidV4 } from "uuid";
 import { pathToFileURL } from "url";
 import matter from "gray-matter";

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/eventcatalog-config-file-utils.js

@@ -4,7 +4,7 @@ import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile,
   writeEventCatalogConfigFile
-} from "./chunk-E7TXTI7G.js";
+} from "./chunk-UPONRQSN.js";
 export {
   addPropertyToFrontMatter,
   cleanup,

package/dist/eventcatalog.cjs

@@ -22,7 +22,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-// node_modules/.pnpm/tsup@8.3.6_jiti@1.21.7_postcss@8.5.1_typescript@5.7.3_yaml@2.7.0/node_modules/tsup/assets/cjs_shims.js
+// node_modules/.pnpm/tsup@8.5.0_jiti@1.21.7_postcss@8.5.6_typescript@5.9.2_yaml@2.8.1/node_modules/tsup/assets/cjs_shims.js
 var getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${__filename}`).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
 var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
 
@@ -157,7 +157,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.54.8";
+var version = "2.55.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -1,21 +1,21 @@
 import {
   resolve_catalog_dependencies_default
-} from "./chunk-BLDONK5J.js";
+} from "./chunk-2C7LRK2M.js";
 import {
   watch
-} from "./chunk-XE6PFSH5.js";
+} from "./chunk-PLNJC7NZ.js";
 import {
   log_build_default
-} from "./chunk-LK5JF3WD.js";
-import "./chunk-ERICNBX2.js";
+} from "./chunk-MYOJ2HFW.js";
+import "./chunk-HVIAPJSO.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
-} from "./chunk-IZMM7ZGY.js";
-import "./chunk-LDBRNJIL.js";
+} from "./chunk-R2BJ7MJG.js";
+import "./chunk-55D645EH.js";
 import {
   VERSION
-} from "./chunk-ZVJRM3VC.js";
+} from "./chunk-C2SLLLIQ.js";
 import {
   getProjectOutDir,
   isAuthEnabled,
@@ -23,19 +23,19 @@ import {
   isEventCatalogScaleEnabled,
   isEventCatalogStarterEnabled,
   isOutputServer
-} from "./chunk-MCSZBCOG.js";
+} from "./chunk-I23A46WZ.js";
 import {
   generate
-} from "./chunk-YEQVKHST.js";
-import "./chunk-E7TXTI7G.js";
+} from "./chunk-3W6JYTHP.js";
+import "./chunk-UPONRQSN.js";
 
 // src/eventcatalog.ts
 import { Command } from "commander";
-import { execSync } from "node:child_process";
-import { join } from "node:path";
+import { execSync } from "child_process";
+import { join } from "path";
 import fs from "fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
+import path from "path";
+import { fileURLToPath } from "url";
 import concurrently from "concurrently";
 import boxen from "boxen";
 import updateNotifier from "update-notifier";

package/dist/features.js

@@ -5,8 +5,8 @@ import {
   isEventCatalogScaleEnabled,
   isEventCatalogStarterEnabled,
   isOutputServer
-} from "./chunk-MCSZBCOG.js";
-import "./chunk-E7TXTI7G.js";
+} from "./chunk-I23A46WZ.js";
+import "./chunk-UPONRQSN.js";
 export {
   getProjectOutDir,
   isAuthEnabled,

package/dist/generate.js

@@ -1,7 +1,7 @@
 import {
   generate
-} from "./chunk-YEQVKHST.js";
-import "./chunk-E7TXTI7G.js";
+} from "./chunk-3W6JYTHP.js";
+import "./chunk-UPONRQSN.js";
 export {
   generate
 };

package/dist/map-catalog-to-astro.js

@@ -1,6 +1,6 @@
 import {
   mapCatalogToAstro
-} from "./chunk-LDBRNJIL.js";
+} from "./chunk-55D645EH.js";
 export {
   mapCatalogToAstro
 };

package/dist/resolve-catalog-dependencies.js

@@ -1,7 +1,7 @@
 import {
   resolve_catalog_dependencies_default
-} from "./chunk-BLDONK5J.js";
-import "./chunk-E7TXTI7G.js";
+} from "./chunk-2C7LRK2M.js";
+import "./chunk-UPONRQSN.js";
 export {
   resolve_catalog_dependencies_default as default
 };

package/dist/watcher.js

@@ -1,7 +1,7 @@
 import {
   watch
-} from "./chunk-XE6PFSH5.js";
-import "./chunk-LDBRNJIL.js";
+} from "./chunk-PLNJC7NZ.js";
+import "./chunk-55D645EH.js";
 export {
   watch
 };

package/eventcatalog/astro.config.mjs

@@ -15,6 +15,7 @@ import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 /** @type {import('bin/eventcatalog.config').Config} */
 import config from './eventcatalog.config';
 import expressiveCode from 'astro-expressive-code';
+import ecstudioWatcher from './integrations/ecstudio-watcher.mjs';
 
 const projectDirectory = process.env.PROJECT_DIR || process.cwd();
 const base = config.base || '/';
@@ -79,6 +80,7 @@ export default defineConfig({
       Logger: 0,
       CSS: false,
     }),
+    ecstudioWatcher(),
   ].filter(Boolean),
   vite: {
     define: {

package/eventcatalog/integrations/ecstudio-watcher.mjs

@@ -0,0 +1,62 @@
+export default function ecstudioWatcher() {
+  return {
+    name: 'ecstudio-watcher',
+    hooks: {
+      'astro:server:setup': ({ server, refreshContent }) => {
+        // Only set up dynamic watching in development mode
+        if (server.config.mode !== 'development') {
+          return;
+        }
+
+        // Get the project root directory - server.config.root is already a string path
+        const rootDir = server.config.root;
+        const isEcstudioFile = (path) => path.endsWith('.ecstudio') && !path.includes('public/generated') && !path.includes('public\\generated');
+        
+        // Set up chokidar to watch for new .ecstudio files
+        server.watcher
+          .on('add', async (path) => {
+            if (isEcstudioFile(path)) {
+              console.log(`New .ecstudio file detected: ${path}`);
+              
+              // Add the new file to the watcher and refresh content
+              server.watcher.add(path);
+              
+              if (refreshContent) {
+                try {
+                  await refreshContent();
+                  console.log('Content refreshed after adding new .ecstudio file');
+                } catch (error) {
+                  console.error('Error refreshing content:', error);
+                }
+              }
+            }
+          })
+          .on('unlink', async (path) => {
+            if (isEcstudioFile(path)) {
+              console.log(`Removed .ecstudio file: ${path}`);
+              
+              if (refreshContent) {
+                try {
+                  await refreshContent();
+                  console.log('Content refreshed after removing .ecstudio file');
+                } catch (error) {
+                  console.error('Error refreshing content:', error);
+                }
+              }
+            }
+          })
+          .on('change', async (path) => {
+            if (isEcstudioFile(path)) {
+              console.log(`Changed .ecstudio file: ${path}`);
+              await refreshContent();
+            }
+          });
+
+        // Also add the root directory to watch for new files
+        server.watcher.add(rootDir);
+        
+        console.log('Set up dynamic .ecstudio file watcher with content refresh');
+      },
+    },
+  };
+}

package/eventcatalog/src/components/Grids/ServiceGrid.tsx

@@ -186,7 +186,7 @@ const DomainSection = memo(
                 </div>
               )}
 
-              <div className="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 xl:grid-cols-2 gap-6">
+              <div className="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1 gap-6">
                 {subdomainServices.map((service) => (
                   <ServiceCard
                     key={service.data.id}
@@ -386,7 +386,7 @@ export default function ServiceGrid({ services, domains, embeded }: ServiceGridP
                 />
               ))
           ) : (
-            <div className={`grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 xl:grid-cols-${embeded ? 1 : 2} gap-6`}>
+            <div className={`grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1 gap-6`}>
               {paginatedServices.map((service) => (
                 <ServiceCard key={service.data.id} service={service} urlParams={urlParams} selectedTypes={selectedTypes} />
               ))}

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

@@ -0,0 +1,67 @@
+---
+const { file: designPath, filePath, search = true, title } = Astro.props;
+import fs from 'fs';
+import { getAbsoluteFilePathForAstroFile } from '@utils/files';
+import Admonition from '@components/MDX/Admonition';
+import NodeGraph from '../NodeGraph/NodeGraph';
+
+let design: any;
+let id = 'design';
+let maxHeight = 30;
+
+try {
+  const fileName = designPath.endsWith('.ecstudio') ? designPath : `${designPath}.ecstudio`;
+  const pathToSpec = getAbsoluteFilePathForAstroFile(filePath, fileName);
+  const designFile = fs.readFileSync(pathToSpec, 'utf8');
+  design = JSON.parse(designFile);
+} catch (error) {
+  console.error(`Error reading design file: ${error}`);
+}
+---
+
+{
+  !design && (
+    <Admonition type="warning">
+      <div>
+        <span class="block font-bold">{`<Design/>`} failed to load</span>
+        <span class="block">
+          Tried to load design file: {designPath}. Make sure you have this design file defined in your project.
+        </span>
+      </div>
+    </Admonition>
+  )
+}
+
+{
+  design && (
+    <div>
+      <div
+        class="h-[30em] my-6 mb-12 w-full relative border border-gray-200 rounded-md"
+        id={`${id}-portal`}
+        style={{
+          maxHeight: maxHeight ? `${maxHeight}em` : `30em`,
+        }}
+      />
+
+      <div>
+        <NodeGraph
+          id={id}
+          title={title ?? design.name}
+          nodes={design.nodes || []}
+          edges={design.edges || []}
+          hrefLabel={'View in visualizer'}
+          linkTo={'visualiser'}
+          designId={design.id || id}
+          client:only="react"
+          showSearch={search}
+        />
+      </div>
+    </div>
+  )
+}
+
+<style is:global>
+  .react-flow__attribution {
+    display: none;
+  }
+</style>

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

@@ -14,6 +14,7 @@ import {
   useReactFlow,
   getNodesBounds,
   getViewportForBounds,
+  type NodeTypes,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { HistoryIcon } from 'lucide-react';
@@ -33,6 +34,11 @@ import DomainNode from './Nodes/Domain';
 import AnimatedMessageEdge from './Edges/AnimatedMessageEdge';
 import FlowEdge from './Edges/FlowEdge';
 import CustomNode from './Nodes/Custom';
+import DataNode from './Nodes/Data';
+import ViewNode from './Nodes/View';
+import ActorNode from './Nodes/Actor';
+import ExternalSystemNode2 from './Nodes/ExternalSystem2';
+import { Note as NoteNode } from '@eventcatalog/visualizer';
 
 import type { CollectionEntry } from 'astro:content';
 import { navigate } from 'astro:transitions/client';
@@ -58,6 +64,7 @@ interface Props {
   showFlowWalkthrough?: boolean;
   showSearch?: boolean;
   zoomOnScroll?: boolean;
+  designId?: string;
 }
 
 const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
@@ -79,21 +86,34 @@ const NodeGraphBuilder = ({
   zoomOnScroll = false,
 }: Props) => {
   const nodeTypes = useMemo(
-    () => ({
-      services: ServiceNode,
-      flows: FlowNode,
-      events: EventNode,
-      channels: ChannelNode,
-      queries: QueryNode,
-      commands: CommandNode,
-      domains: DomainNode,
-      step: StepNode,
-      user: UserNode,
-      actor: UserNode,
-      custom: CustomNode,
-      externalSystem: ExternalSystemNode,
-      entities: EntityNode,
-    }),
+    () =>
+      ({
+        service: ServiceNode,
+        services: ServiceNode,
+        flow: FlowNode,
+        flows: FlowNode,
+        event: EventNode,
+        events: EventNode,
+        channel: ChannelNode,
+        channels: ChannelNode,
+        query: QueryNode,
+        queries: QueryNode,
+        command: CommandNode,
+        commands: CommandNode,
+        domain: DomainNode,
+        domains: DomainNode,
+        step: StepNode,
+        user: UserNode,
+        custom: CustomNode,
+        externalSystem: ExternalSystemNode,
+        'external-system': ExternalSystemNode2,
+        entity: EntityNode,
+        entities: EntityNode,
+        data: DataNode,
+        view: ViewNode,
+        actor: ActorNode,
+        note: (props: any) => <NoteNode {...props} readOnly={true} />,
+      }) as unknown as NodeTypes,
     []
   );
   const edgeTypes = useMemo(
@@ -106,7 +126,6 @@ const NodeGraphBuilder = ({
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-  const [isAnimated, setIsAnimated] = useState(false);
   const [animateMessages, setAnimateMessages] = useState(false);
   const [activeStepIndex, setActiveStepIndex] = useState<number | null>(null);
 
@@ -560,6 +579,7 @@ const NodeGraphBuilder = ({
                   <CogIcon className="h-5 w-5 text-gray-600" />
                 </button>
               </div>
+
               {title && (
                 <span className="block shadow-sm bg-white text-xl z-10 text-black px-4 py-1.5 border-gray-200 rounded-md border opacity-80">
                   {title}
@@ -715,6 +735,7 @@ interface NodeGraphProps {
   showFlowWalkthrough?: boolean;
   showSearch?: boolean;
   zoomOnScroll?: boolean;
+  designId?: string;
 }
 
 const NodeGraph = ({
@@ -734,6 +755,7 @@ const NodeGraph = ({
   showFlowWalkthrough = true,
   showSearch = true,
   zoomOnScroll = false,
+  designId,
 }: NodeGraphProps) => {
   const [elem, setElem] = useState(null);
   const [showFooter, setShowFooter] = useState(true);
@@ -771,6 +793,7 @@ const NodeGraph = ({
             showFlowWalkthrough={showFlowWalkthrough}
             showSearch={showSearch}
             zoomOnScroll={zoomOnScroll}
+            designId={designId || id}
           />
 
           {showFooter && (