@eventcatalog/core 3.18.5 → 3.19.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.18.5";
+var version = "3.19.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-5J4CB7HN.js";
-import "../chunk-Z3BWXNQW.js";
+} from "../chunk-FK7TCLJJ.js";
+import "../chunk-NXKN2YAU.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.18.5";
+var version = "3.19.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-JEZODNLN.js";
-import "../chunk-5J4CB7HN.js";
+} from "../chunk-26A45SNU.js";
+import "../chunk-FK7TCLJJ.js";
 import "../chunk-4UVFXLPI.js";
-import "../chunk-Z3BWXNQW.js";
+import "../chunk-NXKN2YAU.js";
 import "../chunk-5T63CXKU.js";
 export {
   log_build_default as default

package/dist/catalog-to-astro-content-directory.cjs

@@ -34,7 +34,7 @@ __export(catalog_to_astro_content_directory_exports, {
 });
 module.exports = __toCommonJS(catalog_to_astro_content_directory_exports);
 
-// ../../node_modules/.pnpm/tsup@8.5.0_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3_yaml@2.8.1/node_modules/tsup/assets/cjs_shims.js
+// ../../node_modules/.pnpm/tsup@8.5.0_jiti@2.6.1_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3_yaml@2.8.1/node_modules/tsup/assets/cjs_shims.js
 var getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${__filename}`).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
 var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
 

package/dist/{chunk-JEZODNLN.js → chunk-26A45SNU.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-5J4CB7HN.js";
+} from "./chunk-FK7TCLJJ.js";
 import {
   countResources,
   serializeCounts

package/dist/{chunk-2IVWMV2T.js → chunk-6OQXRJWI.js}

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

package/dist/{chunk-5J4CB7HN.js → chunk-FK7TCLJJ.js}

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

package/dist/{chunk-Z3BWXNQW.js → chunk-NXKN2YAU.js}

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

package/dist/{chunk-SSNGN2OB.js → chunk-XKHNXR3Q.js}

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

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/eventcatalog.cjs

@@ -22,7 +22,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-// ../../node_modules/.pnpm/tsup@8.5.0_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3_yaml@2.8.1/node_modules/tsup/assets/cjs_shims.js
+// ../../node_modules/.pnpm/tsup@8.5.0_jiti@2.6.1_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3_yaml@2.8.1/node_modules/tsup/assets/cjs_shims.js
 var getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${__filename}`).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
 var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
 
@@ -114,7 +114,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.18.5";
+var version = "3.19.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-JEZODNLN.js";
-import "./chunk-5J4CB7HN.js";
+} from "./chunk-26A45SNU.js";
+import "./chunk-FK7TCLJJ.js";
 import "./chunk-4UVFXLPI.js";
 import {
   runMigrations
@@ -22,13 +22,13 @@ import {
 } from "./chunk-3KXCGYET.js";
 import {
   generate
-} from "./chunk-SSNGN2OB.js";
+} from "./chunk-XKHNXR3Q.js";
 import {
   logger
-} from "./chunk-2IVWMV2T.js";
+} from "./chunk-6OQXRJWI.js";
 import {
   VERSION
-} from "./chunk-Z3BWXNQW.js";
+} from "./chunk-NXKN2YAU.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.18.5";
+var version = "3.19.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-SSNGN2OB.js";
-import "./chunk-2IVWMV2T.js";
-import "./chunk-Z3BWXNQW.js";
+} from "./chunk-XKHNXR3Q.js";
+import "./chunk-6OQXRJWI.js";
+import "./chunk-NXKN2YAU.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.18.5";
+var version = "3.19.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-2IVWMV2T.js";
-import "../chunk-Z3BWXNQW.js";
+} from "../chunk-6OQXRJWI.js";
+import "../chunk-NXKN2YAU.js";
 export {
   logger
 };

package/eventcatalog/astro.config.mjs

@@ -1,6 +1,6 @@
 
 import { defineConfig } from 'astro/config';
