@eventcatalog/core 2.61.3 → 2.61.5

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

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-BMTNHR7C.js";
-import "../chunk-LLJZTUOG.js";
+} from "../chunk-PK7HK42H.js";
+import "../chunk-3DQC6REX.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

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

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-EICO7E3X.js";
-import "../chunk-BMTNHR7C.js";
-import "../chunk-LLJZTUOG.js";
+} from "../chunk-25B6QU5B.js";
+import "../chunk-PK7HK42H.js";
+import "../chunk-3DQC6REX.js";
 import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default

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

@@ -35,7 +35,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_typescript@5.9.2_yaml@2.8.1/node_modules/tsup/assets/cjs_shims.js
+// node_modules/.pnpm/tsup@8.5.0_jiti@1.21.7_postcss@8.5.6_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-EICO7E3X.js → chunk-25B6QU5B.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-BMTNHR7C.js";
+} from "./chunk-PK7HK42H.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-LLJZTUOG.js → chunk-3DQC6REX.js}

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

package/dist/{chunk-BMTNHR7C.js → chunk-PK7HK42H.js}

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

package/dist/constants.cjs

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-LLJZTUOG.js";
+} from "./chunk-3DQC6REX.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_typescript@5.9.2_yaml@2.8.1/node_modules/tsup/assets/cjs_shims.js
+// node_modules/.pnpm/tsup@8.5.0_jiti@1.21.7_postcss@8.5.6_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();
 
@@ -157,7 +157,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.61.3";
+var version = "2.61.5";
 
 // 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-EICO7E3X.js";
