@eventcatalog/core 5.0.0-beta.2 → 5.0.0-beta.20

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

@@ -31,11 +31,14 @@ import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
 import { getNodesAndEdges as getNodesAndEdgesForContainer } from '@utils/node-graphs/container-node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForChannel } from '@utils/node-graphs/channel-node-graph';
 import config from '@config';
-import { isEventCatalogChatVisible, isDevMode } from '@utils/feature';
+import { isEventCatalogChatVisible, isDevMode, isCanvasEnabled } from '@utils/feature';
+import { CANVASES_API_PATH } from '@features/studio/api/canvases-api';
 import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
 import { compactVisualiserGraph } from '@utils/node-graphs/compact-visualiser-graph';
 
 const isChatEnabled = isEventCatalogChatVisible();
+// With Studio on, the menu can start a canvas from the diagram
+const studioApiUrl = isCanvasEnabled() ? buildUrl(CANVASES_API_PATH, true) : undefined;
 
 interface Props {
   id: string;
@@ -257,6 +260,7 @@ if (overview && levelsOverview) {
     hiddenMessagesGraph={hiddenMessagesGraph}
     preferenceScope={collection}
     swimlanes={lanes}
+    studioApiUrl={studioApiUrl}
   />
 </div>
 

package/eventcatalog/src/components/NavigationProgress.astro

@@ -22,12 +22,19 @@
     opacity: 1;
   }
 
+  /* On every page, hidden until a navigation takes a while: paused until then (a running animation costs a style
+     recalc and paint on every frame, even when it can't be seen) */
   .navigation-progress__bar {
     width: 35%;
     height: 100%;
     background: rgb(var(--ec-accent));
     box-shadow: 0 0 10px rgb(var(--ec-accent) / 0.55);
     animation: navigation-progress 1.1s ease-in-out infinite;
+    animation-play-state: paused;
+  }
+
+  #navigation-progress[data-visible='true'] .navigation-progress__bar {
+    animation-play-state: running;
   }
 
   :global([data-navigation-pending='true']) {

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

@@ -4,6 +4,7 @@ import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { getLanguageForHighlight, getSchemaTypeLabel } from './utils';
 import { useDarkMode } from './useDarkMode';
+import { renderHighlightedRows } from '@utils/syntax-highlighter-renderer';
 import type { SchemaItem } from './types';
 
 interface ApiContentViewerProps {
@@ -135,6 +136,7 @@ export default function ApiContentViewer({ message, onCopy, copiedId }: ApiConte
 
           <div className="border-t" style={{ borderColor: dividerColor }}>
             <SyntaxHighlighter
+              renderer={renderHighlightedRows}
               language={getLanguageForHighlight(message.schemaExtension)}
               style={isDarkMode ? oneDark : oneLight}
               customStyle={{

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

@@ -13,6 +13,7 @@ import { MarkdownCodeGroup } from '../MDX/CodeGroup/MarkdownCodeGroup';
 import { MarkdownColumns, MarkdownColumn } from '../MDX/Columns/MarkdownColumns';
 import { remarkMarkdownColumns } from '../../remark-plugins/markdown-columns';
 import { getLanguageForHighlight } from './utils';
+import { renderHighlightedRows } from '@utils/syntax-highlighter-renderer';
 
 interface ExamplesViewerProps {
   examples: MessageExample[];
@@ -40,6 +41,7 @@ function CodeBlock({ language, code }: { language?: string; code: string }) {
   const content = code.replace(/\s+$/, '');
   const highlighter = (
     <SyntaxHighlighter
+      renderer={renderHighlightedRows}
       language={language || 'text'}
       style={isDarkMode ? oneDark : oneLight}
       customStyle={{

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

@@ -6,6 +6,7 @@ import { oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { getLanguageForHighlight } from './utils';
 import type { SchemaItem } from './types';
 import { useDarkMode } from './useDarkMode';
+import { renderHighlightedRows } from '@utils/syntax-highlighter-renderer';
 
 interface SchemaCodeModalProps {
   isOpen: boolean;
@@ -60,6 +61,7 @@ export default function SchemaCodeModal({ isOpen, onOpenChange, message, onCopy,
           {/* Content */}
           <div className="flex-1 overflow-auto p-6">
             <SyntaxHighlighter
+              renderer={renderHighlightedRows}
               language={getLanguageForHighlight(message.schemaExtension)}
               style={isDarkMode ? oneDark : oneLight}
               customStyle={{

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

@@ -9,6 +9,7 @@ import ProtobufSchemaViewer from './ProtobufSchemaViewer';
 import { getLanguageForHighlight, SCHEMA_CODE_STYLE } from './utils';
 import type { SchemaItem } from './types';
 import { useDarkMode } from './useDarkMode';
+import { renderHighlightedRows } from '@utils/syntax-highlighter-renderer';
 
 interface SchemaContentViewerProps {
   message: SchemaItem;
@@ -112,6 +113,7 @@ export default function SchemaContentViewer({
 
       <div className="min-h-0 flex-1 overflow-auto">
         <SyntaxHighlighter
+          renderer={renderHighlightedRows}
           language={getLanguageForHighlight(message.schemaExtension)}
           style={isDarkMode ? oneDark : oneLight}
           customStyle={{ ...SCHEMA_CODE_STYLE, height: '100%' }}

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

@@ -384,6 +384,9 @@ export default function SchemaDetailsPanel({
     [diffToVersion, uniqueAvailableVersions]
   );
   const comparing = (activeTab === 'versions' && hasMultipleVersions) || isDiffModalOpen;
+  const contentReady = !content.loading && !content.error;
+  // Server-rendered examples stay mounted and are only shown on the Examples tab (see the tab content below).
+  const showRenderedExamples = !!renderedExamples && activeTab === 'examples' && contentReady;
 
   const compareWithCurrent = (version: string) => {
     setDiffFromVersion(version);
@@ -705,11 +708,16 @@ export default function SchemaDetailsPanel({
 
         {/* Tab content */}
         <div className="flex-1 min-h-0 overflow-hidden p-6">
-          {content.loading || content.error ? (
+          {/* Always render the examples slot and hide it on other tabs. Astro moves a slot missing from the
+              server HTML into a <template>, where its island scripts never run and no island on the page hydrates. */}
+          {renderedExamples && (
+            <div className="h-full overflow-auto pr-1" hidden={!showRenderedExamples}>
+              {renderedExamples}
+            </div>
+          )}
+          {!contentReady ? (
             <SchemaLoadingState loading={content.loading} error={content.error} retry={content.retry} />
-          ) : activeTab === 'examples' && renderedExamples ? (
-            <div className="h-full overflow-auto pr-1">{renderedExamples}</div>
-          ) : activeTab === 'examples' && examples.length > 0 ? (
+          ) : showRenderedExamples ? null : activeTab === 'examples' && examples.length > 0 ? (
             <ExamplesViewer examples={examples} />
           ) : activeTab === 'metadata' ? (
             <SchemaMetadata message={message} owners={showOwners ? owners : []} />

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

@@ -16,34 +16,22 @@
   import { setSidebarData, sidebarStore } from '@stores/sidebar-store';
   import { buildUrl } from '@utils/url-builder';
 
-  // Only fetch if we haven't already loaded the data
+  // Only fetch if we haven't already loaded the data. Fetched straight away rather than when
+  // the browser is idle: the sidebar's first paint comes from the server (see SideNav.astro),
+  // but drilling down and search wait on this data
   if (!sidebarStore.get()) {
-    const apiUrl = buildUrl('/api/sidebar-data.json', true);
-
-    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);
-    }
+    fetch(buildUrl('/api/sidebar-data.json', true))
+      .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);
+      });
   }
 </script>

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

@@ -34,6 +34,7 @@ import {
   getUrlForSearchItem,
   highlightQuery,
   mapPagefindResultsToSearchItems,
+  rankResourceSearchItems,
   type SearchItem,
   type SearchNode,
 } from './search-utils';
@@ -316,16 +317,7 @@ export default function SearchModal() {
       return items;
     }
 
-    const lowerQuery = query.toLowerCase();
-    return items.filter((item) => {
-      if (item.name.toLowerCase().includes(lowerQuery)) return true;
-      // Key format is "type:id:version" (e.g. "service:OrdersService:0.0.3").
-      // Match against the id so users can find resources by their raw id too.
-      const keyParts = item.key?.split(':') ?? [];
-      const id = keyParts[1];
-      if (id?.toLowerCase().includes(lowerQuery)) return true;
-      return !!item.rawNode.summary && item.rawNode.summary.toLowerCase().includes(lowerQuery);
-    });
+    return rankResourceSearchItems(items, query);
   }, [indexedItems, isIndexedSearch, items, query]);
 
   const filters = useMemo(() => {

package/eventcatalog/src/components/Search/search-utils.ts

@@ -168,6 +168,32 @@ export const getIndexedResultRank = ({
   return 0;
 };
 
+/**
+ * How well a resource matches a resource search query: an exact name (5), a name starting with
+ * the query (4) or containing it (3), then the id (2), then the summary (1). 0 is no match.
+ */
+export const getResourceResultRank = (item: Pick<SearchItem, 'name' | 'key' | 'rawNode'>, query: string) => {
+  const lowerQuery = query.toLowerCase();
+  const name = item.name.toLowerCase();
+  if (name === lowerQuery) return 5;
+  if (name.startsWith(lowerQuery)) return 4;
+  if (name.includes(lowerQuery)) return 3;
+  // Key format is "type:id:version" (e.g. "service:OrdersService:0.0.3").
+  // Match against the id so users can find resources by their raw id too.
+  const id = item.key?.split(':')[1];
+  if (id?.toLowerCase().includes(lowerQuery)) return 2;
+  if (item.rawNode.summary?.toLowerCase().includes(lowerQuery)) return 1;
+  return 0;
+};
+
+/** Resources that match a resource search query, best matches first (index order within a rank) */
+export const rankResourceSearchItems = <T extends Pick<SearchItem, 'name' | 'key' | 'rawNode'>>(items: T[], query: string) =>
+  items
+    .map((item, index) => ({ item, index, rank: getResourceResultRank(item, query) }))
+    .filter(({ rank }) => rank > 0)
+    .sort((a, b) => b.rank - a.rank || a.index - b.index)
+    .map(({ item }) => item);
+
 export const applyActiveFilter = <T extends { type: string }>(items: T[], activeFilter: string) => {
   if (activeFilter === 'all') {
     return items;

package/eventcatalog/src/components/Seo.astro

@@ -3,8 +3,12 @@ import { SEO } from 'astro-seo';
 import config from '@config';
 import defaultImageFile from '../../public/opengraph.png';
 import { buildUrl } from '@utils/url-builder';
+import { formatPageTitle } from '@utils/page-title';
 
-const { title = config.title, description = config.tagline, ogTitle = title, ogType = 'website' } = Astro.props;
+const { description = config.tagline, ogType = 'website' } = Astro.props;
+// The page's own title (none for the homepage), followed by the catalog's
+const title = formatPageTitle(Astro.props.title);
+const ogTitle = title;
 
 const siteBaseURL = new URL(Astro.url);
 const defaultImage = new URL(defaultImageFile.src, siteBaseURL);

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

@@ -21,56 +21,56 @@ import {
   type FavoriteItem,
 } from '@stores/favorites-store';
 import {
+  buildNodeLookup,
   canCollapseGroup,
   findNodeKeyByUrl,
   getBadgeClasses,
   getDefaultCollapsedState,
+  hidesDefaultItemIcon,
   isGroupCollapsed,
+  resolveNavRef,
+  rootLevel,
+  stripBasePath,
   toggleGroupCollapsed,
+  type NavigationLevel,
+  type SidebarSnapshot,
 } from './utils';
 import { resolveIconUrl } from '@utils/icon';
 
 const cn = (...classes: (string | false | undefined)[]) => classes.filter(Boolean).join(' ');
 
-/**
- * Strip the configured base path from a pathname so URL pattern matching works
- * regardless of the base path setting (e.g. `/eventcatalog/docs/...` → `/docs/...`).
- */
-const stripBasePath = (pathname: string): string => {
-  const base = __EC_BASE__.replace(/\/$/, ''); // e.g. '/eventcatalog'
-  if (base && pathname.startsWith(base)) {
-    return pathname.slice(base.length) || '/';
-  }
-  return pathname;
-};
-
 // ============================================
 // Component
 // ============================================
 
-type NavigationLevel = {
-  key: string | null; // The key of the node that was drilled into (null for root)
-  entries: ChildRef[];
-  title: string;
-  badge?: string; // Category badge (e.g., "Domain", "Service")
+type NestedSideBarProps = {
+  /**
+   * This page's level, built on the server. It renders the sidebar into the HTML and keeps
+   * the island showing it until the full navigation data (sidebar-data.json) is loaded.
+   */
+  snapshot?: SidebarSnapshot;
 };
 
-export default function NestedSideBar() {
-  const data = useStore(sidebarStore);
+export default function NestedSideBar({ snapshot }: NestedSideBarProps) {
+  const storeData = useStore(sidebarStore);
   const favorites = useStore(favoritesStore);
+  // Drill-down, restoring state and favorites need the whole catalog; until it loads the
+  // snapshot only shows this page's level
+  const hasFullData = storeData !== null;
+  const data = storeData ?? snapshot?.data ?? null;
 
   // Guard against undefined data (e.g., during hydration)
   // 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: [], title: 'Documentation' },
-  ]);
+  const [navigationStack, setNavigationStack] = useState<NavigationLevel[]>(
+    () => snapshot?.stack ?? [{ key: null, entries: [], title: 'Documentation' }]
+  );
   const [animationKey, setAnimationKey] = useState(0);
   const [slideDirection, setSlideDirection] = useState<'forward' | 'backward' | null>(null);
   const [isInitialized, setIsInitialized] = useState(false);
-  const [currentPath, setCurrentPath] = useState<string>('');
+  const [currentPath, setCurrentPath] = useState<string>(snapshot?.url ?? '');
   const [sectionCollapsePreferences, setSectionCollapsePreferences] = useState(loadCollapsedSections);
   const [showPathPreview, setShowPathPreview] = useState(false);
   const [showFullPath, setShowFullPath] = useState(false);
@@ -78,33 +78,7 @@ export default function NestedSideBar() {
 
   // Build a lookup map for faster URL navigation
   // Map format: "type:id" -> "nodeKey"
-  const nodeLookup = useMemo(() => {
-    const lookup = new Map<string, string>();
-
-    Object.entries(nodes).forEach(([key, value]) => {
-      // Skip keys that are references (string values pointing to other keys)
-      // These are unversioned aliases like "domain:E-Commerce" -> "domain:E-Commerce:1.0.0"
-      if (typeof value === 'string') return;
-
-      // Key formats:
-      // - "type:id:version" (e.g., "service:OrdersService:0.0.3")
-      // - "type:id" (e.g., "user:john", "team:backend") - non-versioned resources
-      // - "list:name" (e.g., "list:domains") - skip these
-      const parts = key.split(':');
-
-      // Skip list items
-      if (parts[0] === 'list') return;
-
-      if (parts.length >= 2) {
-        // Store as "type:id"
-        const type = parts[0];
-        const id = parts[1];
-        lookup.set(`${type}:${id}`, key);
-      }
-    });
-
-    return lookup;
-  }, [nodes]);
+  const nodeLookup = useMemo(() => buildNodeLookup(nodes), [nodes]);
 
   /**
    * Toggle section collapse state
@@ -125,7 +99,7 @@ export default function NestedSideBar() {
       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 [rootLevel(roots)];
         }
         return prevStack;
       });
@@ -145,21 +119,7 @@ export default function NestedSideBar() {
    * Resolve a child reference to a NavNode
    * Handles both direct keys and string references (unversioned aliases pointing to versioned keys)
    */
-  const resolveRef = useCallback(
-    (ref: ChildRef): NavNode | null => {
-      if (typeof ref === 'string') {
-        const node = nodes[ref];
-        if (!node) return null;
-        // If node is a string, it's a reference to another key (e.g., unversioned alias)
-        if (typeof node === 'string') {
-          return (nodes[node] as NavNode) ?? null;
-        }
-        return node;
-      }
-      return ref;
-    },
-    [nodes]
-  );
+  const resolveRef = useCallback((ref: ChildRef): NavNode | null => resolveNavRef(nodes, ref), [nodes]);
 
   /**
    * Check if a node is visible (default: true)
@@ -174,7 +134,7 @@ export default function NestedSideBar() {
    */
   const buildStackFromPath = useCallback(
     (path: string[]): NavigationLevel[] => {
-      const stack: NavigationLevel[] = [{ key: null, entries: roots, title: 'Documentation' }];
+      const stack: NavigationLevel[] = [rootLevel(roots)];
 
       for (const key of path) {
         const node = resolveRef(key);
@@ -280,7 +240,7 @@ export default function NestedSideBar() {
           if (foundNode && foundNode.pages && foundNode.pages.length > 0) {
             // Fallback: Flattened navigation
             return [
-              { key: null, entries: roots, title: 'Documentation' },
+              rootLevel(roots),
               { key: foundNodeKey, entries: foundNode.pages, title: foundNode.title, badge: foundNode.badge },
             ];
           }
@@ -295,7 +255,7 @@ export default function NestedSideBar() {
             setSlideDirection('backward');
             setAnimationKey((prev) => prev + 1);
           }
-          return [{ key: null, entries: roots, title: 'Documentation' }];
+          return [rootLevel(roots)];
         });
         return true;
       }
@@ -308,14 +268,14 @@ export default function NestedSideBar() {
    * Restore state from localStorage on mount, or navigate to URL
    */
   useEffect(() => {
-    if (!data || roots.length === 0 || isInitialized) return;
+    if (!hasFullData || roots.length === 0 || isInitialized) return;
 
     const currentUrl = window.location.pathname;
     const normalizedCurrentUrl = stripBasePath(currentUrl);
 
     // Force root navigation on homepage
     if (normalizedCurrentUrl === '/' || normalizedCurrentUrl === '') {
-      setNavigationStack([{ key: null, entries: roots, title: 'Documentation' }]);
+      setNavigationStack([rootLevel(roots)]);
       setIsInitialized(true);
       return;
     }
@@ -346,7 +306,7 @@ export default function NestedSideBar() {
       const targetNode = resolveRef(targetKey);
       if (targetNode && targetNode.pages && targetNode.pages.length > 0) {
         finalStack = [
-          { key: null, entries: roots, title: 'Documentation' },
+          rootLevel(roots),
           { key: targetKey, entries: targetNode.pages, title: targetNode.title, badge: targetNode.badge },
         ];
       }
@@ -354,13 +314,13 @@ export default function NestedSideBar() {
 
     // 3. Fallback to root
     if (!finalStack) {
-      setNavigationStack([{ key: null, entries: roots, title: 'Documentation' }]);
+      setNavigationStack([rootLevel(roots)]);
     } else {
       setNavigationStack(finalStack);
     }
 
     setIsInitialized(true);
-  }, [data, roots, isInitialized, buildStackFromPath, findNodeKeyForUrl, tryConnectStack, resolveRef]);
+  }, [hasFullData, roots, isInitialized, buildStackFromPath, findNodeKeyForUrl, tryConnectStack, resolveRef]);
 
   /**
    * Save state whenever navigation changes
@@ -574,6 +534,7 @@ export default function NestedSideBar() {
    * Handle drilling down into an item with children
    */
   const handleDrillDown = (node: NavNode, nodeKey: string | null) => {
+    if (!hasFullData) return;
     if (node.pages && node.pages.length > 0) {
       setSlideDirection('forward');
       setAnimationKey((prev) => prev + 1);
@@ -589,7 +550,7 @@ export default function NestedSideBar() {
    * Navigate back one level
    */
   const navigateBack = () => {
-    if (navigationStack.length > 1) {
+    if (hasFullData && navigationStack.length > 1) {
       setSlideDirection('backward');
       setAnimationKey((prev) => prev + 1);
       setNavigationStack(navigationStack.slice(0, -1));
@@ -603,7 +564,7 @@ export default function NestedSideBar() {
    * Navigate to a specific level in the stack
    */
   const navigateToLevel = (levelIndex: number) => {
-    if (levelIndex < navigationStack.length - 1) {
+    if (hasFullData && levelIndex < navigationStack.length - 1) {
       setSlideDirection('backward');
       setAnimationKey((prev) => prev + 1);
       setNavigationStack(navigationStack.slice(0, levelIndex + 1));
@@ -633,6 +594,7 @@ export default function NestedSideBar() {
    * Navigate to a favorited item
    */
   const navigateToFavorite = (favorite: FavoriteItem) => {
+    if (!hasFullData) return;
     // If it has an href and no children, just navigate to the URL
     const node = resolveRef(favorite.nodeKey);
     if (favorite.href && (!node?.pages || node.pages.length === 0)) {
@@ -663,6 +625,11 @@ export default function NestedSideBar() {
 
   const isTopLevel = navigationStack.length === 1;
 
+  // The list drilled into (e.g. Channels): its items, even those in groups under it (e.g. ADRs
+  // grouped by status), drop a default icon that repeats the list's own
+  const levelNode = currentLevel.key ? resolveRef(currentLevel.key) : null;
+  const repeatsLevelIcon = (item: NavNode) => !!levelNode && hidesDefaultItemIcon(levelNode, item, false);
+
   /**
    * Render a list of child refs (resolving keys as needed)
    */
@@ -674,7 +641,7 @@ export default function NestedSideBar() {
       if (currentItemGroup.length > 0) {
         result.push(
           <div key={`items-${result.length}`} className="flex flex-col gap-0.5 mb-1.5">
-            {currentItemGroup.map((item, idx) => renderItem(item.node, item.key, idx))}
+            {currentItemGroup.map((item, idx) => renderItem(item.node, item.key, idx, repeatsLevelIcon(item.node)))}
           </div>
         );
         currentItemGroup = [];
@@ -795,9 +762,12 @@ export default function NestedSideBar() {
                 return renderGroup(child, childKey, childIndex, depth + 1);
               }
 
-              // Under a nested group the header already conveys the resource type, so the
-              // default per-collection glyph is dropped; custom icons still show.
-              return renderItem(child, childKey, childIndex, isNested);
+              return renderItem(
+                child,
+                childKey,
+                childIndex,
+                hidesDefaultItemIcon(group, child, isNested) || repeatsLevelIcon(child)
+              );
             })}
           </div>
         )}
@@ -814,9 +784,9 @@ export default function NestedSideBar() {
     const isFav = isFavorited(itemKey);
     const canFavorite = itemKey !== null; // Only items with keys can be favorited
 
-    // Get icon component from lucide-react. When suppressDefaultIcon is set (e.g. items
-    // listed under a typed subtle subgroup) the default per-collection glyph is hidden;
-    // a custom icon (item.leftIcon) is always still shown.
+    // Get icon component from lucide-react. When suppressDefaultIcon is set (the group heading
+    // already shows the item's type, see hidesDefaultItemIcon) the default per-collection glyph
+    // is hidden; a custom icon (item.leftIcon) is always still shown.
     const IconComponent =
       item.icon && !suppressDefaultIcon ? (LucideIcons as unknown as Record<string, LucideIcons.LucideIcon>)[item.icon] : null;
     const handleStarClick = (e: React.MouseEvent) => {

package/eventcatalog/src/components/SideNav/NestedSideBar/storage.ts

@@ -107,6 +107,8 @@ export const saveCollapsedSections = (preferences: SectionCollapsePreferences):
 };
 
 export const loadCollapsedSections = (): SectionCollapsePreferences => {
+  // Rendered on the server for the first paint, where there is nothing saved yet
+  if (typeof localStorage === 'undefined') return createSectionCollapsePreferences();
   try {
     const stored = localStorage.getItem(SECTION_PREFERENCES_KEY);
     if (stored) {