@eventcatalog/core 3.13.0 → 3.14.1

package/eventcatalog/src/components/Search/SearchDataLoader.astro

@@ -20,18 +20,30 @@
   if (!sidebarStore.get()) {
     const apiUrl = buildUrl('/api/sidebar-data.json', true);
 
-    fetch(apiUrl)
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(`Failed to fetch sidebar data: ${response.status}`);
-        }
-        return response.json();
-      })
-      .then((data) => {
-        setSidebarData(data);
-      })
-      .catch((error) => {
-        console.error('Error loading sidebar data:', error);
-      });
+    const loadSidebarData = () => {
+      // Double-check cache in case another component loaded data while waiting for idle
+      if (sidebarStore.get()) return;
+
+      fetch(apiUrl)
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`Failed to fetch sidebar data: ${response.status}`);
+          }
+          return response.json();
+        })
+        .then((data) => {
+          setSidebarData(data);
+        })
+        .catch((error) => {
+          console.error('Error loading sidebar data:', error);
+        });
+    };
+
+    // Defer non-critical sidebar payload fetch until browser is idle
+    if (typeof window.requestIdleCallback === 'function') {
+      window.requestIdleCallback(loadSidebarData, { timeout: 1200 });
+    } else {
+      setTimeout(loadSidebarData, 300);
+    }
   }
 </script>

package/eventcatalog/src/components/Search/SearchModal.tsx

@@ -24,8 +24,6 @@ import {
 } from '@heroicons/react/24/outline';
 import { StarIcon as StarIconSolid, CircleStackIcon } from '@heroicons/react/24/solid';
 import { useStore } from '@nanostores/react';
-import { sidebarStore } from '../../stores/sidebar-store';
-import type { NavNode } from '../../stores/sidebar-store/state';
 import { favoritesStore, toggleFavorite as toggleFavoriteAction } from '../../stores/favorites-store';
 import { buildUrl } from '@utils/url-builder';
 
@@ -99,11 +97,48 @@ const getUrlForItem = (node: any, key: string) => {
   return buildUrl(`/docs/${pluralType}/${id}/${version}`);
 };
 
+interface SearchNode {
+  key: string;
+  title: string;
+  badge?: string;
+  summary?: string;
+  href?: string;
+}
+
+interface SearchNodeCompact {
+  k: string;
+  t: string;
+  b?: string;
+  s?: string;
+  h?: string;
+}
+
+interface SearchIndexPayload {
+  i?: SearchNodeCompact[];
+  items?: SearchNode[];
+}
+
+const normalizeSearchIndexPayload = (payload: SearchIndexPayload): SearchNode[] => {
+  if (payload.i) {
+    return payload.i.map((item) => ({
+      key: item.k,
+      title: item.t,
+      badge: item.b,
+      summary: item.s,
+      href: item.h,
+    }));
+  }
+
+  return payload.items || [];
+};
+
 export default function SearchModal() {
   const [query, setQuery] = useState('');
   const [open, setOpen] = useState(false);
   const [activeFilter, setActiveFilter] = useState('all');
-  const data = useStore(sidebarStore);
+  const [searchNodes, setSearchNodes] = useState<SearchNode[]>([]);
+  const [isLoadingSearchIndex, setIsLoadingSearchIndex] = useState(false);
+  const [searchIndexLoadError, setSearchIndexLoadError] = useState<string | null>(null);
   const favorites = useStore(favoritesStore);
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -122,6 +157,34 @@ export default function SearchModal() {
     return () => window.removeEventListener('searchModalToggle', handleModalToggle as EventListener);
   }, []);
 
