@eventcatalog/core 3.0.0-beta.0 → 3.0.0-beta.2

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.0.0-beta.0";
+var version = "3.0.0-beta.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-JB4YT5JY.js";
-import "../chunk-TQ4HZREX.js";
+} from "../chunk-JSONCD7V.js";
+import "../chunk-H4QHE5YZ.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 = "3.0.0-beta.0";
+var version = "3.0.0-beta.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-X4W4YC3U.js";
-import "../chunk-JB4YT5JY.js";
-import "../chunk-TQ4HZREX.js";
+} from "../chunk-PQL6O5YA.js";
+import "../chunk-JSONCD7V.js";
+import "../chunk-H4QHE5YZ.js";
 import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default

package/dist/{chunk-TQ4HZREX.js → chunk-H4QHE5YZ.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "3.0.0-beta.0";
+var version = "3.0.0-beta.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-JB4YT5JY.js → chunk-JSONCD7V.js}

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

package/dist/{chunk-X4W4YC3U.js → chunk-PQL6O5YA.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-JB4YT5JY.js";
+} from "./chunk-JSONCD7V.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/eventcatalog.cjs

@@ -157,7 +157,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "3.0.0-beta.0";
+var version = "3.0.0-beta.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-PLNJC7NZ.js";
 import {
   log_build_default
-} from "./chunk-X4W4YC3U.js";
-import "./chunk-JB4YT5JY.js";
+} from "./chunk-PQL6O5YA.js";
+import "./chunk-JSONCD7V.js";
 import {
   runMigrations
 } from "./chunk-BH3JMNAV.js";