-import tailwind from '@astrojs/tailwind';
+import tailwindcss from '@tailwindcss/vite';
 import mdx from '@astrojs/mdx';
 import react from '@astrojs/react';
 import { searchForWorkspaceRoot } from 'vite';
@@ -64,7 +64,6 @@ export default defineConfig({
   devToolbar: { enabled: false },
   integrations: [
     react(),
-    tailwind(),
     expressiveCode({
       ...expressiveCodeConfig,
     }),
@@ -95,6 +94,7 @@ export default defineConfig({
     eventCatalogIntegration(),
   ].filter(Boolean),
   vite: {
+    plugins: [tailwindcss()],
     define: {
       /**
        * Trailing slash is exposed as global variable here principally for `@utils/url-builder`.
@@ -125,6 +125,22 @@ export default defineConfig({
         },
       },
       ...(config.server?.allowedHosts ? { allowedHosts: config.server?.allowedHosts } : {}),
+      // Pre-transform critical modules during startup so they're ready when
+      // the first page request arrives. Without this, Vite transforms each
+      // module on-demand during the first request, adding seconds to TTFB.
+      warmup: {
+        ssrFiles: [
+          './src/pages/index.astro',
+          './src/pages/_index.astro',
+          './src/layouts/VerticalSideBarLayout.astro',
+          './src/components/Header.astro',
+          './src/components/SideNav/SideNav.astro',
+        ],
+        clientFiles: [
+          './src/components/SideNav/NestedSideBar/index.tsx',
+          './src/components/Search/SearchModal.tsx',
+        ],
+      },
     },
     worker: {
       format: 'es',
@@ -138,6 +154,21 @@ export default defineConfig({
       external: ['eventcatalog.auth.js', 'eventcatalog.chat.js'],
     },
     optimizeDeps: {
+      // Pre-bundle heavy dependencies so Vite doesn't discover and transform
+      // them lazily on first request. This significantly reduces initial page
+      // load time in dev mode.
+      include: [
+        'lucide-react',
+        '@heroicons/react/24/outline',
+        '@heroicons/react/24/solid',
+        '@heroicons/react/20/solid',
+        '@headlessui/react',
+        '@nanostores/react',
+        'nanostores',
+        'react',
+        'react-dom',
+        'semver',
+      ],
       esbuildOptions: {
         jsx: 'automatic',
       },

package/eventcatalog/src/components/ChatPanel/ChatPanel.tsx

@@ -999,7 +999,7 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
                     onKeyDown={handleInputKeyDown}
                     placeholder="Ask, search, or explain..."
                     disabled={isLoading}
-                    className="w-full px-4 py-3 pr-16 bg-transparent text-[rgb(var(--ec-input-text))] placeholder-[rgb(var(--ec-input-placeholder))] focus:outline-none text-sm disabled:opacity-50 rounded-xl"
+                    className="w-full px-4 py-3 pr-16 bg-transparent text-[rgb(var(--ec-input-text))] placeholder-[rgb(var(--ec-input-placeholder))] focus:outline-hidden text-sm disabled:opacity-50 rounded-xl"
                   />
                   <div className="absolute right-2 top-1/2 -translate-y-1/2 z-10">
                     {isStreaming ? (
@@ -1056,7 +1056,7 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
         <Dialog.Portal>
           <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[300]" />
           <Dialog.Content
-            className="fixed inset-y-4 left-1/2 -translate-x-1/2 w-[95%] max-w-4xl md:inset-y-8 rounded-xl shadow-2xl z-[301] flex flex-col overflow-hidden focus:outline-none border border-[rgb(var(--ec-page-border))]"
+            className="fixed inset-y-4 left-1/2 -translate-x-1/2 w-[95%] max-w-4xl md:inset-y-8 rounded-xl shadow-2xl z-[301] flex flex-col overflow-hidden focus:outline-hidden border border-[rgb(var(--ec-page-border))]"
             style={{
               background: `
                 radial-gradient(ellipse 100% 40% at 50% 100%, rgb(var(--ec-accent) / 0.15) 0%, transparent 100%),
@@ -1291,7 +1291,7 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
                     onKeyDown={handleInputKeyDown}
                     placeholder="Ask, search, or explain..."
                     disabled={isLoading}
-                    className="w-full px-4 py-3.5 pr-20 bg-transparent text-[rgb(var(--ec-input-text))] placeholder-[rgb(var(--ec-input-placeholder))] focus:outline-none text-sm disabled:opacity-50 rounded-xl"
+                    className="w-full px-4 py-3.5 pr-20 bg-transparent text-[rgb(var(--ec-input-text))] placeholder-[rgb(var(--ec-input-placeholder))] focus:outline-hidden text-sm disabled:opacity-50 rounded-xl"
                   />
                   <div className="absolute right-2 top-1/2 -translate-y-1/2 z-10">
                     {isStreaming ? (

package/eventcatalog/src/components/ChatPanel/ChatPanelButton.tsx

@@ -19,7 +19,7 @@ const ChatPanelButton = () => {
     <>
       <button
         onClick={() => setIsOpen(true)}
-        className="flex items-center gap-1.5 px-4 py-1.5 rounded-md bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-content-hover))] ring-1 ring-inset ring-[rgb(var(--ec-page-border))] shadow-sm transition-colors text-sm ml-[-1px]"
+        className="flex items-center gap-1.5 px-4 py-1.5 rounded-md bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-content-hover))] ring-1 ring-inset ring-[rgb(var(--ec-page-border))] shadow-xs transition-colors text-sm ml-[-1px]"
         aria-label="Open AI Assistant"
       >
         <BookOpen size={14} className="text-[rgb(var(--ec-accent))]" />

package/eventcatalog/src/components/CopyAsMarkdown.tsx

@@ -212,12 +212,12 @@ export function CopyPageMenu({
   return (
     <DropdownMenu.Root>
       {/* Container for the split button */}
-      <div className="inline-flex rounded-md shadow-sm border border-[rgb(var(--ec-dropdown-border))]">
+      <div className="inline-flex rounded-md shadow-xs border border-[rgb(var(--ec-dropdown-border))]">
         {/* 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-none focus:ring-1 focus:ring-[rgb(var(--ec-accent))]"
+          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))]"
         >
           <defaultAction.icon className="w-4 h-4" />
           {buttonText}
@@ -226,7 +226,7 @@ export function CopyPageMenu({
         <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-none focus:ring-1 focus:ring-[rgb(var(--ec-accent))]"
+            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))]"
             aria-label="More options"
           >
             <ChevronDownIcon className="w-4 h-4" />
@@ -243,7 +243,7 @@ export function CopyPageMenu({
         {availableActions.chat && (
           <>
             <DropdownMenu.Item
-              className="cursor-pointer hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-none focus:bg-[rgb(var(--ec-dropdown-hover))]"
+              className="cursor-pointer hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-hidden focus:bg-[rgb(var(--ec-dropdown-hover))]"
               onSelect={() => window.dispatchEvent(new CustomEvent('eventcatalog:open-chat'))}
             >
               <MenuItemContent
@@ -258,7 +258,7 @@ export function CopyPageMenu({
 
         {availableActions.copyMarkdown && (
           <DropdownMenu.Item
-            className="cursor-pointer hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-none focus:bg-[rgb(var(--ec-dropdown-hover))]"
+            className="cursor-pointer hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-hidden focus:bg-[rgb(var(--ec-dropdown-hover))]"
             onSelect={() => copyMarkdownToClipboard()}
           >
             <MenuItemContent icon={Copy} title="Copy page" description="Copy page as Markdown for LLMs" />
@@ -290,7 +290,7 @@ export function CopyPageMenu({
             return (
               <DropdownMenu.Item
                 key={schema.url}
-                className="cursor-pointer hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-none focus:bg-[rgb(var(--ec-dropdown-hover))]"
+                className="cursor-pointer hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-hidden focus:bg-[rgb(var(--ec-dropdown-hover))]"
                 onSelect={() => copySchemaToClipboard(schema)}
               >
                 <MenuItemContent icon={Icon} title={title} description={`Copy ${type} to clipboard`} />
@@ -300,7 +300,7 @@ export function CopyPageMenu({
 
         {availableActions.viewMarkdown && (
           <DropdownMenu.Item
-            className="cursor-pointer hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-none focus:bg-[rgb(var(--ec-dropdown-hover))]"
+            className="cursor-pointer hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-hidden focus:bg-[rgb(var(--ec-dropdown-hover))]"
             onSelect={() => window.open(markdownUrl, '_blank')}
           >
             <MenuItemContent
@@ -314,7 +314,7 @@ export function CopyPageMenu({
 
         {availableActions.rssFeed && (
           <DropdownMenu.Item
-            className="cursor-pointer hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-none focus:bg-[rgb(var(--ec-dropdown-hover))]"
+            className="cursor-pointer hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-hidden focus: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} />
@@ -325,7 +325,7 @@ export function CopyPageMenu({
           <>
             <DropdownMenu.Separator className="h-px my-1 bg-[rgb(var(--ec-dropdown-border))]" />
             <DropdownMenu.Item
-              className="cursor-pointer hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-none focus:bg-[rgb(var(--ec-dropdown-hover))]"
+              className="cursor-pointer hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-hidden focus:bg-[rgb(var(--ec-dropdown-hover))]"
               onSelect={() => window.open(editUrl, '_blank')}
             >
               <MenuItemContent

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)/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"
+        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"
         aria-expanded={isOpen}
         aria-haspopup="true"
       >

package/eventcatalog/src/components/Grids/DomainGrid.tsx

@@ -53,7 +53,7 @@ const EntityBadge = memo(({ entity }: { entity: any }) => {
   return (
     <a
       href={buildUrl(`/docs/entities/${id}`)}
-      className="inline-flex items-center gap-2 px-3 py-2 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg text-sm font-medium text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))] hover:border-[rgb(var(--ec-accent)/0.5)] transition-all shadow-sm"
+      className="inline-flex items-center gap-2 px-3 py-2 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg text-sm font-medium text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))] hover:border-[rgb(var(--ec-accent)/0.5)] transition-all shadow-xs"
     >
       <BoxIcon className="h-4 w-4 text-[rgb(var(--ec-accent))]" />
       <span>{name}</span>
@@ -93,7 +93,7 @@ const SpecificationBadge = memo(
     return (
       <a
         href={getSpecUrl(spec, serviceId, serviceVersion)}
-        className="inline-flex items-center gap-1.5 px-2 py-1.5 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg text-xs font-medium text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))] hover:border-[rgb(var(--ec-accent)/0.5)] transition-all shadow-sm"
+        className="inline-flex items-center gap-1.5 px-2 py-1.5 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg text-xs font-medium text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))] hover:border-[rgb(var(--ec-accent)/0.5)] transition-all shadow-xs"
       >
         <img src={buildUrl(`/icons/${getSpecIcon(spec.type)}.svg`, true)} alt={`${spec.type} icon`} className="h-3.5 w-3.5" />
         <span>{getSpecLabel(spec.type)}</span>
@@ -159,7 +159,7 @@ const SearchableBox = memo(
               placeholder="Search..."
               value={search}
               onChange={(e) => setSearch(e.target.value)}
-              className="flex-1 px-2 py-0.5 text-xs border border-[rgb(var(--ec-input-border))] rounded focus:outline-none focus:border-[rgb(var(--ec-accent))] bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))]"
+              className="flex-1 px-2 py-0.5 text-xs border border-[rgb(var(--ec-input-border))] rounded focus:outline-hidden focus:border-[rgb(var(--ec-accent))] bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))]"
               onClick={(e) => e.stopPropagation()}
             />
           )}
@@ -261,7 +261,7 @@ const ServiceCard = memo(({ service }: { service: any }) => {
   const hasContent = hasMessages || hasContainers;
 
   return (
-    <div className="bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-xl shadow-sm hover:shadow-md transition-shadow">
+    <div className="bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-xl shadow-xs hover:shadow-md transition-shadow">
       {/* Service Header */}
       <div
         onClick={() => hasContent && setIsCollapsed(!isCollapsed)}
@@ -335,7 +335,7 @@ const DataProductCard = memo(({ dataProduct }: { dataProduct: any }) => {
   return (
     <a
       href={href}
-      className="block bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-xl shadow-sm hover:shadow-md hover:border-[rgb(var(--ec-accent)/0.5)] transition-all"
+      className="block bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-xl shadow-xs hover:shadow-md hover:border-[rgb(var(--ec-accent)/0.5)] transition-all"
     >
       <div className="flex items-center justify-between px-4 py-3">
         <div className="flex items-center gap-2.5">
@@ -373,7 +373,7 @@ const SubdomainSection = memo(({ subdomain }: { subdomain: any }) => {
   const dataProducts = data['data-products'] || [];
 
   return (
-    <div className="bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-xl overflow-hidden shadow-sm">
+    <div className="bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-xl overflow-hidden shadow-xs">
       {/* Subdomain Header - Clickable */}
       <div
         onClick={() => setIsCollapsed(!isCollapsed)}

package/eventcatalog/src/components/Grids/MessageGrid.tsx

@@ -47,7 +47,7 @@ const MessageCard = memo(({ message, compact = false }: { message: any; compact?
   return (
     <a
       href={buildUrl(`/docs/${message.collection}/${message.data.id}/${message.data.version}`)}
-      className={`group block bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-${color}-200 dark:border-${color}-500/30 rounded-lg shadow-sm hover:shadow-md hover:border-${color}-300 dark:hover:border-${color}-500/50 transition-all`}
+      className={`group block bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-${color}-200 dark:border-${color}-500/30 rounded-lg shadow-xs hover:shadow-md hover:border-${color}-300 dark:hover:border-${color}-500/50 transition-all`}
     >
       <div className={compact ? 'p-3' : 'p-4'}>
         <div className="flex items-center gap-2 mb-1">
@@ -82,7 +82,7 @@ const ContainerCard = memo(({ container, type }: { container: any; type: 'reads'
   return (
     <a
       href={buildUrl(`/docs/containers/${container.data.id}/${container.data.version}`)}
-      className={`group block bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border rounded-lg shadow-sm hover:shadow-md transition-all ${
+      className={`group block bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border rounded-lg shadow-xs hover:shadow-md transition-all ${
         type === 'reads'
           ? 'border-amber-200 dark:border-amber-500/30 hover:border-amber-300 dark:hover:border-amber-500/50'
           : 'border-violet-200 dark:border-violet-500/30 hover:border-violet-300 dark:hover:border-violet-500/50'
@@ -117,7 +117,7 @@ const SpecificationCard = memo(
     return (
       <a
         href={getSpecUrl(spec, serviceId, serviceVersion)}
-        className={`group flex items-center gap-3 p-3 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-${color}-200 dark:border-${color}-500/30 rounded-lg shadow-sm hover:shadow-md hover:border-${color}-300 dark:hover:border-${color}-500/50 transition-all`}
+        className={`group flex items-center gap-3 p-3 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-${color}-200 dark:border-${color}-500/30 rounded-lg shadow-xs hover:shadow-md hover:border-${color}-300 dark:hover:border-${color}-500/50 transition-all`}
       >
         <img src={buildUrl(`/icons/${getSpecIcon(spec.type)}.svg`, true)} alt={`${spec.type} icon`} className="h-6 w-6" />
         <div className="flex-1 min-w-0">
@@ -154,7 +154,7 @@ const CollapsibleMessageSection = memo(
     const hasContent = messages.length > 0;
 
     return (
-      <div className="bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-xl shadow-sm overflow-hidden">
+      <div className="bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-xl shadow-xs overflow-hidden">
         <div
           onClick={() => setIsCollapsed(!isCollapsed)}
           className={`flex items-center justify-between px-5 py-4 cursor-pointer hover:bg-[rgb(var(--ec-content-hover))] transition-colors ${!isCollapsed && hasContent ? 'border-b border-[rgb(var(--ec-page-border))]' : ''}`}
@@ -198,7 +198,7 @@ const CollapsibleContainerSection = memo(
     const [isCollapsed, setIsCollapsed] = useState(false);
 
     return (
-      <div className="bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-xl shadow-sm overflow-hidden">
+      <div className="bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-xl shadow-xs overflow-hidden">
         <div
           onClick={() => setIsCollapsed(!isCollapsed)}
           className={`flex items-center justify-between px-5 py-4 cursor-pointer hover:bg-[rgb(var(--ec-content-hover))] transition-colors ${!isCollapsed ? 'border-b border-[rgb(var(--ec-page-border))]' : ''}`}

package/eventcatalog/src/components/Grids/components.tsx

@@ -21,11 +21,11 @@ export function SearchBar({ searchQuery, onSearchChange, placeholder, totalResul
           placeholder={placeholder || 'Search...'}
           value={searchQuery}
           onChange={(e) => onSearchChange(e.target.value)}
-          className="block w-full rounded-lg border-0 py-2.5 pl-10 pr-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
+          className="block w-full rounded-lg border-0 py-2.5 pl-10 pr-4 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
         />
         {searchQuery && (
           <div className="absolute inset-y-0 right-0 flex items-center pr-3">
-            <button onClick={() => onSearchChange('')} className="text-gray-400 hover:text-gray-500 focus:outline-none">
+            <button onClick={() => onSearchChange('')} className="text-gray-400 hover:text-gray-500 focus:outline-hidden">
               <span className="sr-only">Clear search</span>
               <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                 <path
@@ -126,7 +126,7 @@ export function Pagination({ currentPage, totalPages, totalItems, itemsPerPage,
           </p>
         </div>
         <div>
-          <nav className="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
+          <nav className="isolate inline-flex -space-x-px rounded-md shadow-xs" aria-label="Pagination">
             <button
               onClick={() => onPageChange(1)}
               disabled={currentPage === 1}

package/eventcatalog/src/components/Header.astro

@@ -63,7 +63,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                 <button
                   id="profile-menu-button"
                   type="button"
-                  class="flex items-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 rounded-full"
+                  class="flex items-center focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 rounded-full"
                   aria-expanded="false"
                   aria-haspopup="true"
                   aria-label="User menu"
@@ -72,10 +72,10 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                     <img
                       src={session.user.image}
                       alt={session.user?.name || 'User'}
-                      class="h-9 w-9 rounded-full border-2 border-gray-200 hover:border-gray-400 transition-all shadow-sm"
+                      class="h-9 w-9 rounded-full border-2 border-gray-200 hover:border-gray-400 transition-all shadow-xs"
                     />
                   ) : (
-                    <div class="h-9 w-9 rounded-full border-2 border-gray-200 hover:border-gray-400 transition-all bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-sm font-medium text-gray-600 shadow-sm">
+                    <div class="h-9 w-9 rounded-full border-2 border-gray-200 hover:border-gray-400 transition-all bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-sm font-medium text-gray-600 shadow-xs">
                       {session.user?.name
                         ? session.user.name
                             .split(' ')
@@ -115,7 +115,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                 {isAuthEnabled() && (
                   <button
                     id="okta-signin-btn"
-                    class="bg-[rgb(var(--ec-button-bg))] hover:bg-[rgb(var(--ec-button-bg-hover))] text-[rgb(var(--ec-button-text))] text-sm font-medium px-4 py-2 rounded-lg transition-all shadow-sm hover:shadow focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+                    class="bg-[rgb(var(--ec-button-bg))] hover:bg-[rgb(var(--ec-button-bg-hover))] text-[rgb(var(--ec-button-text))] text-sm font-medium px-4 py-2 rounded-lg transition-all shadow-xs hover:shadow focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
                   >
                     Sign In
                   </button>
@@ -158,7 +158,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                     <li>
                       <a
                         href={repositoryUrl}
-                        class="block p-1.5 rounded-lg hover:bg-[rgb(var(--ec-dropdown-hover))] transition-colors focus:outline-none"
+                        class="block p-1.5 rounded-lg hover:bg-[rgb(var(--ec-dropdown-hover))] transition-colors focus:outline-hidden"
                         aria-label="View repository on GitHub"
                       >
                         <img
@@ -181,7 +181,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
         <button
           id="menu-toggle"
           type="button"
-          class="text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-icon-hover))] focus:outline-none focus:text-[rgb(var(--ec-icon-hover))]"
+          class="text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-icon-hover))] focus:outline-hidden focus:text-[rgb(var(--ec-icon-hover))]"
           aria-label="Toggle menu"
         >
           <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">

package/eventcatalog/src/components/MDX/Accordion/Accordion.tsx

@@ -12,7 +12,7 @@ declare global {
 
 export default function Example({ title, children }: any) {
   return (
-    <div className="border border-[rgb(var(--ec-page-border))] rounded-md px-4 shadow-sm py-2 accordion bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))]">
+    <div className="border border-[rgb(var(--ec-page-border))] rounded-md px-4 shadow-xs py-2 accordion bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))]">
       <Disclosure as="div" key={title} className="">
         {({ open }) => {
           useEffect(() => {

package/eventcatalog/src/components/MDX/Accordion/AccordionGroup.astro

@@ -2,7 +2,7 @@
 
 ---
 
-<div class="accordian-group border border-gray-200 rounded-md shadow-sm accordion my-2">
+<div class="accordian-group border border-gray-200 rounded-md shadow-xs accordion my-2">
   <slot />
 </div>
 

package/eventcatalog/src/components/MDX/Attachments.astro

@@ -105,7 +105,7 @@ const sortedGroups = Object.entries(groupedAttachments).sort(([a], [b]) => {
                     href={attachment.url}
                     target={isExternal ? '_blank' : '_self'}
                     rel={isExternal ? 'noopener noreferrer' : undefined}
-                    class="group block bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg p-4 transition-all duration-200 hover:shadow-md hover:border-[rgb(var(--ec-accent)/0.5)] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2"
+                    class="group block bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg p-4 transition-all duration-200 hover:shadow-md hover:border-[rgb(var(--ec-accent)/0.5)] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2"
                   >
                     <div class="flex items-start gap-3">
                       <div class="flex-shrink-0 p-2 bg-[rgb(var(--ec-content-hover))] rounded-lg group-hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors duration-200">

package/eventcatalog/src/components/MDX/EntityPropertiesTable/EntityPropertiesTable.astro

@@ -41,7 +41,7 @@ const isComponentEnabled = collection === 'entities';
 {
   isComponentEnabled && properties && properties.length > 0 ? (
     <div class="overflow-x-auto relative not-prose">
-      <table class="w-full text-sm text-left text-[rgb(var(--ec-page-text-muted))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-sm">
+      <table class="w-full text-sm text-left text-[rgb(var(--ec-page-text-muted))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-xs">
         <thead class="text-xs text-[rgb(var(--ec-page-text))] uppercase bg-[rgb(var(--ec-content-hover))]">
           <tr>
             <th scope="col" class="py-3 px-6">