@eventcatalog/core 3.17.5 → 3.18.0

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -299,7 +299,7 @@ const canPageBeEmbedded = isEmbedEnabled();
       <div class="flex">
         <aside class="flex" id="eventcatalog-vertical-nav">
           <div
-            class="fixed flex flex-col items-center w-14 h-screen py-3 bg-[rgb(var(--ec-sidebar-bg))] bg-gradient-to-b from-[rgb(var(--ec-sidebar-bg))] to-[rgb(var(--ec-sidebar-bg-gradient))] border-r border-[rgb(var(--ec-sidebar-border))] z-20 shadow-md justify-between"
+            class="fixed flex flex-col items-center w-14 h-screen py-3 bg-[rgb(var(--ec-sidebar-bg))] bg-gradient-to-t from-[rgb(var(--ec-accent)/0.08)] to-[rgb(var(--ec-sidebar-bg))] border-r border-[rgb(var(--ec-sidebar-border))] z-20 shadow-md justify-between"
           >
             <nav class="flex flex-col h-[calc(100vh-70px)] justify-between">
               <div class="flex flex-col items-center flex-1 space-y-6">
@@ -333,30 +333,6 @@ const canPageBeEmbedded = isEmbedEnabled();
 
                 <hr class="w-8 border-t border-[rgb(var(--ec-sidebar-border))]" />
 
