@eventcatalog/core 3.29.2 → 3.31.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.29.2";
+var version = "3.31.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-VEUNSJ6Z.js";
-import "../chunk-MEJOYC5Z.js";
+} from "../chunk-QIJOBQZ7.js";
+import "../chunk-UY5QDWK7.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.29.2";
+var version = "3.31.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-36IA4UE4.js";
-import "../chunk-VEUNSJ6Z.js";
+} from "../chunk-7IGMIOQF.js";
+import "../chunk-QIJOBQZ7.js";
 import "../chunk-4UVFXLPI.js";
-import "../chunk-MEJOYC5Z.js";
+import "../chunk-UY5QDWK7.js";
 import "../chunk-5T63CXKU.js";
 export {
   log_build_default as default

package/dist/{chunk-36IA4UE4.js → chunk-7IGMIOQF.js}

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

package/dist/{chunk-EGQGCB2B.js → chunk-HVOLSUC2.js}

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

package/dist/{chunk-DB4IQ3GB.js → chunk-LWVHWR77.js}

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

package/dist/{chunk-VEUNSJ6Z.js → chunk-QIJOBQZ7.js}

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

package/dist/{chunk-MEJOYC5Z.js → chunk-UY5QDWK7.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "3.29.2";
+var version = "3.31.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.29.2";
+var version = "3.31.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-MEJOYC5Z.js";
+} from "./chunk-UY5QDWK7.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.29.2";
+var version = "3.31.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-K3ZVEX2Y.js";
 import {
   log_build_default
-} from "./chunk-36IA4UE4.js";
-import "./chunk-VEUNSJ6Z.js";
+} from "./chunk-7IGMIOQF.js";
+import "./chunk-QIJOBQZ7.js";
 import "./chunk-4UVFXLPI.js";
 import {
   runMigrations
@@ -22,13 +22,13 @@ import {
 } from "./chunk-3KXCGYET.js";
 import {
   generate
-} from "./chunk-DB4IQ3GB.js";
+} from "./chunk-LWVHWR77.js";
 import {
   logger
-} from "./chunk-EGQGCB2B.js";
+} from "./chunk-HVOLSUC2.js";
 import {
   VERSION
-} from "./chunk-MEJOYC5Z.js";
+} from "./chunk-UY5QDWK7.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.29.2";
+var version = "3.31.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-DB4IQ3GB.js";
-import "./chunk-EGQGCB2B.js";
-import "./chunk-MEJOYC5Z.js";
+} from "./chunk-LWVHWR77.js";
+import "./chunk-HVOLSUC2.js";
+import "./chunk-UY5QDWK7.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.29.2";
+var version = "3.31.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-EGQGCB2B.js";
-import "../chunk-MEJOYC5Z.js";
+} from "../chunk-HVOLSUC2.js";
+import "../chunk-UY5QDWK7.js";
 export {
   logger
 };

package/eventcatalog/astro.config.mjs

@@ -27,10 +27,12 @@ const projectDirectory = process.env.PROJECT_DIR || process.cwd();
 const base = config.base || '/';
 const host = config.host || false;
 const compress = config.compress ?? false;
