@eventcatalog/core 3.17.6 → 3.18.1

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

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-VY646YFE.js";
-import "../chunk-7N35ESMH.js";
+} from "../chunk-RROI5V6Z.js";
+import "../chunk-ZCXH24ET.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -111,7 +111,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "3.17.6";
+var version = "3.18.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-JB32XRPB.js";
-import "../chunk-VY646YFE.js";
+} from "../chunk-2N7MUB5X.js";
+import "../chunk-RROI5V6Z.js";
 import "../chunk-4UVFXLPI.js";
-import "../chunk-7N35ESMH.js";
+import "../chunk-ZCXH24ET.js";
 import "../chunk-5T63CXKU.js";
 export {
   log_build_default as default

package/dist/{chunk-JB32XRPB.js → chunk-2N7MUB5X.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-VY646YFE.js";
+} from "./chunk-RROI5V6Z.js";
 import {
   countResources,
   serializeCounts

package/dist/{chunk-JR3DP5PU.js → chunk-JT4MBAV4.js}

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

package/dist/{chunk-VY646YFE.js → chunk-RROI5V6Z.js}

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

package/dist/{chunk-CSCCSFEV.js → chunk-TUP5UN7R.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-JR3DP5PU.js";
+} from "./chunk-JT4MBAV4.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/{chunk-7N35ESMH.js → chunk-ZCXH24ET.js}

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

package/dist/constants.cjs

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-7N35ESMH.js";
+} from "./chunk-ZCXH24ET.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -114,7 +114,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.17.6";
+var version = "3.18.1";
 
 // 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-JB32XRPB.js";
-import "./chunk-VY646YFE.js";
+} from "./chunk-2N7MUB5X.js";
+import "./chunk-RROI5V6Z.js";
 import "./chunk-4UVFXLPI.js";
 import {
   runMigrations
@@ -22,13 +22,13 @@ import {
 } from "./chunk-3KXCGYET.js";
 import {
   generate
-} from "./chunk-CSCCSFEV.js";
+} from "./chunk-TUP5UN7R.js";
 import {
   logger
-} from "./chunk-JR3DP5PU.js";
+} from "./chunk-JT4MBAV4.js";
 import {
   VERSION
-} from "./chunk-7N35ESMH.js";
+} from "./chunk-ZCXH24ET.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/generate.cjs

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

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-CSCCSFEV.js";
-import "./chunk-JR3DP5PU.js";
-import "./chunk-7N35ESMH.js";
+} from "./chunk-TUP5UN7R.js";
+import "./chunk-JT4MBAV4.js";
+import "./chunk-ZCXH24ET.js";
 import "./chunk-5T63CXKU.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 = "3.17.6";
+var version = "3.18.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-JR3DP5PU.js";
-import "../chunk-7N35ESMH.js";
+} from "../chunk-JT4MBAV4.js";
+import "../chunk-ZCXH24ET.js";
 export {
   logger
 };

package/eventcatalog/src/components/EnvironmentDropdown.tsx