@@ -19,7 +19,7 @@ import {
 import "./chunk-55D645EH.js";
 import {
   VERSION
-} from "./chunk-TQ4HZREX.js";
+} from "./chunk-H4QHE5YZ.js";
 import {
   isAuthEnabled,
   isOutputServer

package/eventcatalog/src/components/Header.astro

@@ -13,7 +13,7 @@ if (isAuthEnabled()) {
 }
 
 const logo = {
-  src: ('/' + (catalog?.logo?.src || 'logo.png')).replace(/^\/+/, '/'),
+  src: ('/' + (catalog?.logo?.src || '')).replace(/^\/+/, '/'),
   alt: catalog?.logo?.alt || 'Event Catalog',
   text: catalog?.logo?.text || 'EventCatalog',
 };
@@ -30,7 +30,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
       <div class="flex-shrink-0 flex items-center w-3/12">
         <a href={buildUrl(catalog.landingPage || '/')} class="flex space-x-2 items-center group">
           {
-            logo.src && (
+            logo.src && logo.src !== '/' && (
               <img alt={logo.alt} src={buildUrl(logo.src, true)} class="w-8 h-8 transition-transform group-hover:scale-105" />
             )
           }
@@ -42,7 +42,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
         </a>
       </div>
 
-      <div class="hidden lg:block flex-grow w-6/12 px-10">
+      <div class="hidden lg:block flex-grow -ml-1">
         <Search />
       </div>
 
@@ -118,10 +118,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                         href="https://discord.com/invite/3rjaZMmrAm"
                         class="block p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
                       >
-                        <img
-                          src={buildUrl('/icons/discord.svg', true)}
-                          class="h-6 w-6 opacity-70 hover:opacity-100 transition-opacity"
-                        />
+                        <img src={buildUrl('/icons/discord.svg', true)} class="h-6 w-6  hover:opacity-100 transition-opacity" />
                       </a>
                     </li>
                     <li>
@@ -129,10 +126,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                         href="https://github.com/event-catalog/eventcatalog"
                         class="block p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
                       >
-                        <img
-                          src={buildUrl('/icons/github.svg', true)}
-                          class="h-6 w-6 opacity-70 hover:opacity-100 transition-opacity"
-                        />
+                        <img src={buildUrl('/icons/github.svg', true)} class="h-6 w-6  hover:opacity-100 transition-opacity" />
                       </a>
                     </li>
                   </ul>

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

@@ -19,7 +19,7 @@ import {
 import '@xyflow/react/dist/style.css';
 import { ExternalLink, HistoryIcon } from 'lucide-react';
 import { toPng } from 'html-to-image';
-import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
+import { DocumentArrowDownIcon, PresentationChartLineIcon } from '@heroicons/react/24/outline';
 // Nodes and edges
 import ServiceNode from './Nodes/Service';
 import FlowNode from './Nodes/Flow';
@@ -135,6 +135,7 @@ const NodeGraphBuilder = ({
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [animateMessages, setAnimateMessages] = useState(false);
   const [activeStepIndex, setActiveStepIndex] = useState<number | null>(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
   // const [isStudioModalOpen, setIsStudioModalOpen] = useState(false);
 
   // Check if there are channels to determine if we need the visualizer functionality
@@ -349,6 +350,30 @@ const NodeGraphBuilder = ({
     setIsStudioModalOpen(true);
   };
 
+  const toggleFullScreen = useCallback(() => {
+    if (!document.fullscreenElement) {
+      reactFlowWrapperRef.current?.requestFullscreen().catch((err) => {
+        console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
+      });
+    } else {
+      document.exitFullscreen();
+    }
+  }, []);
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+      setTimeout(() => {
+        fitView({ duration: 800 });
+      }, 100);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, [fitView]);
+
   const handleExportVisual = useCallback(() => {
     const imageWidth = 1024;
     const imageHeight = 768;
@@ -563,7 +588,7 @@ const NodeGraphBuilder = ({
   const isFlowVisualization = edges.some((edge: Edge) => edge.type === 'flow-edge');
 
   return (
-    <div ref={reactFlowWrapperRef} className="w-full h-full">
+    <div ref={reactFlowWrapperRef} className="w-full h-full bg-gray-50">
       <ReactFlow
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
@@ -583,7 +608,7 @@ const NodeGraphBuilder = ({
         <Panel position="top-center" className="w-full pr-6 ">
           <div className="flex space-x-2 justify-between items-center">
             <div className="flex space-x-2 ml-4">
-              <div>
+              <div className="relative group">
                 <button
                   onClick={() => setIsSettingsOpen(!isSettingsOpen)}
                   className="py-2.5 px-3 bg-white rounded-md shadow-md hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
@@ -591,6 +616,23 @@ const NodeGraphBuilder = ({
                 >
                   <CogIcon className="h-5 w-5 text-gray-600" />
                 </button>
+                <div className="absolute top-full left-0 mt-2 px-2 py-1 bg-gray-900 text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
+                  Settings
+                </div>
+              </div>
+              <div className="relative group">
+                <button
+                  onClick={toggleFullScreen}
+                  className={`py-2.5 px-3 bg-white rounded-md shadow-md hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 ${
+                    isFullscreen ? 'bg-purple-50 text-purple-600' : ''
+                  }`}
+                  aria-label={isFullscreen ? 'Exit presentation mode' : 'Enter presentation mode'}
+                >
+                  <PresentationChartLineIcon className={`h-5 w-5 ${isFullscreen ? 'text-purple-600' : 'text-gray-600'}`} />
+                </button>
+                <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-2 py-1 bg-gray-900 text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
+                  {isFullscreen ? 'Exit Presentation Mode' : 'Presentation Mode'}
+                </div>
               </div>
 
               {title && (

package/eventcatalog/src/components/SchemaExplorer/SchemaExplorer.tsx

@@ -314,16 +314,6 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
 
   return (
     <div className="h-full flex flex-col overflow-hidden">
-      {/* Compact Header */}
-      <div className="flex-shrink-0 border-b border-gray-200 pb-2 mb-3">
-        <div>
-          <h1 className="text-2xl font-bold text-gray-900">Schema Explorer</h1>
-          <p className="mt-0.5 text-xs text-gray-600">
-            {filteredMessages.length} schema{filteredMessages.length !== 1 ? 's' : ''} available
-          </p>
-        </div>
-      </div>
-
       {/* Split View */}
       <div className="flex-1 flex gap-4 overflow-hidden">
         {/* Left: Filters + Schema List */}

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

@@ -4,7 +4,7 @@ import SearchModal from './SearchModal.tsx';
 ---
 
 <div>
-  <div class="relative flex items-center">
+  <div class="relative flex items-center w-10/12">
     <input
       id="search-dummy-input"
       type="text"
@@ -13,7 +13,7 @@ import SearchModal from './SearchModal.tsx';
       autocomplete="off"
       class="block w-full rounded-md caret-transparent border-0 py-1.5 pr-14 pl-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 font-light sm:text-sm sm:leading-6 px-4"
     />
-    <MagnifyingGlassIcon className="absolute inset-y-0 -left-1 h-9 w-8 flex items-center pl-4 text-gray-400" />
+    <MagnifyingGlassIcon className="absolute inset-y-0 left-0 h-9 w-8 flex items-center pl-4 text-gray-400" />
     <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
       <kbd class="inline-flex items-center rounded px-1 font-sans text-xs text-gray-400">⌘K</kbd>
     </div>

package/eventcatalog/src/components/SideNav/NestedSideBar/index.tsx

@@ -42,13 +42,15 @@ type NavigationLevel = {
 
 export default function NestedSideBar() {
   const data = useStore(sidebarStore);
+  const favorites = useStore(favoritesStore);
 
   // Guard against undefined data (e.g., during hydration)
-  const roots = data?.roots ?? [];
-  const nodes = data?.nodes ?? {};
+  // Use useMemo to ensure stable references for roots and nodes
+  const roots = useMemo(() => data?.roots ?? [], [data?.roots]);
+  const nodes = useMemo(() => data?.nodes ?? {}, [data?.nodes]);
 
-  const [navigationStack, setNavigationStack] = useState<NavigationLevel[]>([
-    { key: null, entries: roots, title: 'Documentation' },
+  const [navigationStack, setNavigationStack] = useState<NavigationLevel[]>(() => [
+    { key: null, entries: [], title: 'Documentation' },
   ]);
   const [animationKey, setAnimationKey] = useState(0);
   const [slideDirection, setSlideDirection] = useState<'forward' | 'backward' | null>(null);
@@ -57,7 +59,6 @@ export default function NestedSideBar() {
   const [collapsedSections, setCollapsedSections] = useState<Set<string>>(new Set());
   const [showPathPreview, setShowPathPreview] = useState(false);
   const [showFullPath, setShowFullPath] = useState(false);
-  const favorites = useStore(favoritesStore);
   const [isSearching, setIsSearching] = useState(false);
 
   // Build a lookup map for faster URL navigation
@@ -113,6 +114,21 @@ export default function NestedSideBar() {
     }
   }, []);
 
+  /**
+   * Update navigation stack when roots become available
+   */
+  useEffect(() => {
+    if (roots.length > 0) {
+      setNavigationStack((prevStack) => {
+        // Only update if the current stack has no entries (initial state)
+        if (prevStack.length === 1 && prevStack[0].entries.length === 0) {
+          return [{ key: null, entries: roots, title: 'Documentation' }];
+        }
+        return prevStack;
+      });
+    }
+  }, [roots]);
+
   /**
    * Populate the store with the data when the component mounts or data changes
    */
@@ -300,43 +316,47 @@ export default function NestedSideBar() {
       const foundNodeKey = findNodeKeyByUrl(url);
 
       if (foundNodeKey) {
-        // Try to connect to current stack first
-        const connectedStack = tryConnectStack(foundNodeKey, navigationStack);
+        setNavigationStack((currentStack) => {
+          // Try to connect to current stack first
+          const connectedStack = tryConnectStack(foundNodeKey, currentStack);
 
-        if (connectedStack) {
-          setNavigationStack(connectedStack);
-          return true;
-        }
+          if (connectedStack) {
+            return connectedStack;
+          }
 
-        const foundNode = nodes[foundNodeKey];
-        if (foundNode && foundNode.pages && foundNode.pages.length > 0) {
-          // Fallback: Flattened navigation
-          setNavigationStack([
-            { key: null, entries: roots, title: 'Documentation' },
-            { key: foundNodeKey, entries: foundNode.pages, title: foundNode.title, badge: foundNode.badge },
-          ]);
-          return true;
-        }
+          const foundNode = nodes[foundNodeKey];
+          if (foundNode && foundNode.pages && foundNode.pages.length > 0) {
+            // Fallback: Flattened navigation
+            return [
+              { key: null, entries: roots, title: 'Documentation' },
+              { key: foundNodeKey, entries: foundNode.pages, title: foundNode.title, badge: foundNode.badge },
+            ];
+          }
+
+          return currentStack;
+        });
+        return true;
       } else if (url === '/' || url === '') {
         // Reset to root if we are on homepage
-        if (navigationStack.length > 1) {
-          setSlideDirection('backward');
-          setAnimationKey((prev) => prev + 1);
-        }
-        setNavigationStack([{ key: null, entries: roots, title: 'Documentation' }]);
+        setNavigationStack((currentStack) => {
+          if (currentStack.length > 1) {
+            setSlideDirection('backward');
+            setAnimationKey((prev) => prev + 1);
+          }
+          return [{ key: null, entries: roots, title: 'Documentation' }];
+        });
         return true;
       }
       return false;
     },
-    [findNodeKeyByUrl, tryConnectStack, navigationStack, nodes, roots]
+    [findNodeKeyByUrl, tryConnectStack, nodes, roots]
   );
 
   /**
    * Restore state from localStorage on mount, or navigate to URL
    */
   useEffect(() => {
-    if (!data || roots.length === 0) return;
-    if (isInitialized) return;
+    if (!data || roots.length === 0 || isInitialized) return;
 
     const currentUrl = window.location.pathname;
 
@@ -387,7 +407,7 @@ export default function NestedSideBar() {
     }
 
     setIsInitialized(true);
-  }, [data, roots, buildStackFromPath, isInitialized, findNodeKeyByUrl, tryConnectStack, nodes]);
+  }, [data, roots, nodes, isInitialized, buildStackFromPath, findNodeKeyByUrl, tryConnectStack]);
 
   /**
    * Save state whenever navigation changes
@@ -750,10 +770,7 @@ export default function NestedSideBar() {
         <div className="flex items-center gap-2.5 min-w-0 flex-1 ">
           {IconComponent && (
             <span
-              className={cn(
-                'flex items-center justify-center w-5 h-5 flex-shrink-0',
-                isActive ? 'text-purple-600' : 'text-gray-500'
-              )}
+              className={cn('flex items-center justify-center w-5 h-5 flex-shrink-0', isActive ? 'text-black' : 'text-gray-500')}
             >
               <IconComponent className="w-4 h-4" />
             </span>
@@ -761,7 +778,7 @@ export default function NestedSideBar() {
           <span
             className={cn(
               'text-[13px] truncate',
-              isActive ? 'text-purple-600 font-medium' : 'text-gray-600 group-hover:text-gray-900'
+              isActive ? 'text-black font-medium' : 'text-gray-600 group-hover:text-gray-900'
             )}
           >
             {item.title}
@@ -782,7 +799,7 @@ export default function NestedSideBar() {
             </button>
           )}
           {itemHasChildren && (
-            <span className="flex items-center justify-center w-5 h-5 text-gray-400 group-hover:text-purple-500 group-hover:translate-x-0.5 transition-transform">
+            <span className="flex items-center justify-center w-5 h-5 text-gray-400 group-hover:text-black group-hover:translate-x-0.5 transition-transform">
               <ChevronRight className="w-4 h-4" />
             </span>
           )}
@@ -793,7 +810,7 @@ export default function NestedSideBar() {
     const baseClasses =
       'group flex items-center justify-between w-full px-3 py-1 rounded-lg cursor-pointer text-left transition-colors hover:bg-gray-100 active:bg-gray-200';
     const parentClasses = itemHasChildren ? 'font-medium' : '';
-    const activeClasses = isActive ? 'bg-purple-100 hover:bg-purple-100 border-l-4 border-purple-600 rounded-l-none' : '';
+    const activeClasses = isActive ? 'bg-gray-200 hover:bg-gray-200 border-l-4 border-black rounded-l-none' : '';
 
     // Leaf item with href → render as link
     if (item.href && !itemHasChildren) {
@@ -899,7 +916,7 @@ export default function NestedSideBar() {
                               className={cn(
                                 'flex items-center gap-2 px-2 py-1.5 rounded text-left transition-colors',
                                 !isCurrentLevel && 'hover:bg-gray-100 cursor-pointer',
-                                isCurrentLevel && 'bg-purple-50 cursor-default'
+                                isCurrentLevel && 'bg-gray-200 cursor-default'
                               )}
                               style={{ paddingLeft: `${displayIndex * 12 + 8}px` }}
                             >
@@ -909,10 +926,7 @@ export default function NestedSideBar() {
                                 <ChevronRight className="w-3.5 h-3.5 text-gray-300 flex-shrink-0" />
                               )}
                               <span
-                                className={cn(
-                                  'text-sm truncate',
-                                  isCurrentLevel ? 'font-medium text-purple-700' : 'text-gray-600'
-                                )}
+                                className={cn('text-sm truncate', isCurrentLevel ? 'font-medium text-black' : 'text-gray-600')}
                               >
                                 {level.title}
                               </span>
@@ -1000,14 +1014,14 @@ export default function NestedSideBar() {
                         onClick={() => navigateToFavorite(fav)}
                         className={cn(
                           'group flex items-center justify-between w-full px-3 py-1.5 rounded-lg cursor-pointer text-left transition-colors hover:bg-amber-50 active:bg-amber-100',
-                          isActive && 'bg-purple-100 hover:bg-purple-100 border-l-4 border-purple-600 rounded-l-none'
+                          isActive && 'bg-gray-200 hover:bg-gray-200 border-l-4 border-black rounded-l-none'
                         )}
                       >
                         <div className="flex items-center gap-2.5 min-w-0 flex-1">
                           <span
                             className={cn(
                               'text-[14px] truncate',
-                              isActive ? 'text-purple-600 font-medium' : 'text-gray-600 group-hover:text-gray-900'
+                              isActive ? 'text-black font-medium' : 'text-gray-600 group-hover:text-gray-900'
                             )}
                           >
                             {fav.title}
@@ -1034,7 +1048,7 @@ export default function NestedSideBar() {
                             <Star className="w-3.5 h-3.5 fill-current" />
                           </button>
                           {node?.pages && node.pages.length > 0 && (
-                            <span className="flex items-center justify-center w-5 h-5 text-gray-400 group-hover:text-purple-500">
+                            <span className="flex items-center justify-center w-5 h-5 text-gray-400 group-hover:text-black">
                               <ChevronRight className="w-4 h-4" />
                             </span>
                           )}

package/eventcatalog/src/enterprise/custom-documentation/pages/docs/custom/index.astro

@@ -80,7 +80,7 @@ const ownersList = filteredOwners.map((o) => ({
 const badges = doc?.badges || [];
 ---
 
-<VerticalSideBarLayout title={doc.title || 'Documentation'}>
+<VerticalSideBarLayout title={doc.title || 'Documentation'} showNestedSideBar={false}>
   <div class="flex w-full" data-pagefind-body data-pagefind-meta={`title:${doc.title}`}>
     <!-- Left Sidebar Navigation -->
     <aside class="sidebar-transition overflow-y-auto bg-white border-r border-gray-100 w-80 fixed top-16 bottom-0 z-10">

package/eventcatalog/src/enterprise/eventcatalog-chat/pages/chat/index.astro

@@ -29,7 +29,7 @@ const chatPrompts = await getChatPromptsGroupedByCategory();
 const resources = allItems.map((item) => ({ id: item.data.id, type: item.collection, name: item.data.name }));
 ---
 
-<VerticalSideBarLayout title="AI Chat">
+<VerticalSideBarLayout title="AI Chat" showNestedSideBar={false}>
   <div class="flex h-[calc(100vh-60px)] bg-white">
     {
       isEnabled ? (

package/eventcatalog/src/layouts/DirectoryLayout.astro

@@ -48,7 +48,7 @@ const tabs = [
 ];
 ---
 
-<VerticalSideBarLayout title={`Explore | ${title}`}>
+<VerticalSideBarLayout title={`Explore | ${title}`} showNestedSideBar={false}>
   <main class="ml-0">
     <div id="discover-collection-tabs">
       <div class="hidden sm:block">

package/eventcatalog/src/layouts/DiscoverLayout.astro

@@ -106,7 +106,7 @@ const tabs = [
 ];
 ---
 
-<VerticalSideBarLayout title={`Explore | ${title}`}>
+<VerticalSideBarLayout title={`Explore | ${title}`} showNestedSideBar={false}>
   <main class="ml-0">
     <div id="discover-collection-tabs">
       <div class="hidden sm:block">

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -3,22 +3,19 @@ interface Props {
   title: string;
   sidebar?: boolean;
   description?: string;
+  showNestedSideBar?: boolean;
 }
 
 import {
-  BookOpenText,
-  Workflow,
   TableProperties,
-  House,
-  BookUser,
   BotMessageSquare,
   Users,
+  BookOpen,
   Sparkles,
   Rocket,
   FileText,
   SquareDashedMousePointerIcon,
-  PackageSearch,
-  FileJson,
+  MailSearch,
 } from 'lucide-react';
 import Header from '../components/Header.astro';
 import SEO from '../components/Seo.astro';
@@ -41,6 +38,8 @@ import { buildUrl } from '@utils/url-builder';
 import { getQueries } from '@utils/collections/queries';
 import { hasLandingPageForDocs } from '@utils/pages';
 
+import { isEventCatalogUpgradeEnabled, isEmbedEnabled } from '@utils/feature';
+
 const catalogHasDefaultLandingPageForDocs = await hasLandingPageForDocs();
 const customDocs = await getCollection('customPages');
 
@@ -62,8 +61,6 @@ if (!catalogHasDefaultLandingPageForDocs) {
   ]);
 }
 
-import { isEventCatalogUpgradeEnabled, isVisualiserEnabled } from '@utils/feature';
-
 // Try and load any custom styles if they exist
 try {
   await import('../../eventcatalog.styles.css');
@@ -105,8 +102,8 @@ const userSideBarConfiguration = config.sidebar || [];
 const navigationItems = [
   {
     id: '/',
-    label: 'Home',
-    icon: House,
+    label: 'Documentation',
+    icon: BookOpen,
     href: buildUrl(config.landingPage || '/'),
     current:
       currentPath === '/' ||
@@ -114,8 +111,6 @@ const navigationItems = [
       currentPath.includes('/architecture/') ||
       currentPath.includes('/visualiser') ||
       (currentPath.includes('/schemas') && !currentPath.includes('/schemas/explorer')),
-    sidebar: true,
-    hidden: false,
   },
   {
     id: '/discover',
@@ -123,22 +118,13 @@ const navigationItems = [
     icon: TableProperties,
     href: buildUrl('/discover/events'),
     current: currentPath.includes('/discover/'),
-    sidebar: false,
-  },
-  {
-    id: '/schemas',
-    label: 'Schema Explorer',
-    icon: FileJson,
-    sidebar: true,
-    hidden: true,
   },
   {
     id: '/schemas/explorer',
     label: 'Schema Explorer',
-    icon: FileJson,
+    icon: MailSearch,
     href: buildUrl('/schemas/explorer'),
     current: currentPath.includes('/schemas/explorer'),
-    sidebar: false,
   },
   {
     id: '/directory',
@@ -146,16 +132,6 @@ const navigationItems = [
     icon: Users,
     href: buildUrl('/directory/users'),
     current: currentPath.includes('/directory'),
-    sidebar: false,
-  },
-  {
-    id: '/architecture',
-    label: 'Architecture',
-    icon: BookUser,
-    href: buildUrl('/architecture/domains'),
-    current: currentPath.includes('/architecture/'),
-    sidebar: true,
-    hidden: true,
   },
 ].filter((item) => {
   const userSideBarOption = userSideBarConfiguration.find((config: { id: string; visible: boolean }) => config.id === item.id);
@@ -169,7 +145,6 @@ const studioNavigationItem = [
     icon: SquareDashedMousePointerIcon,
     href: buildUrl('/studio'),
     current: currentPath.includes('/studio'),
-    sidebar: false,
   },
 ].filter((item) => {
   const userSideBarOption = userSideBarConfiguration.find((config: { id: string; visible: boolean }) => config.id === item.id);
@@ -183,7 +158,6 @@ const premiumFeatures = [
     icon: FileText,
     href: getDefaultUrl('docs/custom', '/docs/custom'),
     current: currentPath.includes('/docs/custom'),
-    sidebar: false,
     isPremium: true,
   },
   {
@@ -200,11 +174,9 @@ const premiumFeatures = [
 });
 
 const currentNavigationItem = [...navigationItems, ...studioNavigationItem, ...premiumFeatures].find((item) => item.current);
-const { title, description } = Astro.props;
+const { title, description, showNestedSideBar = true } = Astro.props;
 
-const showSideBarOnLoad = currentNavigationItem?.sidebar;
-
-const canPageBeEmbedded = process.env.ENABLE_EMBED === 'true';
+const canPageBeEmbedded = isEmbedEnabled();
 ---
 
 <!doctype html>
@@ -270,29 +242,25 @@ const canPageBeEmbedded = process.env.ENABLE_EMBED === 'true';
           <nav class="flex flex-col h-[calc(100vh-70px)] justify-between">
             <div class="flex flex-col items-center flex-1 space-y-6">
               {
-                navigationItems
-                  .filter((item) => !item.hidden)
-                  .map((item) => {
-                    return (
-                      <a
-                        id={item.id}
-                        data-role="nav-item"
-                        href={item.href}
-                        class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${
-                          item.current
-                            ? 'text-white bg-gradient-to-b from-purple-500 to-purple-700'
-                            : 'hover:bg-gradient-to-r hover:from-purple-500 hover:to-purple-700 hover:text-white text-gray-700'
-                        }`}
-                      >
-                        <div class="has-tooltip">
-                          <span class="tooltip rounded shadow-lg p-1 text-xs bg-gradient-to-l from-purple-500 to-purple-700 text-white ml-10">
-                            {item.label}
-                          </span>
-                          <item.icon className="h-6 w-6" />
-                        </div>
-                      </a>
-                    );
-                  })
+                navigationItems.map((item) => {
+                  return (
+                    <a
+                      id={item.id}
+                      data-role="nav-item"
+                      href={item.href}
+                      class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${
+                        item.current ? 'text-white bg-gray-900' : 'hover:bg-gray-800 hover:text-white text-gray-700'
+                      }`}
+                    >
+                      <div class="has-tooltip">
+                        <span class="tooltip rounded shadow-lg p-1 text-xs bg-gray-900 text-white ml-10 whitespace-nowrap">
+                          {item.label}
+                        </span>
+                        <item.icon className="h-6 w-6" />
+                      </div>
+                    </a>
+                  );
+                })
               }
 
               <hr class="w-8 border-t border-gray-200" />
@@ -303,10 +271,10 @@ const canPageBeEmbedded = process.env.ENABLE_EMBED === 'true';
                     id={studioNavigationItem[0].id}
                     data-role="nav-item"
                     href={studioNavigationItem[0].href}
-                    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-white bg-gradient-to-b from-purple-500 to-purple-700' : 'hover:bg-gradient-to-r hover:from-purple-500 hover:to-purple-700 hover:text-white text-gray-700'}`}
+                    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-white bg-gray-900' : 'hover:bg-gray-800 hover:text-white text-gray-700'}`}
                   >
                     <div class="has-tooltip">
-                      <span class="tooltip rounded shadow-lg p-1 text-xs bg-gradient-to-l from-purple-500 to-purple-700 text-white ml-10">
+                      <span class="tooltip rounded shadow-lg p-1 text-xs bg-gray-900 text-white ml-10 whitespace-nowrap">
                         {studioNavigationItem[0].label}
                       </span>
                       <SquareDashedMousePointerIcon className="h-6 w-6" />
@@ -324,13 +292,11 @@ const canPageBeEmbedded = process.env.ENABLE_EMBED === 'true';
                     data-role="nav-item"
                     href={item.href}
                     class={`p-1.5 inline-block transition-colors duration-200 rounded-lg mb-8 relative ${
-                      item.current
-                        ? 'text-white bg-gradient-to-b from-purple-500 to-purple-700'
-                        : 'hover:bg-gradient-to-r hover:from-purple-500 hover:to-purple-700 hover:text-white text-gray-700'
+                      item.current ? 'text-white bg-gray-900' : 'hover:bg-gray-800 hover:text-white text-gray-700'
                     }`}
                   >
                     <div class="has-tooltip">
-                      <span class="tooltip rounded shadow-lg p-1 text-xs bg-gradient-to-l from-indigo-500 to-indigo-700 text-white ml-10 flex items-center gap-1">
+                      <span class="tooltip rounded shadow-lg p-1 text-xs bg-gray-900 text-white ml-10 flex items-center gap-1 whitespace-nowrap">
                         <Sparkles className="h-3 w-3" /> {item.label}
                       </span>
                       <item.icon className="h-6 w-6" />
@@ -350,10 +316,10 @@ const canPageBeEmbedded = process.env.ENABLE_EMBED === 'true';
                     id="/pro"
                     data-role="nav-item"
                     href={buildUrl('/plans')}
-                    class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${currentPath.includes('/pro') ? 'text-white bg-gradient-to-b from-purple-500 to-purple-700' : 'bg-gradient-to-r from-purple-100 to-indigo-100 hover:from-purple-500 hover:to-purple-700 hover:text-white text-purple-700'}`}
+                    class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${currentPath.includes('/pro') ? 'text-white bg-gray-900' : 'bg-gray-200 hover:bg-gray-800 hover:text-white text-gray-700'}`}
                   >
                     <div class="has-tooltip">
-                      <span class="tooltip rounded shadow-lg p-1 text-xs bg-gradient-to-l from-purple-500 to-purple-700 text-white ml-10">
+                      <span class="tooltip rounded shadow-lg p-1 text-xs bg-gray-900 text-white ml-10 whitespace-nowrap">
                         Upgrade EventCatalog
                       </span>
                       <Rocket className="h-6 w-6" />
@@ -365,13 +331,14 @@ const canPageBeEmbedded = process.env.ENABLE_EMBED === 'true';
           </nav>
         </div>
 
-        <SideNav
-          id="sidebar"
-          class={`sidebar-transition h-content bg-white  border-r border-gray-100 w-[320px] ml-14 ${showSideBarOnLoad ? 'block' : 'hidden'}`}
-        />
+        {
+          showNestedSideBar && (
+            <SideNav id="sidebar" class={`sidebar-transition h-content bg-white  border-r border-gray-100 w-[320px] ml-14`} />
+          )
+        }
       </aside>
       <main
-        class={`sidebar-transition w-full max-h-content overflow-y-auto ${showSideBarOnLoad ? 'ml-0' : 'ml-14'}`}
+        class={`sidebar-transition w-full max-h-content overflow-y-auto ${showNestedSideBar ? 'ml-0' : 'ml-14'}`}
         id="content"
       >
         <slot />
@@ -396,7 +363,7 @@ const canPageBeEmbedded = process.env.ENABLE_EMBED === 'true';
   </body>
 </html>
 <ClientRouter />
-<script define:vars={{ navigationItems, currentNavigationItem, showSideBarOnLoad, canPageBeEmbedded }}>
+<script define:vars={{ navigationItems, currentNavigationItem, canPageBeEmbedded }}>
   // Listen for Astro transititions
   document.addEventListener('astro:page-load', () => {
     document.dispatchEvent(new CustomEvent('contentLoaded'));
@@ -440,45 +407,6 @@ const canPageBeEmbedded = process.env.ENABLE_EMBED === 'true';
       return;
     }
 
-    const sidebar = document.getElementById('sidebar');
-    const currentPath = window.location.pathname;
-
-    // Determine if we should show the sidebar based on current path
-    let shouldShowSidebar = false;
-
-    // Check each navigation item to see if it matches current path and has sidebar enabled
-    for (const item of navigationItems) {
-      if (!item.sidebar) continue; // Skip items that don't have sidebar
-
-      if (item.id === '/') {
-        // Home route - show sidebar for home, docs, architecture, visualiser, schemas (not explorer)
-        if (
-          currentPath === '/' ||
-          (currentPath.includes('/docs') && !currentPath.includes('/docs/custom')) ||
-          currentPath.includes('/architecture/') ||
-          currentPath.includes('/visualiser') ||
-          (currentPath.includes('/schemas') && !currentPath.includes('/schemas/explorer'))
-        ) {
-          shouldShowSidebar = true;
-          break;
-        }
-      } else if (currentPath.includes(item.id)) {
-        // Other routes - simple match
-        shouldShowSidebar = true;
-        break;
-      }
-    }
-
-    // Show or hide sidebar based on result
-    if (shouldShowSidebar) {
-      sidebar.style.display = 'block';
-      content.classList.remove('ml-14');
-    } else {
-      sidebar.style.display = 'none';
-      content.style.width = '100%';
-      content.classList.add('ml-14');
-    }
-
     const navItems = document.querySelectorAll('[data-role="nav-item"]');
 
     // Navigation items simply navigate to their href - no toggle logic
@@ -492,46 +420,5 @@ const canPageBeEmbedded = process.env.ENABLE_EMBED === 'true';
         }
       });
     });
-
-    function showSidebar() {
-      if (!sidebar || !content) return;
-      isOpen = true;
-      localStorage.setItem('sidebarState', 'open');
-      sidebar.style.display = 'block';
-      setTimeout(() => {
-        sidebar.style.transform = 'translateX(0)';
-        content.style.transform = 'translateX(0)';
-        content.classList.remove('ml-14');
-        content.style.width = 'calc(100% - 240px)';
-      }, 10);
-    }
-
-    function hideSidebar() {
-      if (!sidebar || !content) return;
-      isOpen = false;
-      sidebar.style.transform = 'translateX(-100%)';
-      content.style.transform = 'translateX(0px)';
-      content.style.width = '100%';
-      content.classList.add('ml-14');
-    }
-
-    if (sidebar) {
-      sidebar.addEventListener('transitionend', () => {
-        if (!isOpen && sidebar && content) {
-          sidebar.style.display = 'none';
-          content.style.transform = 'translateX(0px)';
-        }
-      });
-    }
-
-    // Listen for custom sidebar toggle event from React components
-    window.addEventListener('sidebarToggle', (event) => {
-      const { action } = event.detail;
-      if (action === 'hide') {
-        hideSidebar();
-      } else if (action === 'show') {
-        showSidebar();
-      }
-    });
   });
 </script>

package/eventcatalog/src/pages/chat/feature.astro

@@ -19,7 +19,7 @@ if (hasChatLicense) {
     <title>EventCatalog chat?</title>
   </head>
   <body>
-    <VerticalSideBarLayout title="AI Chat">
+    <VerticalSideBarLayout title="AI Chat" showNestedSideBar={false}>
       <div class="min-h-[calc(100vh-60px)] bg-white">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
           {/* Hero Section */}

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

@@ -275,7 +275,7 @@ nodeGraphs.push({
 
 <VerticalSideBarLayout title={pageTitle} description={props.data.summary}>
   <main class="flex docs-layout h-full" {...pagefindAttributes}>
-    <div class="flex docs-layout w-full pl-16 pr-24">
+    <div class="flex docs-layout w-full pl-16">
       <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8">
         <div class="border-b border-gray-200 md:pb-2">
           <div>
@@ -286,7 +286,7 @@ nodeGraphs.push({
                   class={`text-2xl md:text-4xl font-bold text-black ${props.data.deprecated && hasDeprecated ? 'text-red-500' : ''}`}
                 >
                   {props.data.name}
-                  <span class="">(v{props.data.version})</span>
+                  {props.data.latestVersion !== props.data.version && <span>(v{props.data.version})</span>}
                 </h2>
                 <FavoriteButton
                   client:load
@@ -491,8 +491,8 @@ nodeGraphs.push({
           }
         </div>
       </div>
-      <aside class="hidden lg:block sticky top-0 pb-10 w-80 overflow-y-auto bg-white py-2 flex-shrink-0">
-        <div class="py-4 mt-4 space-y-8">
+      <aside class="hidden xl:block sticky top-0 pb-10 w-[280px] overflow-y-auto py-2 flex-shrink-0 pr-10">
+        <div class="mt-4 space-y-8">
           {
             headings.length > 0 && (
               <div>

package/eventcatalog/src/pages/docs/custom/feature.astro

@@ -3,7 +3,7 @@ import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import { BookOpenIcon, FileText } from 'lucide-react';
 ---
 
-<VerticalSideBarLayout title="Custom Documentation">
+<VerticalSideBarLayout title="Custom Documentation" showNestedSideBar={false}>
   <div class="min-h-[calc(100vh-60px)] bg-white">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
       {/* Hero Section */}

package/eventcatalog/src/pages/docs/custom/index.astro

@@ -98,7 +98,7 @@ if (!isCustomDocsEnabled()) {
 }
 ---
 
-<VerticalSideBarLayout title="Custom Documentation">
+<VerticalSideBarLayout title="Custom Documentation" showNestedSideBar={false}>
   <body class="min-h-screen font-inter">
     <main class="container px-8 lg:px-8 mx-auto py-8 max-w-[80em]">
       <div class="mb-12">

package/eventcatalog/src/pages/plans/index.astro

@@ -16,7 +16,7 @@ import {
 } from 'lucide-react';
 ---
 
-<VerticalSideBarLayout title="EventCatalog Pro">
+<VerticalSideBarLayout title="EventCatalog Pro" showNestedSideBar={false}>
   <div class="min-h-[calc(100vh-60px)] bg-white">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
       {/* Hero Section */}

package/eventcatalog/src/pages/schemas/explorer/index.astro

@@ -162,7 +162,7 @@ const allSchemas = [...messagesWithSchemas, ...flatServicesWithSpecs];
 const apiAccessEnabled = isEventCatalogScaleEnabled();
 ---
 
-<VerticalSideBarLayout title="Schema Explorer - EventCatalog">
+<VerticalSideBarLayout title="Schema Explorer - EventCatalog" showNestedSideBar={false}>
   <main class="flex sm:px-8 docs-layout h-[calc(100vh-var(--header-height,0px)-64px)]">
     <div class="flex docs-layout w-full h-full">
       <div class="w-full lg:mr-2 pr-8 py-6 flex flex-col h-full">

package/eventcatalog/src/pages/studio.astro

@@ -44,7 +44,7 @@ const resourcesToShow = [
     <title>EventCatalog Studio</title>
   </head>
   <body>
-    <VerticalSideBarLayout title="EventCatalog Studio">
+    <VerticalSideBarLayout title="EventCatalog Studio" showNestedSideBar={false}>
       <div class="min-h-[calc(100vh-60px)] bg-white">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
           {/* Hero Section */}

package/eventcatalog/src/pages/unauthorized/index.astro

@@ -2,7 +2,7 @@
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 ---
 
-<VerticalSideBarLayout title="Unauthorized - EventCatalog">
+<VerticalSideBarLayout title="Unauthorized - EventCatalog" showNestedSideBar={false}>
   <div class="flex h-[calc(100vh-120px)] bg-white">
     <main class="flex w-full items-center justify-center bg-white text-center sm:p-12">
       <div class="w-full max-w-xl text-center">

package/eventcatalog/src/utils/collections/domains.ts

@@ -2,7 +2,7 @@ import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
 import type { CollectionMessageTypes } from '@types';
-import type { Service } from './services';
+import type { Service } from './types';
 import utils from '@eventcatalog/sdk';
 import { createVersionedMap, findInMap } from '@utils/collections/util';
 

package/eventcatalog/src/utils/collections/types.ts

@@ -0,0 +1,6 @@
+import type { CollectionEntry } from 'astro:content';
+
+// Shared types to avoid circular dependencies between domains.ts and services.ts
+export type Service = CollectionEntry<'services'>;
+export type Domain = CollectionEntry<'domains'>;
+export type UbiquitousLanguage = CollectionEntry<'ubiquitousLanguages'>;

package/eventcatalog/src/utils/feature.ts

@@ -21,6 +21,8 @@ export const isEventCatalogScaleEnabled = () => process.env.EVENTCATALOG_SCALE =
 
 export const isPrivateRemoteSchemaEnabled = () => isEventCatalogScaleEnabled() || isEventCatalogStarterEnabled();
 
+export const isEmbedEnabled = () => process.env.ENABLE_EMBED === 'true';
+
 export const showEventCatalogBranding = () => {
   const override = process.env.EVENTCATALOG_SHOW_BRANDING;
   // if any value we return true

package/eventcatalog/tsconfig.json

@@ -21,5 +21,6 @@
     "jsx": "react-jsx",
     "jsxImportSource": "react",
     "types": ["vitest/globals"]
-  }
+  },
+  "exclude": ["**/*.spec.ts", "**/*.test.ts"]
 }

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.2",
   "publishConfig": {
     "access": "public"
   },