+const isDevMode = process.env.EVENTCATALOG_DEV_MODE === 'true';
+const effectiveOutput = isDevMode ? 'server' : (config.output || 'static');
 
 
 const expressiveCodeConfig = {
-  themes: ['andromeeda'],
+  themes: ['github-light', 'github-dark'],
   defaultProps: {
     wrap: true,
   },
@@ -41,11 +43,13 @@ export default defineConfig({
   base,
   server: { port: config.port || 3000, host: host },
 
-  output: config.output || 'static',
+  // In dev mode (EVENTCATALOG_DEV_MODE=true) we need 'server' output so that
+  // routes which opt into SSR via `export const prerender = false` (e.g. the
+  // /api/settings/* editing endpoints) are actually invoked instead of being
+  // statically prerendered. Production builds keep the user's configured output.
+  output: effectiveOutput,
 
-  adapter: config.output === 'server' ? node({
-    mode: 'standalone'
-  }) : undefined,
+  adapter: effectiveOutput === 'server' ? node({ mode: 'standalone' }) : undefined,
 
   outDir: config.outDir ? join(projectDirectory, config.outDir) : join(projectDirectory, 'dist'),
 
@@ -83,7 +87,7 @@ export default defineConfig({
       ],
       gfm: true,
     }),
-    config.output !== 'server' && compress && (await import("astro-compress")).default({
+    effectiveOutput !== 'server' && compress && (await import("astro-compress")).default({
       Logger: 0,
       CSS: false,
     }),
@@ -99,7 +103,7 @@ export default defineConfig({
        * the eventcatalog.config, as the config use packages that only run in node environments,
        * such as `node:path`.
        */
-      '__EC_TRAILING_SLASH__': config.trailingSlash || false,
+      '__EC_TRAILING_SLASH__': JSON.stringify(config.trailingSlash === true),
       '__EC_BASE__': JSON.stringify(base),
     },
     server: {

package/eventcatalog/src/components/CopyAsMarkdown.tsx

@@ -36,17 +36,21 @@ const MenuItemContent = ({
   } else {
     // It must be an ElementType (component constructor like Lucide icon)
     const IconComponent = iconProp as React.ElementType;
-    iconElement = <IconComponent className="w-5 h-5 text-[rgb(var(--ec-icon-color))]" />;
+    iconElement = <IconComponent className="w-4 h-4 text-[rgb(var(--ec-icon-color))]" />;
   }
 
   return (
-    <div className="flex items-center gap-3 px-3 py-2 text-sm">
-      <div className="p-1 border border-[rgb(var(--ec-dropdown-border))] rounded">{iconElement}</div>
-      <div className="flex-1">
-        <div className="font-medium text-[rgb(var(--ec-dropdown-text))]">{title}</div>
-        <div className="text-xs text-[rgb(var(--ec-content-text-muted))]">{description}</div>
+    <div className="flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm">
+      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-[rgb(var(--ec-dropdown-border)/0.8)] bg-[rgb(var(--ec-page-bg))]">
+        {iconElement}
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-1.5 text-sm font-medium leading-5 text-[rgb(var(--ec-dropdown-text))]">
+          <span>{title}</span>
+          {external && <ExternalLink className="h-3.5 w-3.5 shrink-0 text-[rgb(var(--ec-icon-color))]" />}
+        </div>
+        <div className="text-xs leading-4 text-[rgb(var(--ec-content-text-muted))]">{description}</div>
       </div>
-      {external && <ExternalLink className="w-4 h-4 text-[rgb(var(--ec-icon-color))]" />}
     </div>
   );
 };
@@ -158,6 +162,7 @@ export function CopyPageMenu({
   };
 
   const defaultAction = getDefaultAction();
+  const [open, setOpen] = useState(false);
   const [buttonText, setButtonText] = useState(defaultAction?.text || 'Action');
 
   // Fetch the markdown from the url + .mdx
@@ -232,40 +237,40 @@ export function CopyPageMenu({
   }
 
   return (
-    <DropdownMenu.Root>
+    <DropdownMenu.Root open={open} onOpenChange={setOpen}>
       {/* Container for the split button */}
-      <div className="inline-flex rounded-md shadow-xs border border-[rgb(var(--ec-dropdown-border))]">
+      <div className="inline-flex h-8 items-stretch overflow-hidden rounded-md border border-[rgb(var(--ec-dropdown-border)/0.75)] bg-[rgb(var(--ec-page-bg))]">
         {/* Left Button: Default Action */}
         <button
           type="button"
           onClick={handleDefaultAction}
-          className="inline-flex items-center justify-center gap-1 px-3 py-1.5 text-sm font-medium text-[rgb(var(--ec-dropdown-text))] bg-[rgb(var(--ec-dropdown-bg))] rounded-l-md hover:bg-[rgb(var(--ec-dropdown-hover))] focus:z-10 focus:outline-hidden focus:ring-1 focus:ring-[rgb(var(--ec-accent))]"
+          className="inline-flex h-full items-center justify-center gap-2 whitespace-nowrap bg-transparent pl-4 pr-3 text-sm font-medium text-[rgb(var(--ec-dropdown-text))] transition-colors duration-150 hover:bg-[rgb(var(--ec-dropdown-hover)/0.75)] focus:z-10 focus:outline-hidden focus:ring-1 focus:ring-[rgb(var(--ec-accent))]"
         >
-          <defaultAction.icon className="w-4 h-4" />
+          <defaultAction.icon className="h-4 w-4" />
           {buttonText}
         </button>
         {/* Right Button: Dropdown Trigger */}
         <DropdownMenu.Trigger asChild>
           <button
             type="button"
-            className="inline-flex items-center justify-center px-1.5 py-1.5 text-sm font-medium text-[rgb(var(--ec-icon-color))] bg-[rgb(var(--ec-dropdown-bg))] rounded-r-md border-l border-[rgb(var(--ec-dropdown-border))] hover:bg-[rgb(var(--ec-dropdown-hover))] focus:z-10 focus:outline-hidden focus:ring-1 focus:ring-[rgb(var(--ec-accent))]"
+            className="inline-flex h-full w-8 items-center justify-center border-l border-[rgb(var(--ec-dropdown-border)/0.75)] bg-transparent text-sm font-medium text-[rgb(var(--ec-icon-color))] transition-colors duration-150 hover:bg-[rgb(var(--ec-dropdown-hover)/0.75)] focus:z-10 focus:outline-hidden focus:ring-1 focus:ring-[rgb(var(--ec-accent))]"
             aria-label="More options"
           >
-            <ChevronDownIcon className="w-4 h-4" />
+            <ChevronDownIcon className={`h-4 w-4 transition-transform duration-200 ${open ? 'rotate-180' : ''}`} />
           </button>
         </DropdownMenu.Trigger>
       </div>
 
       {/* Adjust styling for the content dropdown */}
       <DropdownMenu.Content
-        className="w-72 bg-[rgb(var(--ec-dropdown-bg))] rounded-lg shadow-lg border border-[rgb(var(--ec-dropdown-border))] mt-1 py-1"
-        sideOffset={5}
+        className="z-50 w-72 max-w-[calc(100vw-1.5rem)] rounded-2xl border border-[rgb(var(--ec-dropdown-border)/0.8)] bg-[rgb(var(--ec-page-bg))] px-1.5 py-1.5 shadow-[0_24px_64px_rgb(0_0_0/0.35)]"
+        sideOffset={10}
         align="end"
       >
         {availableActions.chat && (
           <>
             <DropdownMenu.Item
-              className="cursor-pointer hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-hidden focus:bg-[rgb(var(--ec-dropdown-hover))]"
+              className="cursor-pointer rounded-2xl outline-hidden transition-colors duration-150 hover:bg-[rgb(var(--ec-dropdown-hover))] data-[highlighted]:bg-[rgb(var(--ec-dropdown-hover))]"
               onSelect={() => window.dispatchEvent(new CustomEvent('eventcatalog:open-chat'))}
             >
               <MenuItemContent
@@ -274,13 +279,13 @@ export function CopyPageMenu({
                 description="Ask questions about this page"
               />
             </DropdownMenu.Item>
-            <DropdownMenu.Separator className="h-px my-1 bg-[rgb(var(--ec-dropdown-border))]" />
+            <DropdownMenu.Separator className="mx-3 my-3 h-px bg-[rgb(var(--ec-dropdown-border)/0.8)]" />
           </>
         )}
 
         {availableActions.copyMarkdown && (
           <DropdownMenu.Item
-            className="cursor-pointer hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-hidden focus:bg-[rgb(var(--ec-dropdown-hover))]"
+            className="cursor-pointer rounded-2xl outline-hidden transition-colors duration-150 hover:bg-[rgb(var(--ec-dropdown-hover))] data-[highlighted]:bg-[rgb(var(--ec-dropdown-hover))]"
             onSelect={() => copyMarkdownToClipboard()}
           >
             <MenuItemContent icon={Copy} title="Copy page" description="Copy page as Markdown for LLMs" />
@@ -312,7 +317,7 @@ export function CopyPageMenu({
             return (
               <DropdownMenu.Item
                 key={schema.url}
-                className="cursor-pointer hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-hidden focus:bg-[rgb(var(--ec-dropdown-hover))]"
+                className="cursor-pointer rounded-2xl outline-hidden transition-colors duration-150 hover:bg-[rgb(var(--ec-dropdown-hover))] data-[highlighted]:bg-[rgb(var(--ec-dropdown-hover))]"
                 onSelect={() => copySchemaToClipboard(schema)}
               >
                 <MenuItemContent icon={Icon} title={title} description={`Copy ${type} to clipboard`} />
@@ -322,7 +327,7 @@ export function CopyPageMenu({
 
         {availableActions.viewMarkdown && (
           <DropdownMenu.Item
-            className="cursor-pointer hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-hidden focus:bg-[rgb(var(--ec-dropdown-hover))]"
+            className="cursor-pointer rounded-2xl outline-hidden transition-colors duration-150 hover:bg-[rgb(var(--ec-dropdown-hover))] data-[highlighted]:bg-[rgb(var(--ec-dropdown-hover))]"
             onSelect={() => window.open(markdownUrl, '_blank')}
           >
             <MenuItemContent
@@ -336,7 +341,7 @@ export function CopyPageMenu({
 
         {availableActions.rssFeed && (
           <DropdownMenu.Item
-            className="cursor-pointer hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-hidden focus:bg-[rgb(var(--ec-dropdown-hover))]"
+            className="cursor-pointer rounded-2xl outline-hidden transition-colors duration-150 hover:bg-[rgb(var(--ec-dropdown-hover))] data-[highlighted]:bg-[rgb(var(--ec-dropdown-hover))]"
             onSelect={() => window.open(buildUrl(`/rss/all/rss.xml`), '_blank')}
           >
             <MenuItemContent icon={RssIcon} title="RSS Feed" description="View this page as RSS feed" external={true} />
@@ -345,7 +350,7 @@ export function CopyPageMenu({
 
         {availableActions.exportPDF && (
           <DropdownMenu.Item
-            className="cursor-pointer hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-hidden focus:bg-[rgb(var(--ec-dropdown-hover))]"
+            className="cursor-pointer rounded-2xl outline-hidden transition-colors duration-150 hover:bg-[rgb(var(--ec-dropdown-hover))] data-[highlighted]:bg-[rgb(var(--ec-dropdown-hover))]"
             onSelect={() => window.open(printUrl, '_blank')}
           >
             <MenuItemContent icon={PrinterIcon} title="Export to PDF" description="Open print-friendly version" external={true} />
@@ -354,9 +359,9 @@ export function CopyPageMenu({
 
         {availableActions.editPage && (
           <>
-            <DropdownMenu.Separator className="h-px my-1 bg-[rgb(var(--ec-dropdown-border))]" />
+            <DropdownMenu.Separator className="mx-3 my-3 h-px bg-[rgb(var(--ec-dropdown-border)/0.8)]" />
             <DropdownMenu.Item
-              className="cursor-pointer hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-hidden focus:bg-[rgb(var(--ec-dropdown-hover))]"
+              className="cursor-pointer rounded-2xl outline-hidden transition-colors duration-150 hover:bg-[rgb(var(--ec-dropdown-hover))] data-[highlighted]:bg-[rgb(var(--ec-dropdown-hover))]"
               onSelect={() => window.open(editUrl, '_blank')}
             >
               <MenuItemContent

package/eventcatalog/src/components/EnvironmentDropdown.tsx

@@ -63,30 +63,32 @@ 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)/0.7)] hover:text-[rgb(var(--ec-header-text))] focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--ec-accent))] rounded-md px-3 py-2 transition-colors"
+        className="group inline-flex items-center gap-2.5 rounded-xl border border-[rgb(var(--ec-header-border))] bg-[rgb(var(--ec-header-bg))] px-3.5 py-2 text-[13px] font-medium text-[rgb(var(--ec-header-text)/0.82)] shadow-xs transition-colors hover:border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-dropdown-hover)/0.35)] hover:text-[rgb(var(--ec-header-text))] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent))]"
         aria-expanded={isOpen}
         aria-haspopup="true"
       >
-        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="2"
-            d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
-          />
-        </svg>
-        <span>
-          Environments
+        <span className="h-2.5 w-2.5 rounded-full bg-emerald-400 shadow-[0_0_0_3px_rgba(16,185,129,0.14)]" aria-hidden="true" />
+        <span className="truncate">
+          <span className="font-semibold text-[rgb(var(--ec-header-text))]">Environments</span>
           {currentEnvironment && (
-            <span className="font-normal"> ({currentEnvironment.shortName || currentEnvironment.name})</span>
+            <span className="font-medium text-[rgb(var(--ec-header-text)/0.72)]">
+              {' '}
+              ({currentEnvironment.shortName || currentEnvironment.name})
+            </span>
           )}
         </span>
-        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          className={`ml-0.5 h-4 w-4 flex-shrink-0 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
         </svg>
       </button>
       <div
-        className={`${isOpen ? '' : 'hidden'} absolute right-0 mt-2 w-64 bg-[rgb(var(--ec-dropdown-bg))] rounded-md shadow-lg py-1 border border-[rgb(var(--ec-dropdown-border))] overflow-hidden z-[100]`}
+        className={`${isOpen ? '' : 'hidden'} absolute right-0 mt-2 w-72 overflow-hidden rounded-2xl border border-[rgb(var(--ec-dropdown-border))] bg-[rgb(var(--ec-dropdown-bg))] p-1.5 shadow-2xl z-[100]`}
       >
         {environments.map((env) => {
           const isCurrentEnv = currentEnvironment?.name === env.name;
@@ -103,18 +105,28 @@ export const EnvironmentDropdown: React.FC<EnvironmentDropdownProps> = ({ enviro
                 targetUrl.pathname = currentPath;
                 window.location.href = targetUrl.toString();
               }}
-              className={`block px-4 py-3 text-sm transition-colors border-b border-[rgb(var(--ec-dropdown-border)/0.3)] last:border-b-0 ${
+              className={`block rounded-xl px-3 py-3 transition-colors ${
                 isCurrentEnv
-                  ? 'bg-[rgb(var(--ec-accent)/0.1)] text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent)/0.2)]'
+                  ? 'bg-[rgb(var(--ec-accent)/0.12)] text-[rgb(var(--ec-dropdown-text))]'
                   : 'text-[rgb(var(--ec-dropdown-text))] hover:bg-[rgb(var(--ec-dropdown-hover))]'
               }`}
             >
-              <div className="flex items-center justify-between">
-                <div>
-                  <div className={`font-medium ${isCurrentEnv ? 'text-[rgb(var(--ec-accent))]' : ''}`}>{env.name}</div>
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span
+                      className={`mt-0.5 h-2 w-2 rounded-full flex-shrink-0 ${isCurrentEnv ? 'bg-emerald-400' : 'bg-[rgb(var(--ec-icon-color))]'}`}
+                      aria-hidden="true"
+                    />
+                    <div
+                      className={`truncate text-[13px] font-semibold ${isCurrentEnv ? 'text-[rgb(var(--ec-accent-text))]' : ''}`}
+                    >
+                      {env.name}
+                    </div>
+                  </div>
                   {env.description && (
                     <div
-                      className={`text-xs font-light mt-1 ${isCurrentEnv ? 'text-[rgb(var(--ec-accent)/0.8)]' : 'text-[rgb(var(--ec-icon-color))]'}`}
+                      className={`mt-1 pl-4 text-[12px] leading-5 ${isCurrentEnv ? 'text-[rgb(var(--ec-accent-text)/0.78)]' : 'text-[rgb(var(--ec-icon-color))]'}`}
                     >
                       {env.description}
                     </div>
@@ -122,7 +134,7 @@ export const EnvironmentDropdown: React.FC<EnvironmentDropdownProps> = ({ enviro
                 </div>
                 {isCurrentEnv && (
                   <svg
-                    className="w-4 h-4 text-[rgb(var(--ec-accent))] flex-shrink-0 ml-2"
+                    className="mt-0.5 h-4 w-4 flex-shrink-0 text-[rgb(var(--ec-accent-text))]"
                     fill="currentColor"
                     viewBox="0 0 20 20"
                   >

package/eventcatalog/src/components/FieldsExplorer/FieldFilters.tsx

@@ -1,5 +1,3 @@
-import { useState, useEffect } from 'react';
-import { Search, X, Filter } from 'lucide-react';
 import { FilterDropdown, CheckboxItem } from '../Tables/Discover/FilterComponents';
 
 export interface FieldFiltersProps {
@@ -21,8 +19,6 @@ export interface FieldFiltersProps {
 }
 
 export default function FieldFilters({
-  searchQuery,
-  onSearchChange,
   selectedFormats,
   onFormatsChange,
   selectedMessageTypes,
@@ -34,21 +30,6 @@ export default function FieldFilters({
   facets,
   isScaleEnabled = false,
 }: FieldFiltersProps) {
-  const [localSearch, setLocalSearch] = useState(searchQuery);
-
-  // Sync external changes
-  useEffect(() => {
-    setLocalSearch(searchQuery);
-  }, [searchQuery]);
-
-  // Debounce search input
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      onSearchChange(localSearch);
-    }, 500);
-    return () => clearTimeout(timeout);
-  }, [localSearch]);
-
   const toggleFormat = (value: string) => {
     if (selectedFormats.includes(value)) {
       onFormatsChange(selectedFormats.filter((f) => f !== value));
@@ -73,45 +54,14 @@ export default function FieldFilters({
     onMessageTypesChange([]);
     onSharedOnlyChange(false);
     onConflictingOnlyChange(false);
-    setLocalSearch('');
-    onSearchChange('');
   };
 
   return (
-    <div className="space-y-4">
-      {/* Search Input */}
-      <div className="relative">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[rgb(var(--ec-icon-color))]" />
-        <input
-          type="text"
-          value={localSearch}
-          onChange={(e) => setLocalSearch(e.target.value)}
-          placeholder="Search fields..."
-          className="w-full pl-9 pr-8 py-2 text-sm bg-[rgb(var(--ec-dropdown-bg))] text-[rgb(var(--ec-input-text))] border border-[rgb(var(--ec-dropdown-border))] rounded-lg placeholder:text-[rgb(var(--ec-icon-color))] focus:outline-hidden focus:ring-1 focus:ring-[rgb(var(--ec-accent)/0.3)] focus:border-[rgb(var(--ec-accent))] transition-colors"
-        />
-        {localSearch && (
-          <button
-            onClick={() => {
-              setLocalSearch('');
-              onSearchChange('');
-            }}
-            className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))]"
-          >
-            <X className="w-3.5 h-3.5" />
-          </button>
-        )}
-      </div>
-
-      {/* Filter Section Header */}
-      <div className="flex items-center gap-2">
-        <Filter className="w-3.5 h-3.5 text-[rgb(var(--ec-icon-color))]" />
-        <h3 className="text-[11px] font-bold uppercase tracking-widest text-[rgb(var(--ec-page-text))]">Filters</h3>
-      </div>
-
+    <div className="space-y-6">
       {/* Schema Format Filter */}
       {facets && facets.formats.length > 0 && (
         <div>
-          <label className="block text-xs font-medium text-[rgb(var(--ec-page-text)/0.8)] mb-1.5">Schema Format</label>
+          <label className="block text-xs font-medium text-[rgb(var(--ec-page-text)/0.8)] mb-1.5">Schema format</label>
           <FilterDropdown
             label="Select formats..."
             selectedItems={selectedFormats}
@@ -134,7 +84,7 @@ export default function FieldFilters({
       {/* Message Type Filter */}
       {facets && facets.messageTypes.length > 0 && (
         <div>
-          <label className="block text-xs font-medium text-[rgb(var(--ec-page-text)/0.8)] mb-1.5">Message Type</label>
+          <label className="block text-xs font-medium text-[rgb(var(--ec-page-text)/0.8)] mb-1.5">Message type</label>
           <FilterDropdown
             label="Select message types..."
             selectedItems={selectedMessageTypes}