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

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-MVZKHUX2.js";
-import "../chunk-ATRBVTJ6.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.30.0";
+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-6UG4JMUV.js";
-import "../chunk-MVZKHUX2.js";
+} from "../chunk-7IGMIOQF.js";
+import "../chunk-QIJOBQZ7.js";
 import "../chunk-4UVFXLPI.js";
-import "../chunk-ATRBVTJ6.js";
+import "../chunk-UY5QDWK7.js";
 import "../chunk-5T63CXKU.js";
 export {
   log_build_default as default

package/dist/{chunk-6UG4JMUV.js → chunk-7IGMIOQF.js}

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

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

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

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

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

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

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

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

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-ATRBVTJ6.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.30.0";
+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-6UG4JMUV.js";
-import "./chunk-MVZKHUX2.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-RRBDF4MM.js";
+} from "./chunk-LWVHWR77.js";
 import {
   logger
-} from "./chunk-Z26P4PCB.js";
+} from "./chunk-HVOLSUC2.js";
 import {
   VERSION
-} from "./chunk-ATRBVTJ6.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.30.0";
+var version = "3.31.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-RRBDF4MM.js";
-import "./chunk-Z26P4PCB.js";
-import "./chunk-ATRBVTJ6.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.30.0";
+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-Z26P4PCB.js";
-import "../chunk-ATRBVTJ6.js";
+} from "../chunk-HVOLSUC2.js";
+import "../chunk-UY5QDWK7.js";
 export {
   logger
 };

package/eventcatalog/astro.config.mjs

@@ -27,6 +27,8 @@ 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 = {
@@ -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-2 whitespace-nowrap px-4 py-1.5 text-sm font-medium text-[rgb(var(--ec-dropdown-text))] bg-[rgb(var(--ec-page-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-2.5 py-1.5 text-sm font-medium text-[rgb(var(--ec-icon-color))] bg-[rgb(var(--ec-page-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/MDX/Design/Design.astro

@@ -46,7 +46,7 @@ const nodesWithLayout = design ? applyLayoutToNodes(design.nodes || [], savedLay
   design && (
     <div>
       <div
-        class="h-[30em] my-6 mb-12 w-full relative border border-gray-200 rounded-md"
+        class="h-[30em] my-6 mb-12 w-full relative border border-[rgb(var(--ec-page-border))] rounded-md"
         id={`${id}-portal`}
         style={{
           maxHeight: maxHeight ? `${maxHeight}em` : `30em`,

package/eventcatalog/src/components/MDX/Tiles/Tile.astro

@@ -28,13 +28,13 @@ function startsWithProtocol(str: string) {
   <a
     href={startsWithProtocol(href) ? href : buildUrl(href)}
     target={openWindow ? '_blank' : '_self'}
-    class="tile-card block relative bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-xl p-8 h-48 transition-all duration-300 ease-out hover:border-[rgb(var(--ec-accent)/0.5)] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2 overflow-hidden"
+    class="tile-card block relative bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-xl h-48 transition-all duration-300 ease-out hover:border-[rgb(var(--ec-accent)/0.5)] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2 overflow-hidden"
   >
-    <!-- Icon centered in card with grid background -->
-    <div class="relative h-full flex items-center justify-center">
-      <!-- Squared paper grid behind icon -->
-      <div class="tile-grid absolute inset-0 opacity-15"></div>
+    <!-- Squared paper grid spans the full card -->
+    <div class="tile-grid absolute inset-0"></div>
 
+    <!-- Icon centered in card -->
+    <div class="relative h-full flex items-center justify-center p-8">
       {IconComponent && <IconComponent className="tile-icon relative w-16 h-16 stroke-1" />}
     </div>
   </a>
@@ -59,9 +59,12 @@ function startsWithProtocol(str: string) {
 
   .tile-grid {
     background-image:
-      linear-gradient(rgb(var(--ec-accent) / 0.2) 1px, transparent 1px),
-      linear-gradient(90deg, rgb(var(--ec-accent) / 0.2) 1px, transparent 1px);
-    background-size: 16px 16px;
+      linear-gradient(rgb(var(--ec-accent) / 0.1) 1px, transparent 1px),
+      linear-gradient(90deg, rgb(var(--ec-accent) / 0.1) 1px, transparent 1px);
+    background-size: 28px 28px;
+    /* Soft edge fade — full-width grid that softens just at the borders */
+    -webkit-mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
+    mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
   }
 
   .tile-icon {