-                {
-                  studioNavigationItem.length > 0 && (
-                    <a
-                      id={studioNavigationItem[0].id}
-                      data-role="nav-item"
-                      href={studioNavigationItem[0].href}
-                      aria-label={studioNavigationItem[0].label}
-                      class={`p-1.5 inline-block pt-1 pb-1 mt-0 mb-0 transition-colors duration-200 rounded-lg relative ${studioNavigationItem[0].current ? 'text-[rgb(var(--ec-sidebar-active-text))] bg-[rgb(var(--ec-sidebar-active-bg))]' : 'hover:bg-[rgb(var(--ec-sidebar-hover-bg))] hover:text-[rgb(var(--ec-sidebar-active-text))] text-[rgb(var(--ec-sidebar-text))]'}`}
-                    >
-                      <div class="has-tooltip">
-                        <span
-                          class="tooltip rounded shadow-lg p-1 text-xs bg-gray-900 text-white ml-10 whitespace-nowrap"
-                          aria-hidden="true"
-                        >
-                          {studioNavigationItem[0].label}
-                        </span>
-                        <SquareDashedMousePointerIcon className="h-6 w-6" aria-hidden="true" />
-                      </div>
-                    </a>
-                  )
-                }
-
-                {studioNavigationItem.length > 0 && <hr class="w-8 border-t border-[rgb(var(--ec-sidebar-border))]" />}
-
                 {
                   premiumFeatures.map((item) => (
                     <a
@@ -420,7 +396,7 @@ const canPageBeEmbedded = isEmbedEnabled();
             showNestedSideBar && (
               <SideNav
                 id="sidebar"
-                class={`sidebar-transition h-content bg-[rgb(var(--ec-sidebar-bg))] border-r border-[rgb(var(--ec-sidebar-border))] w-[320px] ml-14`}
+                class={`sidebar-transition h-content bg-[rgb(var(--ec-sidebar-bg))] bg-gradient-to-bl from-[rgb(var(--ec-sidebar-bg))] via-[rgb(var(--ec-sidebar-bg))] to-[rgb(var(--ec-accent)/0.08)] border-r border-[rgb(var(--ec-sidebar-border))] w-[320px] ml-14`}
               />
             )
           }

package/eventcatalog/src/pages/_index.astro

@@ -1,36 +1,38 @@
 ---
 import { buildUrl } from '@utils/url-builder';
-import {
-  ChatBubbleLeftIcon,
-  RectangleGroupIcon,
-  ServerIcon,
-  CodeBracketIcon,
-  DocumentTextIcon,
-  ArrowRightIcon,
-  PlusIcon,
-} from '@heroicons/react/24/outline';
+import { ArrowRightIcon, PlusIcon } from '@heroicons/react/24/outline';
 import config from '@config';
 
-import { getMessages } from '@utils/collections/messages';
-import { getDomains } from '@utils/collections/domains';
-import { getServices } from '@utils/collections/services';
-import { getFlows } from '@utils/collections/flows';
+import { getCollection } from 'astro:content';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
-import { BookOpenText, Workflow, TableProperties, BookUser, Zap, Terminal, Code2, FileJson } from 'lucide-react';
+import { BookOpenText, Workflow, TableProperties, BookUser, Code2, FileJson } from 'lucide-react';
 
-const { commands = [], events = [], queries = [] } = await getMessages({ getAllVersions: false });
-const messages = [...events, ...queries, ...commands];
-const domains = await getDomains({ getAllVersions: false });
-const services = await getServices({ getAllVersions: false });
-const flows = await getFlows({ getAllVersions: false });
+// Lightweight data fetch: only raw collections, no hydration.
+// The homepage only needs counts + one item per type for default URLs.
+const [allDomains, allServices, allEvents, allCommands, allQueries, allFlows] = await Promise.all([
+  getCollection('domains'),
+  getCollection('services'),
+  getCollection('events'),
+  getCollection('commands'),
+  getCollection('queries'),
+  getCollection('flows'),
+]);
+
+const isCurrentVersion = (item: { data: { hidden?: boolean }; filePath?: string }) =>
+  item.data.hidden !== true && !item.filePath?.includes('versioned');
+
+const domains = allDomains.filter(isCurrentVersion);
+const services = allServices.filter(isCurrentVersion);
+const messages = [...allEvents, ...allCommands, ...allQueries].filter(isCurrentVersion);
+const flows = allFlows.filter(isCurrentVersion);
 
 // Check if catalog has content
 const hasContent = domains.length > 0 || services.length > 0 || messages.length > 0 || flows.length > 0;
 
 const getDefaultUrl = (route: string, defaultValue: string) => {
-  if (domains.length > 0) return buildUrl(`/${route}/domains/${domains[0].data.id}/${domains[0].data.latestVersion}`);
-  if (services.length > 0) return buildUrl(`/${route}/services/${services[0].data.id}/${services[0].data.latestVersion}`);
-  if (flows.length > 0) return buildUrl(`/${route}/flows/${flows[0].data.id}/${flows[0].data.latestVersion}`);
+  if (domains.length > 0) return buildUrl(`/${route}/domains/${domains[0].data.id}/${domains[0].data.version}`);
+  if (services.length > 0) return buildUrl(`/${route}/services/${services[0].data.id}/${services[0].data.version}`);
+  if (flows.length > 0) return buildUrl(`/${route}/flows/${flows[0].data.id}/${flows[0].data.version}`);
   return buildUrl(defaultValue);
 };
 
@@ -40,10 +42,9 @@ const topTiles = [
     count: domains.length,
     description: 'Business domains',
     href: buildUrl('/discover/domains'),
-    icon: RectangleGroupIcon,
-    bgColor: 'bg-yellow-500',
-    borderColor: 'border-yellow-200',
-    textColor: 'text-yellow-600',
+    badgeBg: 'bg-[rgb(var(--ec-badge-domain-bg))]',
+    badgeText: 'text-[rgb(var(--ec-badge-domain-text))]',
+    glowColor: 'var(--ec-badge-domain-text)',
     emptyText: 'No domains yet',
     addHref: 'https://www.eventcatalog.dev/docs/domains',
   },
@@ -52,10 +53,9 @@ const topTiles = [
     count: services.length,
     description: 'Documented services',
     href: buildUrl('/discover/services'),
-    icon: ServerIcon,
-    bgColor: 'bg-pink-500',
-    borderColor: 'border-pink-200',
-    textColor: 'text-pink-600',
+    badgeBg: 'bg-[rgb(var(--ec-badge-service-bg))]',
+    badgeText: 'text-[rgb(var(--ec-badge-service-text))]',
+    glowColor: 'var(--ec-badge-service-text)',
     emptyText: 'No services yet',
     addHref: 'https://www.eventcatalog.dev/docs/services',
   },
@@ -64,10 +64,9 @@ const topTiles = [
     count: messages.length,
     description: 'Events, commands & queries',
     href: buildUrl('/discover/events'),
-    icon: ChatBubbleLeftIcon,
-    bgColor: 'bg-blue-500',
-    borderColor: 'border-blue-200',
-    textColor: 'text-blue-600',
+    badgeBg: 'bg-[rgb(var(--ec-badge-message-bg))]',
+    badgeText: 'text-[rgb(var(--ec-badge-message-text))]',
+    glowColor: 'var(--ec-badge-message-text)',
     emptyText: 'No messages yet',
     addHref: 'https://www.eventcatalog.dev/docs/messages',
   },
@@ -76,10 +75,9 @@ const topTiles = [
     count: flows.length,
     description: 'Business flows',
     href: buildUrl('/discover/flows'),
-    icon: Workflow,
-    bgColor: 'bg-[rgb(var(--ec-accent))]',
-    borderColor: 'border-[rgb(var(--ec-accent)/0.3)]',
-    textColor: 'text-[rgb(var(--ec-accent))]',
+    badgeBg: 'bg-[rgb(var(--ec-badge-query-bg))]',
+    badgeText: 'text-[rgb(var(--ec-badge-query-text))]',
+    glowColor: 'var(--ec-badge-query-text)',
     emptyText: 'No flows yet',
     addHref: 'https://www.eventcatalog.dev/docs/flows',
   },
@@ -88,52 +86,58 @@ const topTiles = [
 const quickActions = [
   {
     title: 'Documentation',
-    description: 'Browse all documented resources',
+    description: 'Explore all your events, commands, queries, and services in one place.',
     icon: BookOpenText,
     href: getDefaultUrl('docs', 'domains'),
     iconBg: 'bg-blue-50 dark:bg-blue-500/10',
     iconColor: 'text-blue-600 dark:text-blue-400',
+    span: 'lg:col-span-2',
   },
   {
     title: 'Visualizer',
-    description: 'Interactive architecture diagrams',
+    description: 'Visualize service relationships and message flows across your architecture.',
     icon: Workflow,
     href: getDefaultUrl('visualiser', 'domains'),
     iconBg: 'bg-[rgb(var(--ec-accent-subtle))]',
     iconColor: 'text-[rgb(var(--ec-accent))]',
+    span: '',
   },
   {
     title: 'Discover',
-    description: 'Search and filter all resources',
+    description: 'Quickly find any event, service, or team across your entire catalog.',
     icon: TableProperties,
     href: buildUrl('/discover/events'),
     iconBg: 'bg-teal-50 dark:bg-teal-500/10',
     iconColor: 'text-teal-600 dark:text-teal-400',
+    span: '',
   },
   {
     title: 'Schema Explorer',
-    description: 'Browse and compare schemas',
+    description: 'Track schema evolution, compare versions, and catch breaking changes.',
     icon: FileJson,
     href: buildUrl('/schemas/explorer'),
     iconBg: 'bg-amber-50 dark:bg-amber-500/10',
     iconColor: 'text-amber-600 dark:text-amber-400',
+    span: '',
   },
   {
     title: 'Team Directory',
-    description: 'Ownership & contacts',
+    description: 'See who owns what — find team contacts and service ownership at a glance.',
     icon: BookUser,
     href: buildUrl('/directory/users'),
     iconBg: 'bg-orange-50 dark:bg-orange-500/10',
     iconColor: 'text-orange-600 dark:text-orange-400',
+    span: '',
   },
   {
     title: 'API & SDK',
-    description: 'Programmatic access',
+    description: 'Query and manage your catalog programmatically with a fully-typed SDK.',
     icon: Code2,
     href: 'https://www.eventcatalog.dev/docs/sdk',
     iconBg: 'bg-indigo-50 dark:bg-indigo-500/10',
     iconColor: 'text-indigo-600 dark:text-indigo-400',
     external: true,
+    span: 'lg:col-span-2',
   },
 ];
 ---
@@ -141,83 +145,50 @@ const quickActions = [
 <VerticalSideBarLayout title="EventCatalog">
   <div class="min-h-screen font-inter">
     <!-- Hero Section -->
-    <div class="relative bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border-b border-[rgb(var(--ec-page-border))]">
-      <main class="container px-6 lg:px-8 mx-auto py-10 max-w-[85em]">
-        <div class="max-w-3xl">
-          <h1 class="text-3xl md:text-4xl font-bold mb-3 text-[rgb(var(--ec-page-text))] tracking-tight">
-            {config?.organizationName || 'EventCatalog'}
-          </h1>
-          <p class="text-base text-[rgb(var(--ec-page-text-muted))] leading-relaxed mb-6">
-            {
-              config.tagline ||
-                'Explore and understand your event-driven architecture. Browse documentation, visualize dependencies, and discover how your systems communicate.'
-            }
-          </p>
-
-          <!-- Primary CTAs -->
-          <div class="flex flex-wrap items-center gap-3">
-            <a
-              href={getDefaultUrl('docs', 'domains')}
-              class="inline-flex items-center gap-2 px-5 py-2.5 bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))] rounded-lg font-medium hover:bg-[rgb(var(--ec-button-bg-hover))] transition-colors"
-            >
-              <BookOpenText className="w-4 h-4" />
-              Explore Docs
-            </a>
-            <a
-              href={getDefaultUrl('visualiser', 'domains')}
-              class="inline-flex items-center gap-2 px-5 py-2.5 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] text-[rgb(var(--ec-page-text))] border border-[rgb(var(--ec-page-border))] rounded-lg font-medium hover:bg-[rgb(var(--ec-content-hover))] hover:border-[rgb(var(--ec-accent))] transition-colors"
-            >
-              <Workflow className="w-4 h-4" />
-              View Architecture
-            </a>
+    <div class="relative">
+      <main class="px-6 lg:px-8 pt-10 pb-8 max-w-[85em]">
+        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+          <div>
+            <h1 class="text-2xl md:text-3xl font-bold mb-1 text-[rgb(var(--ec-page-text))] tracking-tight">
+              Welcome to <span class="italic text-[rgb(var(--ec-accent))]">{config?.organizationName || 'EventCatalog'}</span>
+            </h1>
+            <p class="text-sm text-[rgb(var(--ec-page-text-muted))] leading-relaxed">
+              {config.tagline || 'Explore and understand your event-driven architecture'}
+            </p>
           </div>
         </div>
       </main>
     </div>
 
     <!-- Main Content -->
-    <main class="container px-6 lg:px-8 mx-auto py-8 max-w-[85em]">
-      <!-- Architecture Stats -->
+    <main class="px-6 lg:px-8 pb-8 max-w-[85em]">
+      <!-- Stat Cards -->
       <section class="mb-10">
-        <div class="flex items-center justify-between mb-4">
-          <h2 class="text-sm font-semibold uppercase tracking-wider text-[rgb(var(--ec-page-text-muted))]">Your Catalog</h2>
-          {
-            hasContent && (
-              <a
-                href={buildUrl('/discover/events')}
-                class="text-sm text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] flex items-center gap-1"
-              >
-                View all
-                <ArrowRightIcon className="w-3 h-3" />
-              </a>
-            )
-          }
-        </div>
         <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
           {
             topTiles.map((tile: any) =>
               tile.count > 0 ? (
                 <a
                   href={tile.href}
-                  class={`group relative bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] p-5 rounded-xl border border-[rgb(var(--ec-page-border))] hover:border-t-[rgb(var(--ec-accent))] hover:border-r-[rgb(var(--ec-accent))] hover:border-b-[rgb(var(--ec-accent))] hover:shadow-sm transition-all`}
+                  class="ec-stat-card group relative overflow-hidden bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] p-5 rounded-xl border transition-all"
+                  style={`--glow-color: rgb(${tile.glowColor}); border-color: rgb(${tile.glowColor} / 0.2);`}
                 >
-                  <div class={`absolute left-0 top-0 bottom-0 w-1 ${tile.bgColor} rounded-l-xl`} />
-                  <div class="flex items-start justify-between mb-3">
-                    <div class={`p-2 rounded-lg ${tile.iconBg || 'bg-[rgb(var(--ec-content-hover))]'}`}>
-                      <tile.icon className={`w-4 h-4 ${tile.textColor}`} />
-                    </div>
-                    <ArrowRightIcon className="w-4 h-4 text-[rgb(var(--ec-icon-color))] group-hover:text-[rgb(var(--ec-page-text-muted))] transition-colors" />
+                  <div class="flex items-center justify-between mb-4">
+                    <span
+                      class={`inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-semibold ${tile.badgeBg} ${tile.badgeText}`}
+                    >
+                      {tile.title}
+                    </span>
                   </div>
-                  <div class="text-2xl font-bold text-[rgb(var(--ec-page-text))] mb-0.5">{tile.count}</div>
+                  <div class="text-3xl font-bold text-[rgb(var(--ec-page-text))] mb-1">{tile.count}</div>
                   <div class="text-sm text-[rgb(var(--ec-page-text-muted))]">{tile.description}</div>
                 </a>
               ) : (
-                <div class="relative bg-[rgb(var(--ec-content-hover))] p-5 rounded-xl border border-dashed border-[rgb(var(--ec-page-border))]">
-                  <div class={`absolute left-0 top-0 bottom-0 w-1 bg-[rgb(var(--ec-icon-color))] rounded-l-xl`} />
-                  <div class="flex items-start justify-between mb-3">
-                    <div class="p-2 rounded-lg bg-[rgb(var(--ec-content-hover))]">
-                      <tile.icon className="w-4 h-4 text-[rgb(var(--ec-icon-color))]" />
-                    </div>
+                <div class="relative overflow-hidden bg-[rgb(var(--ec-content-hover))] p-5 rounded-xl border border-dashed border-[rgb(var(--ec-page-border))]">
+                  <div class="flex items-center justify-between mb-4">
+                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-semibold bg-[rgb(var(--ec-badge-default-bg))] text-[rgb(var(--ec-badge-default-text))]">
+                      {tile.title}
+                    </span>
                   </div>
                   <div class="text-sm font-medium text-[rgb(var(--ec-page-text-muted))] mb-2">{tile.emptyText}</div>
                   <a
@@ -237,20 +208,26 @@ const quickActions = [
 
       <!-- Explore Section - Full Width -->
       <section class="mb-10">
-        <h2 class="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-4">Explore</h2>
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div class="flex items-center gap-4 mb-4">
+          <h2 class="text-sm font-semibold uppercase tracking-wider text-[rgb(var(--ec-page-text-muted))] flex-shrink-0">
+            Explore
+          </h2>
+          <div class="flex-1 h-px bg-[rgb(var(--ec-page-border))]"></div>
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
           {
             quickActions.map((action: any) => (
               <a
                 href={action.href}
                 target={action.external ? '_blank' : undefined}
-                class="group flex items-start gap-4 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] p-5 rounded-xl border border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-accent))] hover:shadow-sm transition-all"
+                class={`ec-stat-card group flex flex-col bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] p-6 rounded-xl border border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-accent)/0.5)] transition-all min-h-[160px] ${action.span}`}
+                style="--glow-color: rgb(var(--ec-accent));"
               >
-                <div class={`${action.iconBg} p-3 rounded-xl flex-shrink-0`}>
-                  <action.icon className={`w-5 h-5 ${action.iconColor}`} />
-                </div>
-                <div class="flex-1 min-w-0 pt-0.5">
-                  <div class="font-semibold text-[rgb(var(--ec-page-text))] mb-1 flex items-center gap-1.5">
+                <div class="flex items-center gap-3 mb-3">
+                  <div class={`${action.iconBg} p-2.5 rounded-lg`}>
+                    <action.icon className={`w-5 h-5 ${action.iconColor}`} />
+                  </div>
+                  <span class="font-semibold text-[rgb(var(--ec-page-text))] flex items-center gap-1.5">
                     {action.title}
                     {action.external && (
                       <svg
@@ -267,9 +244,9 @@ const quickActions = [
                         />
                       </svg>
                     )}
-                  </div>
-                  <div class="text-sm text-[rgb(var(--ec-page-text-muted))] leading-relaxed">{action.description}</div>
+                  </span>
                 </div>
+                <p class="text-sm text-[rgb(var(--ec-page-text-muted))] leading-relaxed">{action.description}</p>
               </a>
             ))
           }
@@ -336,3 +313,51 @@ const quickActions = [
     </main>
   </div>
 </VerticalSideBarLayout>
+
+<style is:global>
+  .ec-stat-card {
+    position: relative;
+  }
+  .ec-stat-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    transition: opacity 0.3s ease;
+    opacity: 0;
+    pointer-events: none;
+    z-index: 0;
+  }
+  /* Dark mode: radial glow that follows cursor */
+  :root[data-theme='dark'] .ec-stat-card::before {
+    background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--glow-color) 0%, transparent 70%);
+  }
+  :root[data-theme='dark'] .ec-stat-card:hover::before {
+    opacity: 0.15;
+  }
+  /* Light mode: subtle solid background */
+  :root:not([data-theme='dark']) .ec-stat-card::before,
+  :root[data-theme='light'] .ec-stat-card::before {
+    background: rgb(var(--ec-content-hover));
+  }
+  :root:not([data-theme='dark']) .ec-stat-card:hover::before,
+  :root[data-theme='light'] .ec-stat-card:hover::before {
+    opacity: 1;
+  }
+  .ec-stat-card > * {
+    position: relative;
+    z-index: 1;
+  }
+</style>
+
+<script>
+  document.querySelectorAll('.ec-stat-card').forEach((card) => {
+    card.addEventListener('mousemove', (e) => {
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      const x = (e as MouseEvent).clientX - rect.left;
+      const y = (e as MouseEvent).clientY - rect.top;
+      (e.currentTarget as HTMLElement).style.setProperty('--mouse-x', `${x}px`);
+      (e.currentTarget as HTMLElement).style.setProperty('--mouse-y', `${y}px`);
+    });
+  });
+</script>

package/eventcatalog/src/pages/index.astro

@@ -1,9 +1,6 @@
 ---
 import Footer from '@layouts/Footer.astro';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
-import components from '@components/MDX/page-components';
-import mdxComponents from '@components/MDX/components';
-import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
 import { getMDXComponentsByName } from '@utils/markdown';
 import { resourceToCollectionMap } from '@utils/collections/util';
 import { buildUrl } from '@utils/url-builder';
@@ -13,6 +10,8 @@ import config from '@config';
 
 let nodeGraphs: any[] = [];
 let CustomContent = null;
+let NodeGraph = null;
+let customHomepageComponents: Record<string, any> = {};
 
 import path from 'path';
 import { existsSync, readFileSync } from 'fs';
@@ -26,8 +25,20 @@ if (existsSync(pathToUserDefinedLandingPage) && isCustomLandingPageEnabled()) {
   // @ts-ignore
   CustomContent = Object.values(customPages)[0]?.default || null;
 
+  const [{ default: pageComponents }, { default: mdxComponents }] = await Promise.all([
+    import('@components/MDX/page-components'),
+    import('@components/MDX/components'),
+  ]);
+  customHomepageComponents = { ...pageComponents, ...mdxComponents(props) };
+
   const rawContent = readFileSync(pathToUserDefinedLandingPage, 'utf-8');
   nodeGraphs = getMDXComponentsByName(rawContent, 'NodeGraph') || [];
+
+  // Avoid pulling visualizer CSS into the default homepage bundle.
+  // Only load the NodeGraph component when the custom homepage actually uses it.
+  if (nodeGraphs.length > 0) {
+    NodeGraph = (await import('@components/MDX/NodeGraph/NodeGraph.astro')).default;
+  }
 }
 
 if (config.landingPage) {
@@ -42,12 +53,13 @@ if (config.landingPage) {
         <div class="flex docs-layout w-full">
           <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8">
             <div class="w-full !max-w-none">
-              <CustomContent components={{ ...components, ...mdxComponents(props) }} />
+              <CustomContent components={customHomepageComponents} />
             </div>
             <Footer />
           </div>
         </div>
-        {nodeGraphs.length > 0 &&
+        {NodeGraph &&
+          nodeGraphs.length > 0 &&
           nodeGraphs.map((nodeGraph: any) => {
             const collection = resourceToCollectionMap[nodeGraph.type as keyof typeof resourceToCollectionMap];
             return (

package/eventcatalog/src/styles/theme.css

@@ -157,7 +157,7 @@
   --ec-content-bg: 13 17 23; /* #0d1117 */
   --ec-content-text: 201 209 217; /* #c9d1d9 - softer than pure white */
   --ec-content-text-muted: 139 148 158; /* #8b949e */
-  --ec-content-text-secondary: 139 148 158; /* #8b949e - muted for sidebar children */
+  --ec-content-text-secondary: 170 178 186; /* #aab2ba - sidebar children text */
   --ec-content-border: 33 38 45; /* #21262d */
   --ec-content-hover: 22 27 34; /* #161b22 */
   --ec-content-active: 33 38 45; /* #21262d */
@@ -175,7 +175,7 @@
   /* Main content/docs area - base dark surface */
   --ec-page-bg: 13 17 23; /* #0d1117 */
   --ec-page-text: 240 246 252; /* #f0f6fc */
-  --ec-page-text-muted: 139 148 158; /* #8b949e */
+  --ec-page-text-muted: 163 172 182; /* #a3acb6 */
   --ec-page-border: 33 38 45; /* #21262d */
 
   /* Card/elevated surfaces - for depth */
@@ -257,3 +257,8 @@
 :root[data-theme="dark"] .prose table td {
   border-color: rgb(33 38 45); /* #21262d */
 }
+
+/* Invert dark SVG icons in dark mode so they stay visible */
+:root[data-theme="dark"] .ec-themed-icon {
+  filter: invert(1);
+}

package/eventcatalog/src/styles/themes/forest.css

@@ -106,9 +106,9 @@
 /* Forest Dark Mode */
 :root[data-catalog-theme="forest"][data-theme="dark"] {
   /* Header - deep forest dark */
-  --ec-header-bg: 17 24 39; /* #111827 gray-900 */
+  --ec-header-bg: 3 7 18; /* #030712 gray-950 */
   --ec-header-text: 243 244 246; /* #f3f4f6 gray-100 */
-  --ec-header-border: 31 41 55; /* #1f2937 gray-800 */
+  --ec-header-border: 17 24 39; /* #111827 gray-900 */
 
   /* Accent colors - muted forest green for dark */
   --ec-accent: 74 222 128; /* #4ade80 (green-400) */
@@ -127,7 +127,7 @@
   --ec-dropdown-bg: 17 24 39; /* #111827 */
   --ec-dropdown-text: 209 213 219; /* #d1d5db */
   --ec-dropdown-hover: 31 41 55; /* #1f2937 */
-  --ec-dropdown-border: 55 65 81; /* #374151 */
+  --ec-dropdown-border: 31 41 55; /* #1f2937 gray-800 */
 
   /* Icons */
   --ec-icon-color: 156 163 175; /* #9ca3af */
@@ -136,7 +136,7 @@
   /* Sidebar / Vertical Nav */
   --ec-sidebar-bg: 3 7 18; /* #030712 gray-950 */
   --ec-sidebar-bg-gradient: 3 7 18; /* #030712 */
-  --ec-sidebar-border: 31 41 55; /* #1f2937 */
+  --ec-sidebar-border: 17 24 39; /* #111827 gray-900 */
   --ec-sidebar-text: 156 163 175; /* #9ca3af */
   --ec-sidebar-active-bg: 22 101 52; /* #166534 green-800 */
   --ec-sidebar-active-text: 255 255 255; /* #ffffff */
@@ -147,13 +147,13 @@
   --ec-content-text: 243 244 246; /* #f3f4f6 */
   --ec-content-text-muted: 156 163 175; /* #9ca3af */
   --ec-content-text-secondary: 156 163 175; /* #9ca3af */
-  --ec-content-border: 31 41 55; /* #1f2937 */
+  --ec-content-border: 17 24 39; /* #111827 gray-900 */
   --ec-content-hover: 17 24 39; /* #111827 */
   --ec-content-active: 31 41 55; /* #1f2937 */
 
   /* Input fields */
   --ec-input-bg: 17 24 39; /* #111827 */
-  --ec-input-border: 55 65 81; /* #374151 */
+  --ec-input-border: 31 41 55; /* #1f2937 gray-800 */
   --ec-input-text: 243 244 246; /* #f3f4f6 */
   --ec-input-placeholder: 107 114 128; /* #6b7280 */
 
@@ -165,7 +165,7 @@
   --ec-page-bg: 3 7 18; /* #030712 */
   --ec-page-text: 243 244 246; /* #f3f4f6 */
   --ec-page-text-muted: 156 163 175; /* #9ca3af */
-  --ec-page-border: 31 41 55; /* #1f2937 */
+  --ec-page-border: 17 24 39; /* #111827 gray-900 */
 
   /* Card/elevated surfaces */
   --ec-card-bg: 3 7 18; /* #030712 */

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

@@ -8,6 +8,8 @@ import {
   generateIdForNode,
   buildContextMenuForService,
   buildContextMenuForResource,
+  DEFAULT_NODE_WIDTH,
+  DEFAULT_NODE_HEIGHT,
 } from './utils/utils';
 import { MarkerType } from '@xyflow/react';
 import { findMatchingNodes } from '@utils/collections/util';
@@ -84,6 +86,7 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
         type: 'default',
         style: {
           strokeWidth: 1,
+          stroke: 'var(--ec-edge-stroke, #6b7280)',
         },
       });
     }
@@ -119,6 +122,7 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
         type: 'default',
         style: {
           strokeWidth: 1,
+          stroke: 'var(--ec-edge-stroke, #6b7280)',
         },
       });
     }
@@ -277,7 +281,7 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
   });
 
   nodes.forEach((node: any) => {
-    flow.setNode(node.id, { width: 150, height: 100 });
+    flow.setNode(node.id, { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT });
   });
 
   edges.forEach((edge: any) => {

package/eventcatalog/src/utils/node-graphs/data-products-node-graph.ts

@@ -8,6 +8,8 @@ import {
   createEdge,
   getColorFromString,
   buildContextMenuForResource,
+  DEFAULT_NODE_WIDTH,
+  DEFAULT_NODE_HEIGHT,
 } from '@utils/node-graphs/utils/utils';
 
 import { findInMap, createVersionedMap, mergeMaps, collectionToResourceMap } from '@utils/collections/util';
@@ -208,7 +210,7 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
   });
 
   nodes.forEach((node: any) => {
-    flow.setNode(node.id, { width: 150, height: 100 });
+    flow.setNode(node.id, { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT });
   });
 
   edges.forEach((edge: any) => {

package/eventcatalog/src/utils/node-graphs/domains-canvas.ts

@@ -1,6 +1,12 @@
 import { getCollection, type CollectionEntry } from 'astro:content';
 import dagre from 'dagre';
-import { generateIdForNode, createDagreGraph, calculatedNodes, createEdge } from '@utils/node-graphs/utils/utils';
+import {
+  generateIdForNode,
+  createDagreGraph,
+  calculatedNodes,
+  createEdge,
+  getOperationFields,
+} from '@utils/node-graphs/utils/utils';
 import { findInMap, createVersionedMap } from '@utils/collections/util';
 import type { Node, Edge } from '@xyflow/react';
 import { getDomains } from '@utils/collections/domains';
@@ -170,7 +176,7 @@ export const getDomainsCanvasData = async (): Promise<DomainCanvasData> => {
           position: { x: 0, y: 0 }, // Temporary position, will be calculated by dagre
           data: {
             mode: 'simple',
-            message: { ...messageObject.data },
+            message: { ...messageObject.data, ...getOperationFields(messageObject.data) },
           },
           sourcePosition: 'right',
           targetPosition: 'left',