+  useEffect(() => {
+    if (!open || searchNodes.length > 0 || isLoadingSearchIndex) {
+      return;
+    }
+
+    setIsLoadingSearchIndex(true);
+    setSearchIndexLoadError(null);
+
+    const apiUrl = buildUrl('/api/search-index.json', true);
+
+    fetch(apiUrl)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`Failed to fetch search index: ${response.status}`);
+        }
+        return response.json() as Promise<SearchIndexPayload>;
+      })
+      .then((payload) => {
+        setSearchNodes(normalizeSearchIndexPayload(payload));
+      })
+      .catch((error) => {
+        setSearchIndexLoadError(error instanceof Error ? error.message : 'Unable to load search index');
+      })
+      .finally(() => {
+        setIsLoadingSearchIndex(false);
+      });
+  }, [open, searchNodes.length, isLoadingSearchIndex]);
+
   const closeModal = () => {
     if ((window as any).searchModalState) {
       (window as any).searchModalState.close();
@@ -131,30 +194,22 @@ export default function SearchModal() {
   };
 
   const items = useMemo(() => {
-    if (!data?.nodes) return [];
-
-    // Extract all items from nodes
-    const allItems = Object.entries(data.nodes)
-      .map(([key, node]) => {
-        // Skip reference entries (string values that point to other keys)
-        if (typeof node === 'string') return null;
-
-        const url = getUrlForItem(node, key);
+    return searchNodes
+      .map((node) => {
+        const url = getUrlForItem(node as any, node.key);
         if (!url) return null;
 
         return {
-          id: url, // Use URL as unique ID
+          id: url,
           name: node.title,
-          url: url,
+          url,
           type: node.badge || 'Page',
-          key: key,
+          key: node.key,
           rawNode: node,
         };
       })
       .filter((item): item is NonNullable<typeof item> => item !== null);
-
-    return allItems;
-  }, [data]);
+  }, [searchNodes]);
 
   // Get searchable items (items that match the query but not filtered by type yet)
   const searchableItems = useMemo(() => {
@@ -236,17 +291,9 @@ export default function SearchModal() {
     });
   };
 
-  // Helper to resolve a node, following references if needed
-  const resolveNode = (key: string) => {
-    if (!data?.nodes) return null;
-    const node = data.nodes[key];
-    if (!node) return null;
-    // If it's a string reference, follow it
-    if (typeof node === 'string') {
-      return data.nodes[node] as NavNode | undefined;
-    }
-    return node;
-  };
+  const searchNodeLookup = useMemo(() => {
+    return new Map(searchNodes.map((node) => [node.key, node]));
+  }, [searchNodes]);
 
   const filteredItems = useMemo(() => {
     if (query === '') {
@@ -255,18 +302,17 @@ export default function SearchModal() {
         return favorites
           .slice(0, 5)
           .map((fav) => {
-            const node = resolveNode(fav.nodeKey);
-            if (!node || typeof node === 'string') return null;
-            const url = getUrlForItem(node, fav.nodeKey);
+            const node = searchNodeLookup.get(fav.nodeKey);
+            const url = node ? getUrlForItem(node as any, fav.nodeKey) : fav.href;
             if (!url) return null;
 
             return {
               id: url,
               name: fav.title,
-              url: url,
-              type: fav.badge || 'Page',
+              url,
+              type: fav.badge || node?.badge || 'Page',
               key: fav.nodeKey,
-              rawNode: node,
+              rawNode: node || { title: fav.title, badge: fav.badge, summary: undefined },
               isFavorite: true,
             };
           })
@@ -290,7 +336,7 @@ export default function SearchModal() {
     }
 
     return result.slice(0, 50); // Limit results for performance
-  }, [searchableItems, query, activeFilter, favorites, data]);
+  }, [searchableItems, query, activeFilter, favorites, searchNodeLookup]);
 
   return (
     <Transition.Root
@@ -368,7 +414,23 @@ export default function SearchModal() {
                   ))}
                 </div>
 
-                {filteredItems.length > 0 && (
+                {isLoadingSearchIndex && (
+                  <div className="py-10 px-6 text-center text-sm sm:px-14">
+                    <MagnifyingGlassIcon className="mx-auto h-6 w-6 text-[rgb(var(--ec-icon-color))] animate-pulse" />
+                    <p className="mt-4 font-semibold text-[rgb(var(--ec-page-text))]">Loading search index…</p>
+                    <p className="mt-2 text-[rgb(var(--ec-page-text-muted))]">Preparing resources for search.</p>
+                  </div>
+                )}
+
+                {searchIndexLoadError && !isLoadingSearchIndex && (
+                  <div className="py-10 px-6 text-center text-sm sm:px-14">
+                    <ExclamationCircleIcon className="mx-auto h-6 w-6 text-red-500" />
+                    <p className="mt-4 font-semibold text-[rgb(var(--ec-page-text))]">Search unavailable</p>
+                    <p className="mt-2 text-[rgb(var(--ec-page-text-muted))]">{searchIndexLoadError}</p>
+                  </div>
+                )}
+
+                {!isLoadingSearchIndex && !searchIndexLoadError && filteredItems.length > 0 && (
                   <>
                     {query === '' && favorites.length > 0 && (
                       <div className="px-6 pt-3 pb-2">
@@ -462,7 +524,7 @@ export default function SearchModal() {
                   </>
                 )}
 
-                {query !== '' && filteredItems.length === 0 && (
+                {!isLoadingSearchIndex && !searchIndexLoadError && query !== '' && filteredItems.length === 0 && (
                   <div className="py-14 px-6 text-center text-sm sm:px-14">
                     <ExclamationCircleIcon
                       type="outline"
@@ -476,7 +538,7 @@ export default function SearchModal() {
                   </div>
                 )}
 
-                {query === '' && filteredItems.length === 0 && (
+                {!isLoadingSearchIndex && !searchIndexLoadError && query === '' && filteredItems.length === 0 && (
                   <div className="py-14 px-6 text-center text-sm sm:px-14">
                     <MagnifyingGlassIcon className="mx-auto h-6 w-6 text-[rgb(var(--ec-icon-color))]" />
                     <p className="mt-4 font-semibold text-[rgb(var(--ec-page-text))]">Search for anything</p>

package/eventcatalog/src/components/ThemeToggle.tsx

@@ -1,18 +1,26 @@
 import { useStore } from '@nanostores/react';
+import { useEffect, useState } from 'react';
 import { Moon, Sun } from 'lucide-react';
 import { themeStore, toggleTheme } from '@stores/theme-store';
 
 export default function ThemeToggle() {
   const theme = useStore(themeStore);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const label = mounted ? `Switch to ${theme === 'light' ? 'dark' : 'light'} mode` : 'Toggle theme';
 
   return (
     <button
       onClick={toggleTheme}
       className="p-2 rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-icon-hover))] hover:bg-[rgb(var(--ec-dropdown-hover))] transition-colors"
-      aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
-      title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+      aria-label={label}
+      title={label}
     >
-      {theme === 'light' ? <Moon className="w-5 h-5" /> : <Sun className="w-5 h-5" />}
+      {!mounted ? <Moon className="w-5 h-5" /> : theme === 'light' ? <Moon className="w-5 h-5" /> : <Sun className="w-5 h-5" />}
     </button>
   );
 }

package/eventcatalog/src/content.config.ts

@@ -147,6 +147,7 @@ const baseSchema = z.object({
           type: z.enum(['openapi', 'asyncapi', 'graphql']),
           path: z.string(),
           name: z.string().optional(),
+          headers: z.record(z.string()).optional(),
         })
       ),
     ])

package/eventcatalog/src/enterprise/api/catalog.ts

@@ -0,0 +1,22 @@
+import type { APIRoute } from 'astro';
+import utils from '@eventcatalog/sdk';
+import { isSSR } from '@utils/feature';
+
+/**
+ * Route that dumps the whole catalog as JSON (without markdown)
+ * Experimental API
+ *
+ * This route is injected only when `api.fullCatalogAPIEnabled` is true.
+ */
+export const GET: APIRoute = async () => {
+  const { dumpCatalog } = utils(process.env.PROJECT_DIR || '');
+  const catalog = await dumpCatalog({ includeMarkdown: false });
+
+  return new Response(JSON.stringify(catalog), {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+export const prerender = !isSSR();

package/eventcatalog/src/pages/api/search-index.json.ts

@@ -0,0 +1,46 @@
+import type { APIRoute } from 'astro';
+import { getNestedSideBarData } from '@stores/sidebar-store/state';
+
+const isDev = import.meta.env.DEV;
+
+interface SearchIndexItemCompact {
+  k: string;
+  t: string;
+  b?: string;
+  s?: string;
+  h?: string;
+}
+
+const SKIPPED_PREFIXES = ['list:'];
+
+export const GET: APIRoute = async () => {
+  const sidebarData = await getNestedSideBarData();
+
+  const items = Object.entries(sidebarData.nodes).reduce<SearchIndexItemCompact[]>((acc, [key, node]) => {
+    if (typeof node === 'string') return acc;
+    if (SKIPPED_PREFIXES.some((prefix) => key.startsWith(prefix))) return acc;
+    if (!node.title) return acc;
+
+    acc.push({
+      k: key,
+      t: node.title,
+      ...(node.badge ? { b: node.badge } : {}),
+      ...(node.summary ? { s: node.summary } : {}),
+      ...(node.href ? { h: node.href } : {}),
+    });
+
+    return acc;
+  }, []);
+
+  return new Response(JSON.stringify({ i: items }), {
+    headers: {
+      'Content-Type': 'application/json',
+      'Cache-Control': isDev
+        ? 'no-cache, no-store, must-revalidate'
+        : 'public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400',
+      Vary: 'Accept-Encoding',
+    },
+  });
+};
+
+export const prerender = !isDev;

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/asyncapi/[filename].astro

@@ -5,6 +5,8 @@ import { Parser } from '@asyncapi/parser';
 import { AvroSchemaParser } from '@asyncapi/avro-schema-parser';
 import fs from 'fs';
 
+import { isSameOrigin, resolveHeaders } from '@utils/remote-spec';
+
 import '@asyncapi/react-component/styles/default.min.css';
 import js from '@asyncapi/react-component/browser/standalone/without-parser.js?url';
 import { AsyncApiComponentWP, type ConfigInterface } from '@asyncapi/react-component';
@@ -19,7 +21,7 @@ export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
 // Get data
-const { collection, data, filePath, filename, path: relativeSpecPath } = await Page.getData(Astro);
+const { collection, data, filePath, filename, path: relativeSpecPath, headers = {} } = await Page.getData(Astro);
 
 const fileName = filename || 'asyncapi.yaml';
 const pathToSpec = getAbsoluteFilePathForAstroFile(filePath, fileName);
@@ -27,18 +29,62 @@ const fileExists = fs.existsSync(pathToSpec);
 const isRemote = relativeSpecPath.includes('https://');
 let content = '';
 
+const allowAnyEnvInSpecHeaders = Config?.asyncAPI?.allowAnyEnvInSpecHeaders ?? false;
+const resolvedHeaders = resolveHeaders(headers, { allowAnyEnvInHeaders: allowAnyEnvInSpecHeaders });
+
 if (fileExists && !isRemote) {
   content = fs.readFileSync(pathToSpec, 'utf8');
 }
 
 if (isRemote) {
-  // Fetch the content from the remote path
-  content = await fetch(relativeSpecPath).then((res) => res.text());
+  const response = await fetch(relativeSpecPath, { headers: resolvedHeaders });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch AsyncAPI spec: ${response.status} ${response.statusText}`);
+  }
+
+  content = await response.text();
 }
 
-// AsyncAPI parser will parser schemas for users, they can turn this off.
+// AsyncAPI parser will parse schemas for users, they can turn this off.
 const parseSchemas = Config?.asyncAPI?.renderParsedSchemas ?? true;
-const parsed = await new Parser({ schemaParsers: [AvroSchemaParser()] }).parse(content, { parseSchemas });
+const parserOptions: NonNullable<Parameters<Parser['parse']>[1]> = {
+  parseSchemas,
+  source: isRemote ? relativeSpecPath : pathToSpec,
+};
+
+if (isRemote && Object.keys(resolvedHeaders).length > 0) {
+  // NOTE: AsyncAPI parser exposes resolver wiring via __unstable.
+  // Keep this isolated so parser upgrades can adjust in one place.
+  const resolverWithHeaders = {
+    canRead: true,
+    read: async (uri: { toString: () => string }) => {
+      const targetUrl = uri.toString();
+      const shouldForwardHeaders = isSameOrigin(relativeSpecPath, targetUrl);
+
+      const response = await fetch(targetUrl, {
+        headers: shouldForwardHeaders ? resolvedHeaders : undefined,
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch reference: ${response.status} ${response.statusText}`);
+      }
+
+      return response.text();
+    },
+  };
+
+  parserOptions.__unstable = {
+    resolver: {
+      resolvers: [
+        { schema: 'https', ...resolverWithHeaders },
+        { schema: 'http', ...resolverWithHeaders },
+      ],
+    },
+  };
+}
+
+const parsed = await new Parser({ schemaParsers: [AvroSchemaParser()] }).parse(content, parserOptions);
 const stringified = parsed.document?.json();
 const config: ConfigInterface = { show: { sidebar: true, errors: true } };
 

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/spec/_OpenAPI.tsx

@@ -1,8 +1,11 @@
-import { useState, useEffect } from 'react';
-import { ApiReferenceReact } from '@scalar/api-reference-react';
+import { useState, useEffect, lazy, Suspense } from 'react';
 import '@scalar/api-reference-react/style.css';
 import './_styles.css';
 
+const ApiReferenceReact = lazy(() =>
+  import('@scalar/api-reference-react').then((module) => ({ default: module.ApiReferenceReact }))
+);
+
 const OpenAPISpec = ({ spec }: { spec: string }) => {
   const [loaded, setLoaded] = useState(false);
   const [isDarkMode, setIsDarkMode] = useState(() => {
@@ -31,25 +34,27 @@ const OpenAPISpec = ({ spec }: { spec: string }) => {
   return (
     <div>
       {!loaded && <div>Loading...</div>}
-      <ApiReferenceReact
-        key={isDarkMode ? 'dark' : 'light'}
-        configuration={{
-          spec: {
-            content: spec,
-          },
-          theme: 'fastify',
-          hideClientButton: true,
-          onLoaded: () => {
-            setLoaded(true);
-          },
-          forceDarkModeState: isDarkMode ? 'dark' : 'light',
-          darkMode: isDarkMode,
-          defaultOpenAllTags: true,
-          hideDarkModeToggle: true,
-          searchHotKey: 'p',
-          showSidebar: true,
-        }}
-      />
+      <Suspense fallback={<div>Loading OpenAPI reference...</div>}>
+        <ApiReferenceReact
+          key={isDarkMode ? 'dark' : 'light'}
+          configuration={{
+            spec: {
+              content: spec,
+            },
+            theme: 'fastify',
+            hideClientButton: true,
+            onLoaded: () => {
+              setLoaded(true);
+            },
+            forceDarkModeState: isDarkMode ? 'dark' : 'light',
+            darkMode: isDarkMode,
+            defaultOpenAllTags: true,
+            hideDarkModeToggle: true,
+            searchHotKey: 'p',
+            showSidebar: true,
+          }}
+        />
+      </Suspense>
     </div>
   );
 };

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

@@ -1,5 +1,5 @@
 import { HybridPage } from '@utils/page-loaders/hybrid-page';
-import { isAuthEnabled } from '@utils/feature';
+import { isAuthEnabled, isVisualiserEnabled } from '@utils/feature';
 import { getServices, type Service } from '@utils/collections/services';
 
 const serviceHasData = (service: Service) => {
@@ -8,7 +8,7 @@ const serviceHasData = (service: Service) => {
 
 export class Page extends HybridPage {
   static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
-    if (isAuthEnabled()) {
+    if (isAuthEnabled() || !isVisualiserEnabled()) {
       return [];
     }
 
@@ -33,7 +33,7 @@ export class Page extends HybridPage {
   protected static async fetchData(params: any) {
     const { id, version } = params;
 
-    if (!id || !version) {
+    if (!id || !version || !isVisualiserEnabled()) {
       return null;
     }
 
@@ -58,7 +58,7 @@ export class Page extends HybridPage {
   }
 
   static get clientAuthScript(): string {
-    if (!isAuthEnabled()) {
+    if (!isAuthEnabled() || !isVisualiserEnabled()) {
       return '';
     }
 

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

@@ -19,8 +19,13 @@ const {
 ---
 
 <VisualiserLayout title={`Visualiser | ${props.data.name} (${props.collection})`} description={props.data.summary}>
-  <div class="bg-gray-100/50 m-4">
-    <div class="h-[calc(100vh-130px)] w-full relative border border-gray-200" id={`${id}-portal`} transition:animate="fade"></div>
+  <div class="m-4">
+    <div
+      class="h-[calc(100vh-130px)] w-full relative border border-[rgb(var(--ec-page-border))] rounded-md"
+      id={`${id}-portal`}
+      transition:animate="fade"
+    >
+    </div>
     <NodeGraph
       id={id}
       collection={`${collection}-containers`}

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

@@ -20,8 +20,13 @@ const {
 ---
 
 <VisualiserLayout title={`Visualiser | ${props.data.name} (${props.collection})`} description={props.data.summary}>
-  <div class="bg-gray-100/50 m-4">
-    <div class="h-[calc(100vh-130px)] w-full relative border border-gray-200" id={`${id}-portal`} transition:animate="fade"></div>
+  <div class="m-4">
+    <div
+      class="h-[calc(100vh-130px)] w-full relative border border-[rgb(var(--ec-page-border))] rounded-md"
+      id={`${id}-portal`}
+      transition:animate="fade"
+    >
+    </div>
     <NodeGraph
       id={id}
       collection={collection}

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

@@ -8,8 +8,13 @@ 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';
 
 export async function getStaticPaths() {
+  if (!isVisualiserEnabled()) {
+    return [];
+  }
+
   const [events, commands, services, domains, containers] = await Promise.all([
     getEvents(),
     getCommands(),

package/eventcatalog/src/pages/visualiser/context-map/index.astro

@@ -5,9 +5,9 @@ import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 ---
 
 <VerticalSideBarLayout title={`Visualiser | Bounded context map`}>
-  <div class="bg-gray-100/50 m-4">
+  <div class="m-4">
     <div
-      class="h-[calc(100vh-130px)] w-full relative border border-gray-200"
+      class="h-[calc(100vh-130px)] w-full relative border border-[rgb(var(--ec-page-border))] rounded-md"
       id={`domain-context-map-portal`}
       transition:animate="fade"
     >

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

@@ -1,9 +1,9 @@
 import { HybridPage } from '@utils/page-loaders/hybrid-page';
-import { isAuthEnabled } from '@utils/feature';
+import { isAuthEnabled, isVisualiserEnabled } from '@utils/feature';
 
 export class Page extends HybridPage {
   static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
-    if (isAuthEnabled()) {
+    if (isAuthEnabled() || !isVisualiserEnabled()) {
       return [];
     }
 
@@ -26,7 +26,7 @@ export class Page extends HybridPage {
   protected static async fetchData(params: any) {
     const { id } = params;
 
-    if (!id) {
+    if (!id || !isVisualiserEnabled()) {
       return null;
     }
 
@@ -53,7 +53,7 @@ export class Page extends HybridPage {
   }
 
   static get clientAuthScript(): string {
-    if (!isAuthEnabled()) {
+    if (!isAuthEnabled() || !isVisualiserEnabled()) {
       return '';
     }
 

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

@@ -17,8 +17,12 @@ const { data } = props;
 ---
 
 <VerticalSideBarLayout title={`Visualiser | Bounded context map`}>
-  <div class="bg-gray-100/50 m-4">
-    <div class="h-[calc(100vh-130px)] w-full relative border border-gray-200" id={`${data.id}-portal`} transition:animate="fade">
+  <div class="m-4">
+    <div
+      class="h-[calc(100vh-130px)] w-full relative border border-[rgb(var(--ec-page-border))] rounded-md"
+      id={`${data.id}-portal`}
+      transition:animate="fade"
+    >
     </div>
     <AstroNodeGraph
       id={data.id}