@eventcatalog/core 4.3.3 → 4.3.4

package/dist/analytics/analytics.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(analytics_exports);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "4.3.3";
+var version = "4.3.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-UW52WRSH.js";
-import "../chunk-PXBG5QKU.js";
+} from "../chunk-5L4FYIAY.js";
+import "../chunk-OPFRJOPV.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -140,7 +140,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "4.3.3";
+var version = "4.3.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-OWE74ZHY.js";
-import "../chunk-UW52WRSH.js";
+} from "../chunk-QFXV3GDK.js";
 import "../chunk-K2XIENVT.js";
-import "../chunk-PXBG5QKU.js";
+import "../chunk-5L4FYIAY.js";
+import "../chunk-OPFRJOPV.js";
 import "../chunk-6QENHZZP.js";
 export {
   log_build_default as default

package/dist/{chunk-UW52WRSH.js → chunk-5L4FYIAY.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-PXBG5QKU.js";
+} from "./chunk-OPFRJOPV.js";
 
 // src/analytics/analytics.js
 import os from "os";

package/dist/{chunk-2IGBU3PN.js → chunk-CQQE7NTL.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-PXBG5QKU.js";
+} from "./chunk-OPFRJOPV.js";
 
 // src/utils/cli-logger.ts
 import pc from "picocolors";

package/dist/{chunk-PXBG5QKU.js → chunk-OPFRJOPV.js}

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

package/dist/{chunk-OWE74ZHY.js → chunk-QFXV3GDK.js}

@@ -1,10 +1,10 @@
-import {
-  raiseEvent
-} from "./chunk-UW52WRSH.js";
 import {
   countResources,
   serializeCounts
 } from "./chunk-K2XIENVT.js";
+import {
+  raiseEvent
+} from "./chunk-5L4FYIAY.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-HR6KK56F.js → chunk-XTC5VFLE.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-2IGBU3PN.js";
+} from "./chunk-CQQE7NTL.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/eventcatalog.cjs

@@ -144,7 +144,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "4.3.3";
+var version = "4.3.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -1,8 +1,11 @@
 import {
   log_build_default
-} from "./chunk-OWE74ZHY.js";
-import "./chunk-UW52WRSH.js";
+} from "./chunk-QFXV3GDK.js";
 import "./chunk-K2XIENVT.js";
+import {
+  runMigrations
+} from "./chunk-XUAF2H54.js";
+import "./chunk-CA4U2JP7.js";
 import {
   getProjectOutDir,
   isAuthEnabled,
@@ -11,10 +14,10 @@ import {
 } from "./chunk-B7HCX5HM.js";
 import {
   generate
-} from "./chunk-HR6KK56F.js";
+} from "./chunk-XTC5VFLE.js";
 import {
   logger
-} from "./chunk-2IGBU3PN.js";
+} from "./chunk-CQQE7NTL.js";
 import {
   resolve_catalog_dependencies_default
 } from "./chunk-LHR4G2UO.js";