-import "./chunk-BMTNHR7C.js";
+} from "./chunk-25B6QU5B.js";
+import "./chunk-PK7HK42H.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
@@ -15,7 +15,7 @@ import {
 import "./chunk-55D645EH.js";
 import {
   VERSION
-} from "./chunk-LLJZTUOG.js";
+} from "./chunk-3DQC6REX.js";
 import {
   getProjectOutDir,
   isAuthEnabled,

package/eventcatalog/src/components/Studio/StudioPageModal.tsx

@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { ExternalLinkIcon, CheckIcon, ClipboardIcon, Loader2 } from 'lucide-react';
+
+const StudioPageModal: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [copySuccess, setCopySuccess] = useState(false);
+  const [hasCopied, setHasCopied] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const handleOpen = () => setIsOpen(true);
+    window.addEventListener('openStudioModal', handleOpen);
+    return () => window.removeEventListener('openStudioModal', handleOpen);
+  }, []);
+
+  const handleCopyResources = async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch('/api/catalog');
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch catalog data');
+      }
+
+      const catalogData = await response.json();
+
+      await navigator.clipboard.writeText(JSON.stringify(catalogData, null, 2));
+      setCopySuccess(true);
+      setHasCopied(true);
+      setTimeout(() => setCopySuccess(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy resources:', err);
+      setError('Failed to copy resources. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleOpenStudio = () => {
+    window.open(
+      'https://app.eventcatalog.studio/playground?import-resources=true&utm_source=eventcatalog&utm_medium=referral&utm_campaign=studio-page',
+      '_blank'
+    );
+    setIsOpen(false);
+  };
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" />
+        <Dialog.Content className="fixed top-1/2 left-1/2 w-[90vw] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-xl focus:outline-none data-[state=open]:animate-contentShow z-[100]">
+          <Dialog.Title className="text-lg font-semibold text-gray-900 mb-3">Open EventCatalog Studio</Dialog.Title>
+
+          <Dialog.Description className="text-sm text-gray-600 mb-6">
+            Import your catalog resources into{' '}
+            <a
+              href="https://eventcatalog.studio"
+              className="text-gray-900 hover:text-gray-700 underline font-semibold"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              EventCatalog Studio
+            </a>{' '}
+            to create architecture diagrams.
+          </Dialog.Description>
+
+          <div className="space-y-4">
+            {/* Step 1: Copy Resources */}
+            <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
+              <h4 className="text-sm font-bold text-gray-900 mb-2">Step 1: Copy your resources</h4>
+              <p className="text-xs text-gray-600 mb-3">Copy your EventCatalog resources to your clipboard.</p>
+
+              <button
+                onClick={handleCopyResources}
+                disabled={isLoading}
+                className={`w-full flex items-center justify-center space-x-2 px-4 py-2 text-sm font-medium rounded-md border transition-colors ${
+                  copySuccess
+                    ? 'bg-green-50 border-green-200 text-green-700'
+                    : isLoading
+                      ? 'bg-gray-100 border-gray-300 text-gray-400 cursor-not-allowed'
+                      : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'
+                }`}
+              >
+                {isLoading ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                    <span>Loading resources...</span>
+                  </>
+                ) : copySuccess ? (
+                  <>
+                    <CheckIcon className="w-4 h-4" />
+                    <span>Copied!</span>
+                  </>
+                ) : (
+                  <>
+                    <ClipboardIcon className="w-4 h-4" />
+                    <span>Copy resources to clipboard</span>
+                  </>
+                )}
+              </button>
+
+              {error && <p className="text-xs text-red-600 mt-2">{error}</p>}
+            </div>
+
+            {/* Step 2: Open Studio */}
+            <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
+              <h4 className="text-sm font-bold text-gray-900 mb-2">Step 2: Open EventCatalog Studio</h4>
+              <p className="text-xs text-gray-600 mb-3">
+                Go to EventCatalog Studio and paste your resources into the modal dialog.
+              </p>
+
+              <button
+                onClick={handleOpenStudio}
+                disabled={!hasCopied}
+                className={`w-full flex items-center justify-center space-x-2 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
+                  hasCopied ? 'bg-gray-900 text-white hover:bg-gray-800' : 'bg-gray-300 text-gray-500 cursor-not-allowed'
+                }`}
+              >
+                <ExternalLinkIcon className="w-4 h-4" />
+                <span>Open EventCatalog Studio</span>
+              </button>
+
+              <p className="text-[12px] text-gray-500 italic mt-4 mb-0">
+                All data is stored locally in your browser. Nothing is sent to external servers.
+              </p>
+            </div>
+          </div>
+
+          <div className="mt-6 flex justify-end">
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
+                onClick={() => setIsOpen(false)}
+              >
+                Close
+              </button>
+            </Dialog.Close>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+export default StudioPageModal;

package/eventcatalog/src/enterprise/custom-documentation/pages/docs/custom/index.astro

@@ -363,7 +363,7 @@ const badges = doc?.badges || [];
 
     if (window.eventcatalog.mermaid) {
       const { icons } = await import('@iconify-json/logos');
-      const { iconPacks = [] } = window.eventcatalog.mermaid ?? {};
+      const { iconPacks = [], enableSupportForElkLayout = false } = window.eventcatalog.mermaid ?? {};
 
       if (iconPacks.length > 0) {
         const iconPacksToRegister = iconPacks.map((name: string) => {
@@ -375,6 +375,11 @@ const badges = doc?.badges || [];
 
         mermaid.registerIconPacks(iconPacksToRegister);
       }
+
+      if (enableSupportForElkLayout) {
+        const { default: elkLayouts } = await import('@mermaid-js/layout-elk/dist/mermaid-layout-elk.core.mjs');
+        mermaid.registerLayoutLoaders(elkLayouts);
+      }
     }
 
     mermaid.initialize({

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -16,6 +16,7 @@ import {
   Sparkles,
   Rocket,
   FileText,
+  SquareDashedMousePointerIcon,
 } from 'lucide-react';
 import Header from '../components/Header.astro';
 import SEO from '../components/Seo.astro';
@@ -35,6 +36,7 @@ import { isCollectionVisibleInCatalog } from '@eventcatalog';
 import { buildUrl } from '@utils/url-builder';
 import { getQueries } from '@utils/queries';
 import { hasLandingPageForDocs } from '@utils/pages';
+
 const events = await getEvents({ getAllVersions: false });
 const commands = await getCommands({ getAllVersions: false });
 const queries = await getQueries({ getAllVersions: false });
@@ -110,6 +112,7 @@ const navigationItems = [
     current: currentPath.includes('/visualiser'),
     sidebar: true,
   },
+
   {
     id: '/discover',
     label: 'Explore',
@@ -140,6 +143,15 @@ const navigationItems = [
   return userSideBarOption ? userSideBarOption.visible : true;
 });
 
+const studioNavigationItem = {
+  id: '/studio',
+  label: 'EventCatalog Studio',
+  icon: SquareDashedMousePointerIcon,
+  href: buildUrl('/studio'),
+  current: currentPath.includes('/studio'),
+  sidebar: false,
+};
+
 const premiumFeatures = [
   {
     id: '/docs/custom',
@@ -163,7 +175,7 @@ const premiumFeatures = [
   return userSideBarOption ? userSideBarOption.visible : true;
 });
 
-const currentNavigationItem = [...navigationItems, ...premiumFeatures].find((item) => item.current);
+const currentNavigationItem = [...navigationItems, ...[studioNavigationItem], ...premiumFeatures].find((item) => item.current);
 const { title, description } = Astro.props;
 
 const showSideBarOnLoad = currentNavigationItem?.sidebar;
@@ -232,7 +244,7 @@ const canPageBeEmbedded = process.env.ENABLE_EMBED === 'true';
           class="fixed flex flex-col items-center w-16 h-screen py-4 bg-white bg-gradient-to-b from-white to-gray-100 border-r border-gray-200 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-8">
+            <div class="flex flex-col items-center flex-1 space-y-6">
               {
                 navigationItems
                   .filter((item) => !item.hidden)
@@ -261,6 +273,24 @@ const canPageBeEmbedded = process.env.ENABLE_EMBED === 'true';
 
               <hr class="w-8 border-t border-gray-200" />
 
+              <a
+                id={studioNavigationItem.id}
+                data-role="nav-item"
+                href={studioNavigationItem.href}
+                class={`p-1.5 inline-block pt-1 pb-1 mt-0 mb-0 transition-colors duration-200 rounded-lg relative ${studioNavigationItem.current ? 'text-white bg-gradient-to-b from-purple-500 to-purple-700' : 'hover:bg-gradient-to-r hover:from-purple-500 hover:to-purple-700 hover:text-white text-gray-700'}`}
+              >
+                <div class="has-tooltip">
+                  <span
+                    class="tooltip rounded shadow-lg p-1 text-xs bg-gradient-to-l from-purple-500 to-purple-700 text-white ml-10"
+                  >
+                    {studioNavigationItem.label}
+                  </span>
+                  <studioNavigationItem.icon className="h-6 w-6" />
+                </div>
+              </a>
+
+              <hr class="w-8 border-t border-gray-200" />
+
               {
                 premiumFeatures.map((item) => (
                   <a

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/index.astro

@@ -534,7 +534,7 @@ nodeGraphs.push({
 
       if (window.eventcatalog.mermaid) {
         const { icons } = await import('@iconify-json/logos');
-        const { iconPacks = [] } = window.eventcatalog.mermaid ?? {};
+        const { iconPacks = [], enableSupportForElkLayout = false } = window.eventcatalog.mermaid ?? {};
 
         if (iconPacks.length > 0) {
           const iconPacksToRegister = iconPacks.map((name: any) => {
@@ -546,6 +546,11 @@ nodeGraphs.push({
 
           mermaid.registerIconPacks(iconPacksToRegister);
         }
+
+        if (enableSupportForElkLayout) {
+          const { default: elkLayouts } = await import('@mermaid-js/layout-elk/dist/mermaid-layout-elk.core.mjs');
+          mermaid.registerLayoutLoaders(elkLayouts);
+        }
       }
 
       mermaid.initialize({

package/eventcatalog/src/pages/studio.astro

@@ -0,0 +1,234 @@
+---
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { getEvents } from '@utils/events';
+import { getCommands } from '@utils/commands';
+import { getServices } from '@utils/collections/services';
+import { BoltIcon, ServerIcon, RectangleGroupIcon } from '@heroicons/react/24/outline';
+import { SquareDashedMousePointerIcon, ArrowLeftRightIcon } from 'lucide-react';
+import StudioPageModal from '@components/Studio/StudioPageModal';
+import { getChannels } from '@utils/channels';
+
+const [events, commands, services, channels] = await Promise.all([
+  getEvents().catch(() => []),
+  getCommands().catch(() => []),
+  getServices().catch(() => []),
+  getChannels().catch(() => []),
+]);
+
+// Get counts
+const eventCount = events.length;
+const serviceCount = services.length;
+const commandCount = commands.length;
+const channelCount = channels.length;
+
+// Get a few sample resources to display
+const sampleEvents = events.slice(0, 2);
+const sampleServices = services.slice(0, 2);
+const sampleChannels = channels.slice(0, 1);
+
+// Determine which resources to show (fallback if some are missing)
+const resourcesToShow = [
+  ...sampleEvents.map((event, index) => ({ type: 'event', data: event, index })),
+  ...sampleServices.map((service, index) => ({ type: 'service', data: service, index: index + 2 })),
+  ...sampleChannels.map((channel, index) => ({ type: 'channel', data: channel, index: index + 4 })),
+].slice(0, 5); // Max 5 resources
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>EventCatalog Studio</title>
+  </head>
+  <body>
+    <VerticalSideBarLayout title="EventCatalog Studio">
+      <div class="min-h-[calc(100vh-60px)] bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+          {/* Hero Section */}
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
+            <div>
+              <div class="inline-flex items-center px-4 py-2 rounded-full bg-gray-100 text-gray-900 font-medium text-sm mb-6">
+                <SquareDashedMousePointerIcon className="w-4 h-4 mr-2" />
+                EventCatalog Studio
+              </div>
+              <h1 class="text-4xl font-bold text-gray-900 tracking-tight mb-4">Turn your resources into designs</h1>
+              <p class="text-xl text-gray-600 mb-8">
+                Transform your documented messages, services, and domains into architecture diagrams. Drag, drop, and design with
+                what you already have.
+              </p>
+              <div class="flex flex-col sm:flex-row gap-4 mb-2">
+                <button
+                  id="design-button"
+                  class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-gray-900 hover:bg-gray-800 transition-colors duration-150"
+                >
+                  <SquareDashedMousePointerIcon className="w-4 h-4 mr-2" />
+                  Open EventCatalog Studio
+                </button>
+              </div>
+
+              <p class="text-sm text-gray-500 italic mb-6">
+                {eventCount + serviceCount + channelCount + commandCount} resources ready to design with
+              </p>
+            </div>
+
+            <div class="relative">
+              <div class="relative">
+                {/* Animation container */}
+                <div class="relative h-[400px] flex items-center justify-center">
+                  {/* Resource cards that animate in */}
+                  <div class="absolute left-0 top-1/2 -translate-y-1/2 space-y-3">
+                    {
+                      resourcesToShow.map((resource) => {
+                        if (resource.type === 'event') {
+                          return (
+                            <div
+                              class="animate-float-in flex items-center gap-2 text-sm text-gray-700 px-4 py-3 bg-orange-50 rounded-lg border border-orange-200 shadow-sm"
+                              style={`animation-delay: ${resource.index * 0.4}s;`}
+                            >
+                              <BoltIcon className="w-4 h-4 text-orange-600" />
+                              {resource.data.data.name}
+                            </div>
+                          );
+                        } else if (resource.type === 'service') {
+                          return (
+                            <div
+                              class="animate-float-in flex items-center gap-2 text-sm text-gray-700 px-4 py-3 bg-pink-50 rounded-lg border border-pink-200 shadow-sm"
+                              style={`animation-delay: ${resource.index * 0.4}s;`}
+                            >
+                              <ServerIcon className="w-4 h-4 text-gray-600" />
+                              {resource.data.data.name}
+                            </div>
+                          );
+                        } else if (resource.type === 'channel') {
+                          return (
+                            <div
+                              class="animate-float-in flex items-center gap-2 text-sm text-gray-700 px-4 py-3 bg-gray-50 rounded-lg border border-gray-200 shadow-sm"
+                              style={`animation-delay: ${resource.index * 0.4}s;`}
+                            >
+                              <ArrowLeftRightIcon className="w-4 h-4 text-gray-600" />
+                              {resource.data.data.name}
+                            </div>
+                          );
+                        }
+                      })
+                    }
+                  </div>
+
+                  {/* Arrow indicator */}
+                  <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 animate-pulse">
+                    <svg class="w-12 h-12 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                    </svg>
+                  </div>
+
+                  {/* Design preview */}
+                  <div class="absolute right-0 top-1/2 -translate-y-1/2 animate-fade-in-scale" style="animation-delay: 2s;">
+                    <img
+                      src="/studio-bg.png"
+                      alt="Studio Design Preview"
+                      class="rounded-xl shadow-xl border border-gray-200 w-64 h-auto"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Features Section */}
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+              <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mb-4">
+                <svg class="w-6 h-6 text-gray-900" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                  <rect width="8" height="8" x="3" y="3" rx="2"></rect>
+                  <path d="M7 11v4a2 2 0 0 0 2 2h4"></path>
+                  <rect width="8" height="8" x="13" y="13" rx="2"></rect>
+                </svg>
+              </div>
+              <h3 class="text-lg font-semibold text-gray-900 mb-2">Real Resources</h3>
+              <p class="text-gray-600">
+                Drag and drop messages, services, and domains from your catalog. No more copying names or keeping things manually
+                in sync.
+              </p>
+            </div>
+
+            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+              <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mb-4">
+                <svg class="w-6 h-6 text-gray-900" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
+                  <polyline points="17 21 17 13 7 13 7 21"></polyline>
+                  <polyline points="7 3 7 8 15 8"></polyline>
+                </svg>
+              </div>
+              <h3 class="text-lg font-semibold text-gray-900 mb-2">Save & Version</h3>
+              <p class="text-gray-600">Save designs locally and store in Git. All designs and data is owned by you.</p>
+            </div>
+
+            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
+              <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mb-4">
+                <svg class="w-6 h-6 text-gray-900" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <polyline points="16 18 22 12 16 6"></polyline>
+                  <polyline points="8 6 2 12 8 18"></polyline>
+                </svg>
+              </div>
+              <h3 class="text-lg font-semibold text-gray-900 mb-2">Embed Anywhere</h3>
+              <p class="text-gray-600">
+                Drop diagrams directly into documentation pages. One source of truth for your architecture.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Studio Modal */}
+      <StudioPageModal client:only="react" />
+    </VerticalSideBarLayout>
+
+    <script>
+      // Handle opening the studio modal
+      const button = document.getElementById('design-button');
+      if (button) {
+        button.addEventListener('click', () => {
+          // Trigger the modal to open
+          window.dispatchEvent(new CustomEvent('openStudioModal'));
+        });
+      }
+    </script>
+
+    <style>
+      @keyframes float-in {
+        0% {
+          opacity: 0;
+          transform: translateX(-30px);
+        }
+        100% {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+
+      @keyframes fade-in-scale {
+        0% {
+          opacity: 0;
+          transform: translateY(-50%) scale(0.9);
+        }
+        100% {
+          opacity: 1;
+          transform: translateY(-50%) scale(1);
+        }
+      }
+
+      .animate-float-in {
+        animation: float-in 0.6s ease-out forwards;
+        opacity: 0;
+      }
+
+      .animate-fade-in-scale {
+        animation: fade-in-scale 0.8s ease-out forwards;
+        opacity: 0;
+      }
+    </style>
+  </body>
+</html>

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.61.3",
+  "version": "2.61.5",
   "publishConfig": {
     "access": "public"
   },
@@ -45,6 +45,7 @@
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
     "@iconify-json/logos": "^1.2.4",
+    "@mermaid-js/layout-elk": "^0.2.0",
     "@parcel/watcher": "^2.4.1",
     "@radix-ui/react-context-menu": "^2.2.6",
     "@radix-ui/react-dialog": "^1.1.6",