@eventcatalog/core 4.3.3 → 4.4.0

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.4.0";
 
 // 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-P7BFML7F.js";
+import "../chunk-JSOK4BIG.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.4.0";
 
 // 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-57CTITPR.js";
 import "../chunk-K2XIENVT.js";
-import "../chunk-PXBG5QKU.js";
+import "../chunk-P7BFML7F.js";
+import "../chunk-JSOK4BIG.js";
 import "../chunk-6QENHZZP.js";
 export {
   log_build_default as default

package/dist/{chunk-OWE74ZHY.js → chunk-57CTITPR.js}

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

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

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

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

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

package/dist/{chunk-UW52WRSH.js → chunk-P7BFML7F.js}

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

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

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-2IGBU3PN.js";
+} from "./chunk-LNOQKTI4.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.4.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

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

package/dist/docs/api/02-config.md

@@ -704,12 +704,20 @@ module.exports = {
 
 - Type: `boolean`
 
-Setting this to true will automatically compress all your CSS, HTML, SVG, JavaScript, JSON and image files in the Astro outDir folder.
+Setting this to true will automatically compress your HTML, SVG, JavaScript, JSON and image files in the Astro outDir folder.
 
 This is disabled by default from EventCatalog v2.61.9.
 
 **This only works for static builds.**
 
+<AddedIn version="4.4.0" />
+
+`astro-compress` is no longer bundled with EventCatalog. Install it in your EventCatalog project before enabling compression:
+
+```bash
+npm install --save-dev astro-compress
+```
+
 ```js title="eventcatalog.config.js"
 module.exports = {
   compress: true

package/dist/docs/development/deployment/build-and-deploy.md

@@ -46,7 +46,13 @@ npx eventcatalog dev --debug -- --env=production --port=3000
 
 You can opt into our build step which will compress your static assets. 
 
-You can enable this by setting the [compress option](/docs/api/config#compress) to `true` in your `eventcatalog.config.js` file.
+First install the compression integration in your EventCatalog project:
+
+```bash
+npm install --save-dev astro-compress
+```
+
+Then set the [compress option](/docs/api/config#compress) to `true` in your `eventcatalog.config.js` file.
 
 :::info "Why is compression disabled by default?"
 Compression can increase your build time and the amount of memory required to build your catalog.

package/dist/docs/development/guides/98-versioning-resources.md

@@ -10,7 +10,6 @@ description: Learn how versioning works for EventCatalog resources.
 ---
 
 import ProjectTree from '@site/src/components/MDX/ProjectTree';
-import AddedIn from '@site/src/components/MDX/AddedIn';
 
 EventCatalog resources can be versioned when you want to preserve how a resource looked at a point in time.
 
@@ -111,20 +110,6 @@ For example:
 
 This lets users compare the current resource with previous versions when they need historical context.
 
-### Stable URLs for the latest version
-
-<AddedIn version="4.3.3" />
-
-For services, the URLs for the latest version and its sub-pages (changelog, specifications, and attached documentation) stay versionless and never change as the service is versioned up.
-
-| Page | URL |
-|------|-----|
-| Overview | `/docs/services/Orders` |
-| Changelog | `/docs/services/Orders/changelog` |
-| OpenAPI spec | `/docs/services/Orders/spec/openapi` |
-
-Share these links freely. When `Orders` moves from `1.0.0` to `2.0.0`, the versionless URLs keep resolving to whatever is latest, so the link never rots. Historical versions keep their versioned URLs, for example `/docs/services/Orders/1.0.0/changelog`.
-
 ## Referencing versions
 
 When one resource references another resource, you can include a `version` field when you want to point to a specific version.

package/dist/docs/development/guides/resources/services/07-versioning-and-lifecycle/01-version-services.md

@@ -8,8 +8,6 @@ title: Version services
 description: Learn how to version services
 ---
 
-import AddedIn from '@site/src/components/MDX/AddedIn';
-
 All content in EventCatalog can be versioned. This allows you to keep historic versions of content which can give context to users why things are changing.
 
 ## How to version a service

package/dist/docs/plugins/openapi/03-features.md

@@ -99,12 +99,16 @@ routes: [{ prefix: '/api', suffix: '/events' }]
 routes: [{ match: '/api/*/track' }]
 ```
 
-#### How consumers are created and updated
+#### How consumers are looked up and updated
 
-When the generator runs, each consumer service is looked up by `id` and `version`. If a consumer service does not yet exist, it is created automatically with a basic `<NodeGraph />` page. New consumers are placed inside the configured `domain` if one is defined.
+When the generator runs, each consumer service is looked up by `id` and `version`. The consumer service must already exist in the catalog. If it cannot be found, the consumer entry is skipped; the generator does not create a service page or add the consumer to the configured `domain`.
 
 If the consumer already exists in the catalog, it is updated in-place so its existing markdown, location, and metadata are preserved. The `sends` list on the consumer is merged with the incoming messages, with deduplication applied. If a consumer entry already tracks a versioned message, its version is updated to the latest value from the spec.
 
+:::note
+If another generator creates the consumer service, place that generator before the OpenAPI generator that references it. Otherwise, the consumer relationship is skipped for that generation run.
+:::
+
 ---
 
 ### Mapping messages as commands, queries or events

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.4.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.config.d.cts

@@ -264,6 +264,10 @@ interface Config {
         allowAnyEnvInSpecHeaders?: boolean;
     };
     mdxOptimize?: boolean;
+    /**
+     * Compress static build output using astro-compress installed in the EventCatalog project.
+     * @default false
+     */
     compress?: boolean;
     pages?: {
         /**

package/dist/eventcatalog.config.d.ts

@@ -264,6 +264,10 @@ interface Config {
         allowAnyEnvInSpecHeaders?: boolean;
     };
     mdxOptimize?: boolean;
+    /**
+     * Compress static build output using astro-compress installed in the EventCatalog project.
+     * @default false
+     */
     compress?: boolean;
     pages?: {
         /**

package/dist/eventcatalog.js

@@ -1,8 +1,11 @@
 import {
   log_build_default
-} from "./chunk-OWE74ZHY.js";
-import "./chunk-UW52WRSH.js";
+} from "./chunk-57CTITPR.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-UWBPGWUW.js";
 import {
   logger
-} from "./chunk-2IGBU3PN.js";
+} from "./chunk-LNOQKTI4.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-P7BFML7F.js";
 import {
   createAstroDevLineFilter,
   createAstroLineFilter
@@ -38,7 +38,7 @@ import {
 import "./chunk-W5JQON7Z.js";
 import {
   VERSION
-} from "./chunk-PXBG5QKU.js";
+} from "./chunk-JSOK4BIG.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.4.0";
 
 // 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-UWBPGWUW.js";
+import "./chunk-LNOQKTI4.js";
+import "./chunk-JSOK4BIG.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.4.0";
 
 // 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-LNOQKTI4.js";
+import "../chunk-JSOK4BIG.js";
 export {
   logger
 };

package/eventcatalog/astro.config.mjs

@@ -15,6 +15,7 @@ import remarkComment from 'remark-comment';
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import { eventCatalogLikeC4 } from './src/plugins/likec4';
+import { loadAstroCompressIntegration } from './src/plugins/astro-compress';
 import { astroTrailingSlashEndpointFix } from './src/plugins/astro-trailing-slash-endpoint-fix';
 
 import rehypeExpressiveCode from 'rehype-expressive-code';
@@ -107,12 +108,7 @@ export default defineConfig({
         rehypePlugins: mdxRehypePlugins,
       }),
     }),
-    effectiveOutput !== 'server' &&
-      compress &&
-      (await import('astro-compress')).default({
-        Logger: 0,
-        CSS: false,
-      }),
+    effectiveOutput !== 'server' && compress && (await loadAstroCompressIntegration(projectDirectory)),
     ecstudioWatcher(),
     eventCatalogIntegration(),
   ].filter(Boolean),

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, isTopLevel);
+    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,39 @@
 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('keeps top-level groups expanded', () => {
+    expect(canCollapseGroup(6, true)).toBe(false);
+  });
+
+  it('only allows nested groups with more than five children to collapse', () => {
+    expect(canCollapseGroup(5, false)).toBe(false);
+    expect(canCollapseGroup(6, false)).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,21 @@
 // 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, isTopLevel: boolean): boolean =>
+  !isTopLevel && 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/plugins/astro-compress.ts

@@ -0,0 +1,36 @@
+import type { AstroIntegration } from 'astro';
+import { createRequire } from 'node:module';
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+const astroCompressInstallMessage = `Compression is enabled, but astro-compress is not installed.
+
+Install it in your EventCatalog project:
+
+  npm install --save-dev astro-compress`;
+
+type AstroCompressModule = {
+  default?: (options: { Logger: number; CSS: boolean }) => AstroIntegration;
+};
+
+export const loadAstroCompressIntegration = async (projectDirectory: string): Promise<AstroIntegration> => {
+  let astroCompressPath: string;
+
+  try {
+    const requireFromCatalog = createRequire(join(projectDirectory, 'package.json'));
+    astroCompressPath = requireFromCatalog.resolve('astro-compress');
+  } catch (error) {
+    throw new Error(`${astroCompressInstallMessage}\n\n${error instanceof Error ? error.message : String(error)}`);
+  }
+
+  const astroCompress = (await import(/* @vite-ignore */ pathToFileURL(astroCompressPath).href)) as AstroCompressModule;
+
+  if (typeof astroCompress.default !== 'function') {
+    throw new Error('The installed astro-compress package does not have a default integration export.');
+  }
+
+  return astroCompress.default({
+    Logger: 0,
+    CSS: false,
+  });
+};

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.4.0",
   "publishConfig": {
     "access": "public"
   },
@@ -62,7 +62,6 @@
     "@xyflow/react": "^12.3.6",
     "ai": "^6.0.17",
     "astro": "^7.1.1",
-    "astro-compress": "^2.4.0",
     "astro-expressive-code": "^0.44.0",
     "astro-seo": "^0.8.4",
     "auth-astro": "^4.2.0",
@@ -116,9 +115,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",