@@ -63,7 +63,7 @@ export const EnvironmentDropdown: React.FC<EnvironmentDropdownProps> = ({ enviro
       <button
         type="button"
         onClick={toggleDropdown}
-        className="flex items-center space-x-1 text-sm font-medium text-[rgb(var(--ec-header-text))] hover:text-[rgb(var(--ec-icon-hover))] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] rounded-md px-3 py-2"
+        className="flex items-center space-x-1 text-sm font-medium text-[rgb(var(--ec-header-text)/0.7)] hover:text-[rgb(var(--ec-header-text))] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] rounded-md px-3 py-2 transition-colors"
         aria-expanded={isOpen}
         aria-haspopup="true"
       >

package/eventcatalog/src/components/Header.astro

@@ -29,7 +29,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
 >
   <div class="px-4 sm:px-4 lg:px-4">
     <div class="flex justify-between items-center">
-      <div class="flex-shrink-0 flex items-center w-3/12">
+      <div class="flex-shrink-0 flex items-center w-3/12 lg:w-[360px]">
         <a href={buildUrl(catalog.landingPage || '/')} class="flex space-x-2 items-center group">
           {
             logo.src && logo.src !== '/' && (
@@ -45,7 +45,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
       </div>
 
       <div class="hidden lg:flex flex-grow -ml-1 items-center">
-        <div class="flex-grow max-w-xl">
+        <div class="w-full max-w-xl">
           <Search />
         </div>
         {isEventCatalogChatEnabled() && <ChatPanelButton client:idle />}
@@ -132,7 +132,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                         <img
                           src={buildUrl('/icons/discord.svg', true)}
                           alt=""
-                          class="h-6 w-6  hover:opacity-100 transition-opacity"
+                          class="h-6 w-6 hover:opacity-100 transition-opacity ec-themed-icon"
                           aria-hidden="true"
                         />
                       </a>
@@ -146,7 +146,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                         <img
                           src={buildUrl('/icons/github.svg', true)}
                           alt=""
-                          class="h-6 w-6  hover:opacity-100 transition-opacity"
+                          class="h-6 w-6 hover:opacity-100 transition-opacity ec-themed-icon"
                           aria-hidden="true"
                         />
                       </a>
@@ -164,7 +164,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                         <img
                           src={buildUrl('/icons/github.svg', true)}
                           alt=""
-                          class="h-6 w-6 opacity-70 hover:opacity-100 transition-opacity"
+                          class="h-6 w-6 opacity-70 hover:opacity-100 transition-opacity ec-themed-icon"
                           aria-hidden="true"
                         />
                       </a>

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

@@ -8,9 +8,9 @@
  * - URL building with Astro's URL utilities
  */
 
-import { useCallback, lazy, Suspense } from 'react';
-import '@eventcatalog/visualiser/styles.css';
+import { useCallback, lazy, Suspense, useEffect } from 'react';
 import type { Node, Edge } from '@xyflow/react';
+import { buildUrl } from '@utils/url-builder';
 
 const NodeGraph = lazy(() => import('@eventcatalog/visualiser').then((module) => ({ default: module.NodeGraph })));
 
@@ -39,17 +39,21 @@ interface AstroNodeGraphProps {
 }
 
 const AstroNodeGraph = ({ isDevMode = false, resourceKey, ...otherProps }: AstroNodeGraphProps) => {
+  useEffect(() => {
+    // Load visualizer styles only when this component is mounted.
+    // Use the core-scoped stylesheet so visualizer styles don't override EventCatalog utility classes globally.
+    import('@eventcatalog/visualiser/styles-core.css');
+  }, []);
+
   // Astro-specific navigation handler
   const handleNavigate = useCallback((url: string) => {
     // Use window.location for navigation since we can't import astro:transitions/client in a React component
     window.location.href = url;
   }, []);
 
-  // Astro-specific URL builder
+  // Astro-specific URL builder that respects the configured base path
   const handleBuildUrl = useCallback((path: string) => {
-    // Simple URL builder - just return the path as-is
-    // The consuming app (core) should handle base URLs if needed
-    return path;
+    return buildUrl(path);
   }, []);
 
   // Layout persistence: Save layout to Astro API route

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

@@ -1,7 +1,7 @@
 const NodeGraphPortal = (props: any) => {
   return (
     <div
-      className="h-[30em] my-6 mb-12 w-full relative border border-[rgb(var(--ec-page-border))] rounded-md"
+      className="h-[30em] my-6 mb-12 w-full relative !border !border-[rgb(var(--ec-page-border))] rounded-md overflow-hidden"
       id={`${props.id}-portal`}
       style={{
         maxHeight: props.maxHeight ? `${props.maxHeight}em` : `30em`,

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

@@ -33,14 +33,14 @@ export default function ApiAccessSection({
   const isCopied = copiedId === `${message.data.id}-api`;
 
   return (
-    <div className="flex-shrink-0 border-b border-gray-100">
+    <div className="flex-shrink-0 border-b border-[rgb(var(--ec-page-border))]">
       <button
         onClick={onToggle}
-        className="w-full flex items-center justify-between px-4 py-2 text-left hover:bg-gray-50/50 transition-colors"
+        className="w-full flex items-center justify-between px-4 py-2 text-left hover:bg-[rgb(var(--ec-page-bg)/0.5)] transition-colors"
       >
         <div className="flex items-center gap-2">
-          <CommandLineIcon className="h-3.5 w-3.5 text-gray-700" />
-          <span className="text-xs font-medium text-gray-700">API</span>
+          <CommandLineIcon className="h-3.5 w-3.5 text-[rgb(var(--ec-icon-color))]" />
+          <span className="text-xs font-medium text-[rgb(var(--ec-page-text))]">API</span>
           {!apiAccessEnabled && (
             <span className="inline-flex items-center gap-1 rounded bg-[rgb(var(--ec-accent-subtle))] px-1.5 py-0.5 text-[10px] font-medium text-[rgb(var(--ec-accent-text))] border border-[rgb(var(--ec-accent)/0.2)]">
               <LockClosedIcon className="h-2.5 w-2.5" />
@@ -49,9 +49,9 @@ export default function ApiAccessSection({
           )}
         </div>
         {isExpanded ? (
-          <ChevronUpIcon className="h-3.5 w-3.5 text-gray-400" />
+          <ChevronUpIcon className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))]" />
         ) : (
-          <ChevronDownIcon className="h-3.5 w-3.5 text-gray-400" />
+          <ChevronDownIcon className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))]" />
         )}
       </button>
 
@@ -81,7 +81,7 @@ export default function ApiAccessSection({
                   className={`inline-flex items-center gap-1.5 px-2 py-1 text-[10px] font-medium rounded border transition-colors ${
                     copiedId === `${message.data.id}-curl`
                       ? 'bg-emerald-50 text-emerald-600 border-emerald-200'
-                      : 'text-gray-500 border-gray-200 hover:bg-gray-50 hover:text-gray-700'
+                      : 'text-[rgb(var(--ec-page-text-muted))] border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-input-bg))] hover:text-[rgb(var(--ec-page-text))]'
                   }`}
                 >
                   {copiedId === `${message.data.id}-curl` ? (
@@ -101,7 +101,7 @@ export default function ApiAccessSection({
                   className={`inline-flex items-center gap-1.5 px-2 py-1 text-[10px] font-medium rounded border transition-colors ${
                     copiedId === `${message.data.id}-url`
                       ? 'bg-emerald-50 text-emerald-600 border-emerald-200'
-                      : 'text-gray-500 border-gray-200 hover:bg-gray-50 hover:text-gray-700'
+                      : 'text-[rgb(var(--ec-page-text-muted))] border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-input-bg))] hover:text-[rgb(var(--ec-page-text))]'
                   }`}
                 >
                   {copiedId === `${message.data.id}-url` ? (
@@ -121,8 +121,8 @@ export default function ApiAccessSection({
           ) : (
             <div className="flex items-center justify-between gap-3 bg-[rgb(var(--ec-accent-subtle))] border border-[rgb(var(--ec-accent)/0.2)] rounded-md px-3 py-2.5">
               <div className="flex-1 min-w-0">
-                <p className="text-xs font-medium text-gray-700">Access schemas via API</p>
-                <p className="text-[10px] text-gray-500 mt-0.5">CI/CD, automation & integrations</p>
+                <p className="text-xs font-medium text-[rgb(var(--ec-page-text))]">Access schemas via API</p>
+                <p className="text-[10px] text-[rgb(var(--ec-page-text-muted))] mt-0.5">CI/CD, automation & integrations</p>
               </div>
               <a
                 href="https://eventcatalog.cloud"

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

@@ -29,8 +29,8 @@ export default function ApiContentViewer({ message, onCopy, copiedId, apiAccessE
           <div className="flex items-center justify-center w-16 h-16 mx-auto mb-4 rounded-2xl bg-[rgb(var(--ec-accent-subtle))] border border-[rgb(var(--ec-accent)/0.3)]">
             <LockClosedIcon className="h-8 w-8 text-[rgb(var(--ec-accent))]" />
           </div>
-          <h3 className="text-lg font-semibold text-gray-900 mb-2">API Access</h3>
-          <p className="text-sm text-gray-600 mb-6">
+          <h3 className="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">API Access</h3>
+          <p className="text-sm text-[rgb(var(--ec-page-text-muted))] mb-6">
             Access your schemas programmatically via REST API. Perfect for CI/CD pipelines, automation, and integrations with your
             development workflow.
           </p>
@@ -45,7 +45,7 @@ export default function ApiContentViewer({ message, onCopy, copiedId, apiAccessE
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
             </svg>
           </a>
-          <p className="text-xs text-gray-500 mt-3">Start your 14-day free trial</p>
+          <p className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-3">Start your 14-day free trial</p>
         </div>
       </div>
     );
@@ -56,12 +56,12 @@ export default function ApiContentViewer({ message, onCopy, copiedId, apiAccessE
       <div className="max-w-2xl">
         {/* Header */}
         <div className="flex items-center gap-3 mb-6">
-          <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-gray-100">
-            <CommandLineIcon className="h-5 w-5 text-gray-700" />
+          <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-[rgb(var(--ec-accent-subtle))]">
+            <CommandLineIcon className="h-5 w-5 text-[rgb(var(--ec-icon-color))]" />
           </div>
           <div>
-            <h3 className="text-sm font-semibold text-gray-900">API Access</h3>
-            <p className="text-xs text-gray-500">Access this schema programmatically</p>
+            <h3 className="text-sm font-semibold text-[rgb(var(--ec-page-text))]">API Access</h3>
+            <p className="text-xs text-[rgb(var(--ec-page-text-muted))]">Access this schema programmatically</p>
           </div>
         </div>
 
@@ -125,16 +125,18 @@ export default function ApiContentViewer({ message, onCopy, copiedId, apiAccessE
         </div>
 
         {/* Response Info */}
-        <div className="border border-gray-200 rounded-lg p-4">
-          <h4 className="text-xs font-semibold text-gray-900 mb-3">Response</h4>
+        <div className="border border-[rgb(var(--ec-page-border))] rounded-lg p-4">
+          <h4 className="text-xs font-semibold text-[rgb(var(--ec-page-text))] mb-3">Response</h4>
           <div className="space-y-2">
             <div className="flex items-center justify-between text-xs">
-              <span className="text-gray-500">Content-Type</span>
-              <code className="text-gray-700 bg-gray-100 px-2 py-0.5 rounded">application/json</code>
+              <span className="text-[rgb(var(--ec-page-text-muted))]">Content-Type</span>
+              <code className="text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-input-bg))] px-2 py-0.5 rounded">
+                application/json
+              </code>
             </div>
             <div className="flex items-center justify-between text-xs">
-              <span className="text-gray-500">Returns</span>
-              <span className="text-gray-700">Raw schema content</span>
+              <span className="text-[rgb(var(--ec-page-text-muted))]">Returns</span>
+              <span className="text-[rgb(var(--ec-page-text))]">Raw schema content</span>
             </div>
           </div>
         </div>

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

@@ -4,14 +4,14 @@ import SearchModal from './SearchModal.tsx';
 ---
 
 <div>
-  <div class="relative flex items-center w-full pr-4">
+  <div class="relative flex items-center w-full pr-4 ml-1">
     <input
       id="search-dummy-input"
       type="text"
       name="search"
       placeholder="Search EventCatalog"
       autocomplete="off"
-      class="block w-full rounded-md caret-transparent border-0 py-1.5 pr-14 pl-10 text-[rgb(var(--ec-header-text))] bg-[rgb(var(--ec-dropdown-bg))] shadow-sm ring-1 ring-inset ring-[rgb(var(--ec-dropdown-border))] placeholder:text-[rgb(var(--ec-icon-color))] font-light sm:text-sm sm:leading-6 px-4"
+      class="block w-full rounded-md caret-transparent border-0 py-1.5 pr-14 !pl-10 text-[rgb(var(--ec-header-text))] bg-[rgb(var(--ec-dropdown-bg))] shadow-sm ring-1 ring-inset ring-[rgb(var(--ec-dropdown-border))] placeholder:text-[rgb(var(--ec-icon-color))] font-light sm:text-sm sm:leading-6"
     />
     <MagnifyingGlassIcon className="absolute inset-y-0 left-0 h-9 w-8 flex items-center pl-4 text-[rgb(var(--ec-icon-color))]" />
     <div class="absolute inset-y-0 right-0 flex py-1.5 pr-6">

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

@@ -190,7 +190,7 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
               placeholder="Search resources..."
               value={searchQuery}
               onChange={(e) => handleSearchChange(e.target.value)}
-              className="w-full pl-9 pr-8 py-2 text-sm bg-[rgb(var(--ec-input-bg))] border border-[rgb(var(--ec-input-border))] rounded-lg focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:border-transparent text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-input-placeholder))]"
+              className="w-full !pl-9 !pr-8 !py-2 !text-sm !bg-[rgb(var(--ec-input-bg))] !border !border-[rgb(var(--ec-input-border))] !rounded-lg focus:!outline-none focus:!ring-2 focus:!ring-[rgb(var(--ec-accent))] focus:!border-transparent !text-[rgb(var(--ec-input-text))] placeholder:!text-[rgb(var(--ec-input-placeholder))]"
             />
             {searchQuery && (
               <button

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

@@ -865,7 +865,7 @@ export default function NestedSideBar() {
             <span
               className={cn(
                 'flex items-center justify-center w-5 h-5 flex-shrink-0',
-                isActive ? 'text-[rgb(var(--ec-content-text))]' : 'text-[rgb(var(--ec-content-text-muted))]'
+                isActive ? 'text-[rgb(var(--ec-accent-text))]' : 'text-[rgb(var(--ec-content-text-muted))]'
               )}
             >
               <IconComponent className="w-4 h-4" />
@@ -876,7 +876,7 @@ export default function NestedSideBar() {
             className={cn(
               'text-[13px] truncate',
               isActive
-                ? 'text-[rgb(var(--ec-content-text))] font-medium'
+                ? 'text-[rgb(var(--ec-accent-text))] font-medium'
                 : 'text-[rgb(var(--ec-content-text-secondary))] group-hover:text-[rgb(var(--ec-content-text))]'
             )}
           >
@@ -910,7 +910,7 @@ export default function NestedSideBar() {
       'group flex items-center justify-between w-full px-3 py-1.5 rounded-lg cursor-pointer text-left transition-colors hover:bg-[rgb(var(--ec-content-hover))] active:bg-[rgb(var(--ec-content-hover))]';
     const parentClasses = itemHasChildren ? 'font-medium' : '';
     const activeClasses = isActive
-      ? 'bg-[rgb(var(--ec-content-active))] hover:bg-[rgb(var(--ec-content-active))] border-l-2 border-[rgb(var(--ec-accent))] rounded-l-none'
+      ? 'bg-[rgb(var(--ec-accent-subtle))] hover:bg-[rgb(var(--ec-accent-subtle))] !rounded-none'
       : '';
 
     // Leaf item with href → render as link
@@ -1122,8 +1122,7 @@ 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-500/10 active:bg-amber-500/20',
-                          isActive &&
-                            'bg-[rgb(var(--ec-content-active))] hover:bg-[rgb(var(--ec-content-active))] border-l-2 border-[rgb(var(--ec-accent))] rounded-l-none'
+                          isActive && 'bg-[rgb(var(--ec-accent-subtle))] hover:bg-[rgb(var(--ec-accent-subtle))] !rounded-none'
                         )}
                       >
                         <div className="flex items-center gap-2.5 min-w-0 flex-1">
@@ -1131,7 +1130,7 @@ export default function NestedSideBar() {
                             className={cn(
                               'text-[14px] truncate',
                               isActive
-                                ? 'text-[rgb(var(--ec-content-text))] font-medium'
+                                ? 'text-[rgb(var(--ec-accent-text))] font-medium'
                                 : 'text-[rgb(var(--ec-content-text-secondary))] group-hover:text-[rgb(var(--ec-content-text))]'
                             )}
                           >

package/eventcatalog/src/content.config.ts

@@ -311,6 +311,14 @@ const flows = defineCollection({
     .merge(baseSchema),
 });
 
+const operationSchema = z
+  .object({
+    method: z.enum(['GET', 'POST', 'PUT', 'DELETE', 'PATCH']).optional(),
+    path: z.string().optional(),
+    statusCodes: z.array(z.string()).optional(),
+  })
+  .optional();
+
 const messageDetailsPanelPropertySchema = z.object({
   producers: detailPanelPropertySchema.optional(),
   consumers: detailPanelPropertySchema.optional(),
@@ -332,10 +340,12 @@ const events = defineCollection({
   }),
   schema: z
     .object({
+      // Used by users
+      operation: operationSchema,
+      // Used by eventcatalog
       producers: z.array(reference('services')).optional(),
       consumers: z.array(reference('services')).optional(),
       channels: z.array(channelPointer).optional(),
-      // Used by eventcatalog
       messageChannels: z.array(reference('channels')).optional(),
       detailsPanel: messageDetailsPanelPropertySchema.optional(),
     })
@@ -352,11 +362,13 @@ const commands = defineCollection({
   }),
   schema: z
     .object({
+      // Used by users
+      operation: operationSchema,
+      // Used by eventcatalog
       producers: z.array(reference('services')).optional(),
       consumers: z.array(reference('services')).optional(),
       channels: z.array(channelPointer).optional(),
       detailsPanel: messageDetailsPanelPropertySchema.optional(),
-      // Used by eventcatalog
       messageChannels: z.array(reference('channels')).optional(),
     })
     .merge(baseSchema),
@@ -372,11 +384,13 @@ const queries = defineCollection({
   }),
   schema: z
     .object({
+      // Used by users
+      operation: operationSchema,
+      // Used by eventcatalog
       producers: z.array(reference('services')).optional(),
       consumers: z.array(reference('services')).optional(),
       channels: z.array(channelPointer).optional(),
       detailsPanel: messageDetailsPanelPropertySchema.optional(),
-      // Used by eventcatalog
       messageChannels: z.array(reference('channels')).optional(),
     })
     .merge(baseSchema),
@@ -622,6 +636,7 @@ const channels = defineCollection({
       channels: z.array(channelPointer).optional(),
       address: z.string().optional(),
       protocols: z.array(z.string()).optional(),
+      deliveryGuarantee: z.enum(['at-most-once', 'at-least-once', 'exactly-once']).optional(),
       routes: z.array(channelPointer).optional(),
       parameters: z
         .record(

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

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