@@ -24,10 +27,7 @@ import {
 import {
   watch
 } from "./chunk-CAJUIMDJ.js";
-import {
-  runMigrations
-} from "./chunk-XUAF2H54.js";
-import "./chunk-CA4U2JP7.js";
+import "./chunk-5L4FYIAY.js";
 import {
   createAstroDevLineFilter,
   createAstroLineFilter
@@ -38,7 +38,7 @@ import {
 import "./chunk-W5JQON7Z.js";
 import {
   VERSION
-} from "./chunk-PXBG5QKU.js";
+} from "./chunk-OPFRJOPV.js";
 import {
   linkCoreNodeModules,
   resolveInstalledCoreNodeModules

package/dist/generate.cjs

@@ -108,7 +108,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "4.3.3";
+var version = "4.3.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-HR6KK56F.js";
-import "./chunk-2IGBU3PN.js";
-import "./chunk-PXBG5QKU.js";
+} from "./chunk-XTC5VFLE.js";
+import "./chunk-CQQE7NTL.js";
+import "./chunk-OPFRJOPV.js";
 import "./chunk-6QENHZZP.js";
 export {
   generate

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "4.3.3";
+var version = "4.3.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-2IGBU3PN.js";
-import "../chunk-PXBG5QKU.js";
+} from "../chunk-CQQE7NTL.js";
+import "../chunk-OPFRJOPV.js";
 export {
   logger
 };

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

@@ -13,7 +13,7 @@ import {
   removeFavorite as removeFavoriteAction,
   type FavoriteItem,
 } from '@stores/favorites-store';
-import { getBadgeClasses, isGroupCollapsed } from './utils';
+import { canCollapseGroup, getBadgeClasses, getGroupLabel, isGroupCollapsed } from './utils';
 import { resolveIconUrl } from '@utils/icon';
 
 const cn = (...classes: (string | false | undefined)[]) => classes.filter(Boolean).join(' ');
@@ -57,7 +57,7 @@ export default function NestedSideBar() {
   const [slideDirection, setSlideDirection] = useState<'forward' | 'backward' | null>(null);
   const [isInitialized, setIsInitialized] = useState(false);
   const [currentPath, setCurrentPath] = useState<string>('');
-  const [collapsedSections, setCollapsedSections] = useState<Set<string>>(new Set());
+  const [sectionCollapsePreferences, setSectionCollapsePreferences] = useState(loadCollapsedSections);
   const [showPathPreview, setShowPathPreview] = useState(false);
   const [showFullPath, setShowFullPath] = useState(false);
 
@@ -95,29 +95,23 @@ export default function NestedSideBar() {
    * Toggle section collapse state
    */
   const toggleSectionCollapse = (sectionId: string) => {
-    setCollapsedSections((prev) => {
-      const next = new Set(prev);
-      if (next.has(sectionId)) {
-        next.delete(sectionId);
+    setSectionCollapsePreferences((previousPreferences) => {
+      const nextPreferences = {
+        expanded: new Set(previousPreferences.expanded),
+      };
+      const isCurrentlyCollapsed = isGroupCollapsed(true, sectionId, previousPreferences);
+
+      if (isCurrentlyCollapsed) {
+        nextPreferences.expanded.add(sectionId);
       } else {
-        next.add(sectionId);
+        nextPreferences.expanded.delete(sectionId);
       }
-      // Save to localStorage
-      saveCollapsedSections(next);
-      return next;
+
+      saveCollapsedSections(nextPreferences);
+      return nextPreferences;
     });
   };
 
-  /**
-   * Load collapsed sections from localStorage on mount
-   */
-  useEffect(() => {
-    const saved = loadCollapsedSections();
-    if (saved.size > 0) {
-      setCollapsedSections(saved);
-    }
-  }, []);
-
   /**
    * Update navigation stack when roots become available
    */
@@ -521,7 +515,7 @@ export default function NestedSideBar() {
   // Show loading state if no data yet
   if (!data || roots.length === 0) {
     return (
-      <aside className="w-full min-h-full flex-1 flex flex-col font-sans bg-[rgb(var(--ec-rail-bg))]">
+      <aside className="flex h-full min-h-0 w-full flex-1 flex-col bg-[rgb(var(--ec-rail-bg))] font-sans">
         {/* Search skeleton */}
         <div className="px-4 py-3 border-b border-[rgb(var(--ec-content-border))] bg-[rgb(var(--ec-rail-bg))]">
           <div className="h-10 bg-[rgb(var(--ec-content-hover))] rounded-xl animate-pulse" />
@@ -754,9 +748,9 @@ export default function NestedSideBar() {
         return child && isVisible(child);
       }) ?? [];
 
-    const groupId = groupKey || group.collapseKey || `group-${index}`;
-    const canCollapse = visibleChildren.length > 3;
-    const isCollapsed = isGroupCollapsed(canCollapse, groupId, collapsedSections);
+    const groupId = groupKey || group.collapseKey || `${currentLevel.key ?? 'root'}:group:${group.title}`;
+    const canCollapse = canCollapseGroup(visibleChildren.length);
+    const isCollapsed = isGroupCollapsed(canCollapse, groupId, sectionCollapsePreferences);
 
     // When a group's children are subtle subgroups (e.g. Resources > Services/Flows/Data Stores),
     // they render flush under the parent icon instead of inside the indented border guide.
@@ -787,7 +781,7 @@ export default function NestedSideBar() {
                 : 'text-[12px] font-semibold tracking-tight text-[rgb(var(--ec-content-text))]'
             )}
           >
-            {group.title}
+            {getGroupLabel(group.title, visibleChildren.length)}
           </span>
         </div>
         {canCollapse && (
@@ -973,7 +967,7 @@ export default function NestedSideBar() {
   };
 
   return (
-    <aside className="w-full min-h-full flex-1 flex flex-col font-sans bg-[rgb(var(--ec-rail-bg))]">
+    <aside className="flex h-full min-h-0 w-full flex-1 flex-col bg-[rgb(var(--ec-rail-bg))] font-sans">
       {isTopLevel && (
         <div className="flex h-[60px] items-center px-6 bg-[rgb(var(--ec-rail-bg)/0.98)] backdrop-blur-sm border-b border-[rgb(var(--ec-content-border))] sticky top-0 z-10">
           <span className="text-[0.65rem] font-semibold uppercase tracking-[0.18em] text-[rgb(var(--ec-sidebar-text)/0.5)] truncate">
@@ -1128,7 +1122,7 @@ export default function NestedSideBar() {
       {/* Navigation Content */}
       <nav
         key={animationKey}
-        className={cn('flex-1 overflow-y-auto overflow-x-hidden p-4 px-2', getAnimationClass())}
+        className={cn('min-h-0 flex-1 overflow-y-auto overflow-x-hidden p-4 px-2', getAnimationClass())}
         style={{
           scrollbarWidth: 'thin',
           scrollbarColor: 'rgb(var(--ec-content-border)) transparent',

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

@@ -1,9 +1,11 @@
+import type { SectionCollapsePreferences } from './utils';
+
 // ============================================
 // Local Storage Persistence
 // ============================================
 
 const STORAGE_KEY = 'eventcatalog-sidebar-nav';
-const COLLAPSED_SECTIONS_KEY = 'eventcatalog-sidebar-collapsed';
+const SECTION_PREFERENCES_KEY = 'eventcatalog-sidebar-sections:v2';
 const FAVORITES_KEY = 'eventcatalog-sidebar-favorites';
 
 // ============================================
@@ -49,21 +51,28 @@ export const loadState = (): PersistedState | null => {
 // Collapsed Sections
 // ============================================
 
-export const saveCollapsedSections = (sections: Set<string>): void => {
+export const saveCollapsedSections = (preferences: SectionCollapsePreferences): void => {
   try {
-    localStorage.setItem(COLLAPSED_SECTIONS_KEY, JSON.stringify([...sections]));
+    localStorage.setItem(SECTION_PREFERENCES_KEY, JSON.stringify({ expanded: [...preferences.expanded] }));
   } catch (e) {
     console.warn('Failed to save collapsed sections:', e);
   }
 };
 
-export const loadCollapsedSections = (): Set<string> => {
+export const loadCollapsedSections = (): SectionCollapsePreferences => {
   try {
-    const stored = localStorage.getItem(COLLAPSED_SECTIONS_KEY);
-    return stored ? new Set(JSON.parse(stored)) : new Set();
+    const stored = localStorage.getItem(SECTION_PREFERENCES_KEY);
+    if (stored) {
+      const preferences = JSON.parse(stored);
+      return {
+        expanded: new Set(Array.isArray(preferences.expanded) ? preferences.expanded : []),
+      };
+    }
+
+    return { expanded: new Set() };
   } catch (e) {
     console.warn('Failed to load collapsed sections:', e);
-    return new Set();
+    return { expanded: new Set() };
   }
 };
 

package/eventcatalog/src/components/SideNav/NestedSideBar/utils.spec.ts

@@ -1,12 +1,35 @@
 import { describe, expect, it } from 'vitest';
-import { isGroupCollapsed } from './utils';
+import { canCollapseGroup, getGroupLabel, isGroupCollapsed } from './utils';
+
+const preferences = (expanded: string[] = []) => ({
+  expanded: new Set(expanded),
+});
+
+describe('sidebar group presentation', () => {
+  it('includes the visible child count in the group label', () => {
+    expect(getGroupLabel('Outbound Messages', 10)).toBe('Outbound Messages (10)');
+  });
+
+  it.each(['Quick Reference', 'Architecture', 'Resources'])('does not include the child count for %s', (title) => {
+    expect(getGroupLabel(title, 10)).toBe(title);
+  });
+
+  it('only allows groups with more than five children to collapse', () => {
+    expect(canCollapseGroup(5)).toBe(false);
+    expect(canCollapseGroup(6)).toBe(true);
+  });
+});
 
 describe('isGroupCollapsed', () => {
-  it('ignores persisted collapse state when the group cannot be expanded', () => {
-    expect(isGroupCollapsed(false, 'group-1', new Set(['group-1']))).toBe(false);
+  it('keeps groups without a caret expanded', () => {
+    expect(isGroupCollapsed(false, 'group-1', preferences())).toBe(false);
+  });
+
+  it('collapses expandable groups by default', () => {
+    expect(isGroupCollapsed(true, 'outbound-messages', preferences())).toBe(true);
   });
 
-  it('uses persisted collapse state when the group can be expanded', () => {
-    expect(isGroupCollapsed(true, 'adrs:status:superseded', new Set(['adrs:status:superseded']))).toBe(true);
+  it('uses an explicit expanded preference', () => {
+    expect(isGroupCollapsed(true, 'outbound-messages', preferences(['outbound-messages']))).toBe(false);
   });
 });

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

@@ -1,7 +1,20 @@
 // Shared utilities for NestedSideBar components
 
-export const isGroupCollapsed = (canCollapse: boolean, groupId: string, collapsedSections: Set<string>): boolean =>
-  canCollapse && collapsedSections.has(groupId);
+export const SIDEBAR_GROUP_COLLAPSE_THRESHOLD = 5;
+const GROUP_TITLES_WITHOUT_COUNT = new Set(['Quick Reference', 'Architecture', 'Resources']);
+
+export type SectionCollapsePreferences = {
+  expanded: Set<string>;
+};
+
+export const canCollapseGroup = (childCount: number): boolean => childCount > SIDEBAR_GROUP_COLLAPSE_THRESHOLD;
+
+export const getGroupLabel = (title: string, childCount: number): string =>
+  GROUP_TITLES_WITHOUT_COUNT.has(title) ? title : `${title} (${childCount})`;
+
+export const isGroupCollapsed = (canCollapse: boolean, groupId: string, preferences: SectionCollapsePreferences): boolean => {
+  return canCollapse && !preferences.expanded.has(groupId);
+};
 
 /**
  * Returns Tailwind classes for badge styling based on badge type.

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

@@ -93,18 +93,15 @@ const editUrl =
   (config.editUrl && (props as any)?.filePath ? buildEditUrlForResource(config.editUrl, (props as any).filePath) : '');
 ---
 
-<VerticalSideBarLayout title={doc.title || 'Documentation'} showNestedSideBar={false}>
+<VerticalSideBarLayout title={doc.title || 'Documentation'}>
+  <Fragment slot="sidebar-content">
+    <div class="h-full min-h-0">
+      <CustomDocsNav />
+    </div>
+  </Fragment>
+
   <div class="custom-docs-shell flex w-full" data-pagefind-body data-pagefind-meta={`title:${doc.title}`}>
-    <!-- Left Sidebar Navigation -->
-    <aside
-      class="sidebar-transition fixed top-0 bottom-0 left-[var(--ec-vertical-nav-width,14rem)] z-10 w-[var(--ec-custom-docs-sidebar-width,20rem)] overflow-hidden border-r border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-rail-bg))]"
-    >
-      <div class="h-full">
-        <CustomDocsNav />
-      </div>
-    </aside>
-
-    <div class="sidebar-transition flex w-full min-w-0" style="margin-left: var(--ec-custom-docs-sidebar-width, 20rem);">
+    <div class="flex w-full min-w-0">
       <main class="min-w-0 flex-1">
         <div
           class="w-full lg:mr-2 pr-10 py-10 bg-[rgb(var(--ec-page-bg))]"
@@ -275,19 +272,6 @@ const editUrl =
 </VerticalSideBarLayout>
 
 <style is:global>
-  :root {
-    --ec-custom-docs-sidebar-width: 20rem;
-  }
-
-  #eventcatalog-header {
-    left: calc(var(--ec-vertical-nav-width, 14rem) + var(--ec-custom-docs-sidebar-width, 20rem)) !important;
-  }
-
-  .custom-docs-shell {
-    margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1);
-    margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1);
-  }
-
   .mermaid svg {
     margin: 1em auto 2em;
   }

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -449,9 +449,25 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
         }
       })();
     </script>
+    <script is:inline>
+      (() => {
+        const sidebarWidthStorageKey = 'eventcatalog-sidebar-width:v1';
+        const minimumSidebarWidth = 224;
+        const maximumSidebarWidth = 576;
+
+        try {
+          const savedWidth = Number(localStorage.getItem(sidebarWidthStorageKey));
+          if (Number.isFinite(savedWidth) && savedWidth > 0) {
+            const width = Math.min(maximumSidebarWidth, Math.max(minimumSidebarWidth, savedWidth));
+            document.documentElement.style.setProperty('--ec-sidebar-panel-width', `${width}px`);
+          }
+        } catch (error) {}
+      })();
+    </script>
     <style is:global>
       :root {
         --ec-vertical-nav-width: 14rem;
+        --ec-sidebar-panel-width: 17rem;
       }
 
       :root[data-vertical-nav-collapsed='true'] {
@@ -472,7 +488,6 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
         min-height: 100vh;
         min-height: 100dvh;
         background-color: rgb(var(--ec-page-bg));
-        --ec-sidebar-panel-width: 17rem;
         display: flex;
         flex-direction: column;
       }
@@ -580,7 +595,44 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
         top: 0;
         left: var(--ec-vertical-nav-width);
         z-index: 20;
-        overflow-y: auto;
+        overflow: hidden;
+      }
+      .sidebar-resize-handle {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 30;
+        width: 8px;
+        height: 100%;
+        cursor: col-resize;
+        touch-action: none;
+      }
+      .sidebar-resize-handle::after {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 50%;
+        width: 2px;
+        content: '';
+        background: rgb(var(--ec-accent) / 0.65);
+        opacity: 0;
+        transform: translateX(-50%);
+        transition: opacity 150ms ease;
+      }
+      .sidebar-resize-handle:hover::after,
+      .sidebar-resize-handle:focus-visible::after,
+      body.sidebar-is-resizing .sidebar-resize-handle::after {
+        opacity: 1;
+      }
+      .sidebar-resize-handle:focus-visible {
+        outline: none;
+      }
+      body.sidebar-is-resizing {
+        cursor: col-resize;
+        user-select: none;
+      }
+      body.sidebar-is-resizing .sidebar-transition {
+        transition: none;
       }
       .content-panel {
         min-width: 0;
@@ -754,14 +806,22 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
         </div>
       </aside>
       {
-        showNestedSideBar &&
-          (Astro.slots.has('sidebar-content') ? (
-            <aside id="sidebar" class="sidebar-panel sidebar-transition">
-              <slot name="sidebar-content" />
-            </aside>
-          ) : (
-            <SideNav id="sidebar" class={`sidebar-panel sidebar-transition`} />
-          ))
+        showNestedSideBar && (
+          <aside id="sidebar" class="sidebar-panel sidebar-transition">
+            {Astro.slots.has('sidebar-content') ? <slot name="sidebar-content" /> : <SideNav class="h-full min-h-0" />}
+            <div
+              id="sidebar-resize-handle"
+              class="sidebar-resize-handle"
+              role="separator"
+              aria-label="Resize sidebar"
+              aria-orientation="vertical"
+              aria-valuemin="224"
+              aria-valuemax="576"
+              aria-valuenow="272"
+              tabindex="0"
+            />
+          </aside>
+        )
       }
       <main class="content-panel sidebar-transition w-full bg-[rgb(var(--ec-page-bg))]" id="content">
         {
@@ -803,6 +863,9 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
   }}
 >
   const VERTICAL_NAV_STORAGE_KEY = 'eventcatalog-vertical-nav-collapsed';
+  const SIDEBAR_WIDTH_STORAGE_KEY = 'eventcatalog-sidebar-width:v1';
+  const MINIMUM_SIDEBAR_WIDTH = 224;
+  const MAXIMUM_SIDEBAR_WIDTH = 576;
   const ACTIVE_NAV_CLASSES = [
     'border-[rgb(var(--ec-accent)/0.2)]',
     'bg-[rgb(var(--ec-page-bg)/0.88)]',
@@ -926,6 +989,80 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
     }
   };
 
+  const clampSidebarWidth = (width) => Math.min(MAXIMUM_SIDEBAR_WIDTH, Math.max(MINIMUM_SIDEBAR_WIDTH, width));
+
+  const applySidebarWidth = (width) => {
+    const nextWidth = clampSidebarWidth(width);
+    document.documentElement.style.setProperty('--ec-sidebar-panel-width', `${nextWidth}px`);
+
+    const resizeHandle = document.getElementById('sidebar-resize-handle');
+    resizeHandle?.setAttribute('aria-valuenow', String(Math.round(nextWidth)));
+    return nextWidth;
+  };
+
+  const persistSidebarWidth = (width) => {
+    try {
+      localStorage.setItem(SIDEBAR_WIDTH_STORAGE_KEY, String(Math.round(width)));
+    } catch (error) {}
+  };
+
+  const getPersistedSidebarWidth = () => {
+    try {
+      const savedWidth = Number(localStorage.getItem(SIDEBAR_WIDTH_STORAGE_KEY));
+      return Number.isFinite(savedWidth) && savedWidth > 0 ? clampSidebarWidth(savedWidth) : null;
+    } catch (error) {
+      return null;
+    }
+  };
+
+  const setupSidebarResize = () => {
+    const sidebar = document.getElementById('sidebar');
+    const resizeHandle = document.getElementById('sidebar-resize-handle');
+    if (!sidebar || !resizeHandle) return;
+
+    const persistedWidth = getPersistedSidebarWidth();
+    const currentWidth = persistedWidth ?? sidebar.getBoundingClientRect().width;
+    applySidebarWidth(currentWidth);
+
+    resizeHandle.onpointerdown = (event) => {
+      if (event.button !== 0) return;
+
+      const startX = event.clientX;
+      const startWidth = sidebar.getBoundingClientRect().width;
+      document.body.classList.add('sidebar-is-resizing');
+      resizeHandle.setPointerCapture(event.pointerId);
+
+      resizeHandle.onpointermove = (moveEvent) => {
+        applySidebarWidth(startWidth + moveEvent.clientX - startX);
+      };
+
+      const finishResize = (upEvent) => {
+        const finalWidth = applySidebarWidth(startWidth + upEvent.clientX - startX);
+        persistSidebarWidth(finalWidth);
+        document.body.classList.remove('sidebar-is-resizing');
+        if (resizeHandle.hasPointerCapture(upEvent.pointerId)) {
+          resizeHandle.releasePointerCapture(upEvent.pointerId);
+        }
+        resizeHandle.onpointermove = null;
+        resizeHandle.onpointerup = null;
+        resizeHandle.onpointercancel = null;
+      };
+
+      resizeHandle.onpointerup = finishResize;
+      resizeHandle.onpointercancel = finishResize;
+    };
+
+    resizeHandle.onkeydown = (event) => {
+      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+
+      event.preventDefault();
+      const direction = event.key === 'ArrowLeft' ? -1 : 1;
+      const step = event.shiftKey ? 32 : 16;
+      const nextWidth = applySidebarWidth(sidebar.getBoundingClientRect().width + direction * step);
+      persistSidebarWidth(nextWidth);
+    };
+  };
+
   // Apply immediately when this script executes so transitions don't briefly re-open the rail.
   applyPersistedVerticalNavState();
 
@@ -1015,6 +1152,7 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
     }
 
     setVerticalNavCollapsedState(getPersistedVerticalNavCollapsedState());
+    setupSidebarResize();
 
     syncNavItemStates();
 

package/eventcatalog/src/stores/sidebar-store/state.ts

@@ -68,7 +68,7 @@ const groupAdrsByStatus = (adrs: Adr[]): NavNode[] =>
 
     groups.push({
       type: 'group',
-      title: `${formatAdrStatus(status)} (${adrsForStatus.length})`,
+      title: formatAdrStatus(status),
       collapseKey: `adrs:status:${status}`,
       subtle: true,
       pages: [...adrsForStatus].sort(byResourceName).map(getAdrNodeKey),

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "4.3.3",
+  "version": "4.3.4",
   "publishConfig": {
     "access": "public"
   },
@@ -116,9 +116,9 @@
     "update-notifier": "^7.3.1",
     "uuid": "^10.0.0",
     "zod": "^4.3.6",
-    "@eventcatalog/linter": "1.1.8",
     "@eventcatalog/sdk": "2.26.3",
-    "@eventcatalog/visualiser": "^4.1.1"
+    "@eventcatalog/visualiser": "^4.1.1",
+    "@eventcatalog/linter": "1.1.8"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.9",