@eventcatalog/core 5.0.0-beta.2 → 5.0.0-beta.20

package/dist/utils/license-status.cjs

@@ -37,10 +37,11 @@ __export(license_status_exports, {
 });
 module.exports = __toCommonJS(license_status_exports);
 var import_boxen = __toESM(require("boxen"), 1);
+var import_picocolors = __toESM(require("picocolors"), 1);
 var import_license2 = require("@eventcatalog/license");
 
 // eventcatalog/src/utils/trial.ts
-var TRIAL_LENGTH_DAYS = 90;
+var TRIAL_LENGTH_DAYS = 60;
 var LICENSE_FAQ_URL = "https://www.eventcatalog.dev/license-faq";
 var LICENSE_RENEW_URL = "https://eventcatalog.cloud";
 var DAY_IN_MS = 24 * 60 * 60 * 1e3;
@@ -159,75 +160,100 @@ var getLicenseAnalytics = (license = { state: "none" }, tsd) => ({
 });
 var formatDate = (date) => date.toLocaleDateString(void 0, { dateStyle: "medium" });
 var formatDays = (days) => `${days} ${days === 1 ? "day" : "days"}`;
-var getTrialLine = (tsd, now) => {
+var PLAIN = { bold: (text) => text, dim: (text) => text, link: (text) => text };
+var COLOURS = { bold: import_picocolors.default.bold, dim: import_picocolors.default.dim, link: (text) => import_picocolors.default.cyan(text) };
+var render = ({ headline, rows, links }, colours) => {
+  const width = Math.max(0, ...[...rows, ...links].map(([label]) => label.length));
+  const row = ([label, value]) => `${colours.dim(label.padEnd(width))}  ${value}`;
+  return [
+    colours.bold(headline),
+    ...rows.length ? ["", ...rows.map(row)] : [],
+    ...links.length ? ["", ...links.map(([label, url]) => row([label, colours.link(url)]))] : []
+  ].join("\n");
+};
+var message = (content) => ({
+  ...content,
+  text: render(content, PLAIN)
+});
+var getTrialRow = (tsd, now) => {
   const trial = getTrialStatus(tsd, now);
   if (!trial) return;
-  return trial.ended ? `Your ${TRIAL_LENGTH_DAYS}-day EventCatalog trial ended on ${formatDate(trial.endsAt)}.` : `${formatDays(trial.daysLeft)} left of your ${TRIAL_LENGTH_DAYS}-day EventCatalog trial (ends ${formatDate(trial.endsAt)}).`;
+  return [
+    "Trial",
+    trial.ended ? `Ended ${formatDate(trial.endsAt)}` : `${formatDays(trial.daysLeft)} left of ${TRIAL_LENGTH_DAYS} (ends ${formatDate(trial.endsAt)})`
+  ];
 };
 var getLicenseStatusMessage = (license, tsd, now = Date.now()) => {
+  const licensing = ["Licensing", LICENSE_FAQ_URL];
+  const renew = ["Renew", LICENSE_RENEW_URL];
+  const licensedTo = "org" in license && license.org ? [["Licensed to", license.org]] : [];
   if (license.state === "licensed") {
     const daysLeft = Math.max(0, Math.ceil((license.expiresAt.getTime() - now) / DAY_IN_MS2));
-    const licensedTo = license.org ? `Licensed to ${license.org}` : "Licensed";
     if (daysLeft < LICENSE_REMINDER_DAYS) {
-      return {
-        title: "EventCatalog Commercial License",
+      return message({
+        title: "EventCatalog license",
         color: "yellow",
-        text: [
-          licensedTo,
-          `Your license expires in ${formatDays(daysLeft)}, on ${formatDate(license.expiresAt)}.`,
-          `Renew it to keep using EventCatalog commercially: ${LICENSE_RENEW_URL}`
-        ].join("\n")
-      };
+        headline: `Your commercial license expires in ${formatDays(daysLeft)}`,
+        rows: [...licensedTo, ["Expires", formatDate(license.expiresAt)]],
+        links: [renew]
+      });
     }
-    return {
-      title: "EventCatalog Commercial License",
+    return message({
+      title: "EventCatalog license",
       color: "green",
-      text: `${licensedTo}
-Valid until ${formatDate(license.expiresAt)} (${formatDays(daysLeft)} left)`
-    };
+      headline: "Commercial license active",
+      rows: [...licensedTo, ["Valid until", `${formatDate(license.expiresAt)} (${formatDays(daysLeft)} left)`]],
+      links: []
+    });
   }
   if (license.state === "plan") return;
-  const trialLine = getTrialLine(tsd, now);
+  const trialRow = getTrialRow(tsd, now);
+  const trialRows = trialRow ? [trialRow] : [];
   if (license.state === "none") {
-    if (!trialLine) return;
-    const ended = getTrialStatus(tsd, now)?.ended;
-    return {
+    const trial = getTrialStatus(tsd, now);
+    if (!trial || !trialRow) return;
+    return message({
       title: "EventCatalog trial",
-      color: ended ? "yellow" : "green",
-      text: `${trialLine}
-Learn about licensing: ${LICENSE_FAQ_URL}`
-    };
+      color: trial.ended ? "yellow" : "green",
+      headline: trial.ended ? "Your EventCatalog trial has ended" : `You're on the ${TRIAL_LENGTH_DAYS}-day EventCatalog trial`,
+      rows: trialRows,
+      links: trial.ended ? [["Get a license", LICENSE_RENEW_URL], licensing] : [licensing]
+    });
   }
   if (license.state === "expired") {
-    const expiredOn = license.expiresAt ? `expired on ${formatDate(license.expiresAt)} (${formatDays(Math.floor((now - license.expiresAt.getTime()) / DAY_IN_MS2))} ago)` : "has expired";
-    return {
-      title: "EventCatalog License Expired",
+    const expiredOn = license.expiresAt ? [
+      [
+        "Expired",
+        `${formatDate(license.expiresAt)} (${formatDays(Math.floor((now - license.expiresAt.getTime()) / DAY_IN_MS2))} ago)`
+      ]
+    ] : [];
+    return message({
+      title: "EventCatalog license",
       color: "yellow",
-      text: [
-        `Your EventCatalog commercial license${license.org ? ` for ${license.org}` : ""} ${expiredOn}.`,
-        `Renew it to keep using EventCatalog commercially: ${LICENSE_RENEW_URL}`,
-        trialLine,
-        `Learn about licensing: ${LICENSE_FAQ_URL}`
-      ].filter(Boolean).join("\n")
-    };
+      headline: "Your commercial license has expired",
+      rows: [...licensedTo, ...expiredOn, ...trialRows],
+      links: [renew, licensing]
+    });
   }
-  return {
+  return message({
     title: "EventCatalog license",
     color: "yellow",
-    text: [`Your license.jwt could not be verified: ${license.reason}.`, trialLine, `Learn about licensing: ${LICENSE_FAQ_URL}`].filter(Boolean).join("\n")
-  };
+    headline: "Your license.jwt couldn't be verified",
+    rows: [["Reason", license.reason.charAt(0).toUpperCase() + license.reason.slice(1)], ...trialRows],
+    links: [licensing]
+  });
 };
 var printLicenseStatus = (license, tsd) => {
-  const message = getLicenseStatusMessage(license, tsd);
-  if (!message) return;
+  const status = getLicenseStatusMessage(license, tsd);
+  if (!status) return;
   console.log(
-    (0, import_boxen.default)(message.text, {
-      padding: 1,
+    (0, import_boxen.default)(render(status, COLOURS), {
+      padding: { top: 1, bottom: 1, left: 2, right: 2 },
       margin: 1,
       borderStyle: "round",
-      borderColor: message.color,
-      title: message.title,
-      titleAlignment: "center"
+      borderColor: status.color,
+      title: status.title,
+      titleAlignment: "left"
     })
   );
 };

package/dist/utils/license-status.d.cts

@@ -15,14 +15,23 @@ declare const getLicenseAnalytics: (license?: LicenseStatus, tsd?: unknown) => {
     licenseExpiry: number | undefined;
     trialExpiry: number | undefined;
 };
+type Row = [label: string, value: string];
 /**
- * The license (or trial) box for the terminal. Undefined when there's nothing to show.
+ * What the license box says: a headline, the facts as aligned rows ("Licensed to  acme"), and links on their own
+ * rows, so it can be read at a glance. `text` is the box's content without colours.
  */
-declare const getLicenseStatusMessage: (license: LicenseStatus, tsd: unknown, now?: number) => {
+type LicenseStatusMessage = {
     title: string;
-    color: string;
+    color: 'green' | 'yellow';
+    headline: string;
+    rows: Row[];
+    links: Row[];
     text: string;
-} | undefined;
+};
+/**
+ * The license (or trial) box for the terminal. Undefined when there's nothing to show.
+ */
+declare const getLicenseStatusMessage: (license: LicenseStatus, tsd: unknown, now?: number) => LicenseStatusMessage | undefined;
 declare const printLicenseStatus: (license: LicenseStatus, tsd: unknown) => void;
 
-export { LicenseStatus, getLicenseAnalytics, getLicenseStatus, getLicenseStatusMessage, printLicenseStatus };
+export { LicenseStatus, type LicenseStatusMessage, getLicenseAnalytics, getLicenseStatus, getLicenseStatusMessage, printLicenseStatus };

package/dist/utils/license-status.d.ts

@@ -15,14 +15,23 @@ declare const getLicenseAnalytics: (license?: LicenseStatus, tsd?: unknown) => {
     licenseExpiry: number | undefined;
     trialExpiry: number | undefined;
 };
+type Row = [label: string, value: string];
 /**
- * The license (or trial) box for the terminal. Undefined when there's nothing to show.
+ * What the license box says: a headline, the facts as aligned rows ("Licensed to  acme"), and links on their own
+ * rows, so it can be read at a glance. `text` is the box's content without colours.
  */
-declare const getLicenseStatusMessage: (license: LicenseStatus, tsd: unknown, now?: number) => {
+type LicenseStatusMessage = {
     title: string;
-    color: string;
+    color: 'green' | 'yellow';
+    headline: string;
+    rows: Row[];
+    links: Row[];
     text: string;
-} | undefined;
+};
+/**
+ * The license (or trial) box for the terminal. Undefined when there's nothing to show.
+ */
+declare const getLicenseStatusMessage: (license: LicenseStatus, tsd: unknown, now?: number) => LicenseStatusMessage | undefined;
 declare const printLicenseStatus: (license: LicenseStatus, tsd: unknown) => void;
 
-export { LicenseStatus, getLicenseAnalytics, getLicenseStatus, getLicenseStatusMessage, printLicenseStatus };
+export { LicenseStatus, type LicenseStatusMessage, getLicenseAnalytics, getLicenseStatus, getLicenseStatusMessage, printLicenseStatus };

package/dist/utils/license-status.js

@@ -3,7 +3,7 @@ import {
   getLicenseStatus,
   getLicenseStatusMessage,
   printLicenseStatus
-} from "../chunk-TQLRG35T.js";
+} from "../chunk-AWOO63ME.js";
 export {
   getLicenseAnalytics,
   getLicenseStatus,

package/eventcatalog/astro.config.mjs

@@ -27,12 +27,16 @@ import expressiveCode from 'astro-expressive-code';
 // preprocessors and the rehype plugin below load those same package defaults.
 import expressiveCodeConfig from './ec.config.mjs';
 import ecstudioWatcher from './integrations/ecstudio-watcher.mjs';
+import storage from './integrations/storage.mjs';
+import studioServer from './integrations/studio-server.mjs';
 import eventCatalogIntegration from './src/features/integrations/eventcatalog-features.ts';
 import eventCatalogRuntime, { getDevServerFileSystem, packageDirectory } from './integrations/eventcatalog-runtime.mjs';
 import config from './src/utils/eventcatalog-config/source.ts';
 import preprocessExpressiveCodeConfig from './integrations/expressive-code-config.mjs';
 import catalogAssets from './integrations/catalog-assets.mjs';
 import runtimeDependencies from './integrations/runtime-dependencies.mjs';
+import stableDependencyOrder from './integrations/stable-dependency-order.mjs';
+import skipStartupReload from './integrations/skip-startup-reload.mjs';
 import { getRuntimePaths } from './integrations/runtime-paths.mjs';
 import { collectClientDependencies } from './integrations/client-dependencies.mjs';
 
@@ -113,6 +117,11 @@ export default defineConfig({
 
   // just turn this off for all users (for now...)
   devToolbar: { enabled: false },
+  build: {
+    // Render several pages at once: pages wait on file reads and graph layouts, and a 640-event
+    // catalog built in ~40s rather than ~70s, with the same pages and less memory.
+    concurrency: 4,
+  },
 
   // Unused resource types are valid. Astro otherwise warns on every getCollection()
   // call for those empty collections ("check your content config file for errors").
@@ -139,6 +148,9 @@ export default defineConfig({
     catalogAssets({ projectDirectory, generatedDirectory: join(runtimeDirectory, 'public') }),
     effectiveOutput !== 'server' && compress && (await loadAstroCompressIntegration(projectDirectory)),
     ecstudioWatcher(),
+    // Before Studio: its database is opened and migrated first
+    storage(),
+    studioServer(),
     eventCatalogIntegration(),
     linkValidation(config.linkValidation),
   ].filter(Boolean),
@@ -161,6 +173,8 @@ export default defineConfig({
     },
     plugins: [
       runtimeDependencies(),
+      stableDependencyOrder(),
+      skipStartupReload(),
       tailwindcss(),
       ...(await eventCatalogLikeC4(projectDirectory)),
       ...(config.trailingSlash === true ? [astroTrailingSlashEndpointFix()] : []),
@@ -219,7 +233,15 @@ export default defineConfig({
     },
     optimizeDeps: {
       exclude: [],
-      include: collectClientDependencies(),
+      include: [
+        ...collectClientDependencies(),
+        // <ClientRouter /> imports these from a virtual module the dependency scan can't follow,
+        // so without them every cold start re-bundles on the first page and reloads it
+        'astro/virtual-modules/transitions-events.js',
+        'astro/virtual-modules/transitions-router.js',
+        'astro/virtual-modules/transitions-swap-functions.js',
+        'astro/virtual-modules/transitions-types.js',
+      ],
     },
   },
 });

package/eventcatalog/integrations/skip-startup-reload.mjs

@@ -0,0 +1,31 @@
+// Astro writes its content data store as the dev server starts, which sends the browser a
+// full reload. With no browser connected yet, Vite holds that reload and hands it to the
+// first page that connects, so the first page opened after every start loaded twice.
+// A reload sent before any page has been served has nothing to refresh (a tab left open
+// from the previous run reloads itself when it reconnects), so drop those. Once a page has
+// been requested, reloads pass through as usual.
+
+const isFullReload = (payload) => typeof payload === 'object' && payload?.type === 'full-reload';
+
+export default function skipStartupReload() {
+  return {
+    name: 'eventcatalog:skip-startup-reload',
+    apply: 'serve',
+    configureServer(server) {
+      let pageRequested = false;
+      server.middlewares.use((req, _res, next) => {
+        // Browser navigations ask for HTML; the CLI's prewarm request doesn't
+        if (!pageRequested && req.headers.accept?.includes('text/html')) pageRequested = true;
+        next();
+      });
+
+      for (const channel of new Set([server.ws, server.environments?.client?.hot].filter(Boolean))) {
+        const send = channel.send.bind(channel);
+        channel.send = (...args) => {
+          if (!pageRequested && isFullReload(args[0])) return;
+          return send(...args);
+        };
+      }
+    },
+  };
+}

package/eventcatalog/integrations/stable-dependency-order.mjs

@@ -0,0 +1,29 @@
+// Astro crawls framework packages with vitefu, which looks them up concurrently and lists
+// each one in `resolve.external` / `resolve.noExternal` as its lookup finishes, so the
+// order changes from one start to the next. Vite hashes these lists unsorted to decide
+// whether its pre-bundled dependencies are still valid, so every `eventcatalog dev` saw a
+// "changed" config and re-bundled all of them. Only membership matters in these lists, so
+// sorting them keeps the hash (and the dependency cache) stable across starts.
+
+const byName = (a, b) => {
+  const left = String(a);
+  const right = String(b);
+  return left < right ? -1 : left > right ? 1 : 0;
+};
+
+const sortResolveLists = (resolve) => {
+  if (Array.isArray(resolve?.external)) resolve.external.sort(byName);
+  if (Array.isArray(resolve?.noExternal)) resolve.noExternal.sort(byName);
+};
+
+export default function stableDependencyOrder() {
+  return {
+    name: 'eventcatalog:stable-dependency-order',
+    apply: 'serve',
+    configResolved(config) {
+      sortResolveLists(config.resolve);
+      sortResolveLists(config.ssr);
+      for (const environment of Object.values(config.environments ?? {})) sortResolveLists(environment.resolve);
+    },
+  };
+}

package/eventcatalog/integrations/storage.mjs

@@ -0,0 +1,20 @@
+import { startStorage } from '../src/features/storage/database.ts';
+
+// The state EventCatalog keeps (`storage` in eventcatalog.config.js): as the dev server starts, its database is opened
+// and brought up to date (migrated), whether or not a feature that uses it is opened. `eventcatalog start` does the
+// same through /_eventcatalog/start.
+export default function storage() {
+  return {
+    name: 'eventcatalog-storage',
+    hooks: {
+      'astro:server:setup': async ({ logger }) => {
+        try {
+          const file = await startStorage();
+          if (file) logger.info(`Database ready (${file})`);
+        } catch (error) {
+          logger.error(`Could not open the database: ${error.message}`);
+        }
+      },
+    },
+  };
+}

package/eventcatalog/integrations/studio-server.mjs

@@ -0,0 +1,32 @@
+import { getStudioRuntime } from '../src/features/studio/server/runtime.ts';
+import { isDatabaseTooNew } from '../src/features/storage/migrations.ts';
+import config from '../src/utils/eventcatalog-config/source.ts';
+import { isCanvasEnabled } from '../src/utils/feature.ts';
+
+// Collaborative canvases: the collaboration WebSocket (Yjs over Hocuspocus), on the dev server's port.
+// The runtime is shared with server code (e.g. MCP tools) through globalThis.
+export default function studioServer() {
+  return {
+    name: 'eventcatalog-studio-server',
+    hooks: {
+      'astro:server:setup': async ({ server, logger }) => {
+        if (!isCanvasEnabled() || !server.httpServer) return;
+        const runtime = getStudioRuntime();
+        const projectDirectory = process.env.PROJECT_DIR || process.cwd();
+        // Canvases are loaded from storage before anyone can open one
+        try {
+          await runtime.useStorage(config.storage, projectDirectory);
+        } catch (error) {
+          // Not kept in memory instead (changes would quietly stop being saved): Studio's pages say why
+          if (isDatabaseTooNew(error)) return logger.error(`Studio isn't available: ${error.message}`);
+          logger.error(`Could not use the Studio storage configured, keeping canvases in memory: ${error.message}`);
+          await runtime.useStorage({ type: 'memory' }, projectDirectory);
+        }
+        runtime.attach(server.httpServer);
+        const { type, location } = runtime.storage;
+        const kept = type === 'memory' ? 'kept in memory until the server restarts' : `stored in ${location}`;
+        logger.info(`Collaboration server ready at /_eventcatalog/studio (canvases ${kept})`);
+      },
+    },
+  };
+}

package/eventcatalog/src/components/CatalogGraph/CatalogForceGraph.tsx

@@ -170,6 +170,16 @@ const nodeRadius = (degree: number, isHub = false) =>
 /** Above this node count, expensive extras (collision force) are disabled. */
 const LARGE_GRAPH_NODE_COUNT = 1500;
 
+/**
+ * The first layout settles before it paints instead of animating into place for ~5s: ticks
+ * run in short slices across frames (no long tasks) until it settles, ~40ms of work for 100
+ * nodes. Big catalogs stop once ticking has taken the work limit, paint past their largest
+ * moves and animate the rest. The limit counts ticking time, not elapsed time, so a page busy
+ * hydrating other islands doesn't cut the settle short.
+ */
+const INITIAL_SETTLE_SLICE_MS = 12;
+const INITIAL_SETTLE_WORK_LIMIT_MS = 400;
+
 /** Sprite resolution for node icons (drawn scaled-down, so keep it crisp) */
 const ICON_SPRITE_SIZE = 64;
 
@@ -617,6 +627,10 @@ const CatalogForceGraph = ({
     // normal-sized, whatever the lens's usual hubs are
     const isHub = (d: SimNode) => (focusKey ? d.key === focusKey : hubs.has(d.collection));
 
+    // Later layouts (lens, focus and filter changes) animate from the previous positions
+    const isFirstLayout = positionsRef.current.size === 0;
+    // Nothing paints until the first layout has settled (see INITIAL_SETTLE_SLICE_MS)
+    let settling = isFirstLayout;
     const visibleNodes: SimNode[] = viewNodes
       .filter((n) => !hiddenCollections.has(n.collection))
       .map((n) => ({ ...n, degree: 0, ...positionsRef.current.get(n.key) }));
@@ -734,6 +748,7 @@ const CatalogForceGraph = ({
     };
 
     const draw = () => {
+      if (settling) return;
       context.save();
       context.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
       context.clearRect(0, 0, width, height);
@@ -1014,6 +1029,29 @@ const CatalogForceGraph = ({
       );
     }
 
+    // Settle the first layout before it paints rather than animating it into place
+    let settleFrame: number | undefined;
+    if (isFirstLayout) {
+      simulation.stop();
+      let workLeft = INITIAL_SETTLE_WORK_LIMIT_MS;
+      const settle = () => {
+        const sliceStart = performance.now();
+        const sliceEnd = sliceStart + Math.min(INITIAL_SETTLE_SLICE_MS, workLeft);
+        while (simulation.alpha() > simulation.alphaMin() && performance.now() < sliceEnd) simulation.tick();
+        workLeft -= performance.now() - sliceStart;
+        if (simulation.alpha() > simulation.alphaMin() && workLeft > 0) {
+          settleFrame = requestAnimationFrame(settle);
+          return;
+        }
+        settling = false;
+        // Settled: paint it as is (restarting would run one tick more than the animated
+        // layout). Otherwise paint and animate whatever is left.
+        if (simulation.alpha() <= simulation.alphaMin()) fitToView();
+        else simulation.restart();
+      };
+      settleFrame = requestAnimationFrame(settle);
+    }
+
     const findNode = (canvasX: number, canvasY: number): SimNode | null => {
       if (Number.isNaN(canvasX) || Number.isNaN(canvasY)) return null;
       const x = transform.invertX(canvasX);
@@ -1219,6 +1257,7 @@ const CatalogForceGraph = ({
       for (const node of visibleNodes) {
         if (node.x !== undefined && node.y !== undefined) positionsRef.current.set(node.key, { x: node.x, y: node.y });
       }
+      if (settleFrame !== undefined) cancelAnimationFrame(settleFrame);
       simulation.stop();
       // The tooltip outlives this effect — never leave it showing stale content
       tooltip.style.opacity = '0';

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

@@ -29,6 +29,8 @@ const CHAT_PANEL_STYLES = `
   }
   .ec-chat-surface { font-weight: 400; }
   .ec-chat-avatar { background: rgb(var(--ec-accent) / .06); animation: ec-chat-breathe 5s ease-in-out infinite; }
+  /* The closed panel stays on the page (off screen): a running animation there still costs every frame */
+  .ec-chat-surface[aria-hidden='true'] .ec-chat-avatar { animation-play-state: paused; }
   .ec-chat-suggestion { width: fit-content; max-width: 100%; transition: background 180ms, transform 180ms; }
   .ec-chat-suggestion:hover { transform: translateX(3px); }
   .ec-chat-message { animation: fadeInUp 280ms ease-out both; }

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

@@ -24,26 +24,3 @@ export const getCollectionStyles = (collection: CollectionMessageTypes | Collect
       return { color: 'gray', Icon: EnvelopeIcon };
   }
 };
-
-export interface PaginationProps {
-  currentPage: number;
-  totalPages: number;
-  totalItems: number;
-  itemsPerPage: number;
-  onPageChange: (page: number) => void;
-}
-
-export interface SearchBarProps {
-  searchQuery: string;
-  onSearchChange: (query: string) => void;
-  placeholder?: string;
-  totalResults?: number;
-  totalItems?: number;
-}
-
-export interface TypeFilterProps {
-  selectedTypes: CollectionMessageTypes[];
-  onTypeChange: (types: CollectionMessageTypes[]) => void;
-  filteredCount?: number;
-  totalCount?: number;
-}

package/eventcatalog/src/components/Header.astro

@@ -94,16 +94,16 @@ const providerName = user?.provider ? providerNames[user.provider] || user.provi
                     <img
                       src={userImage}
                       alt=""
-                      class="h-8 w-8 rounded-full object-cover ring-1 ring-[rgb(var(--ec-page-border))]"
+                      class="h-7 w-7 rounded-full object-cover ring-1 ring-[rgb(var(--ec-page-border))]"
                     />
                   ) : (
-                    <span class="h-8 w-8 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] ring-1 ring-[rgb(var(--ec-page-border))] flex items-center justify-center text-xs font-semibold">
+                    <span class="h-7 w-7 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] ring-1 ring-[rgb(var(--ec-page-border))] flex items-center justify-center text-[11px] font-semibold">
                       {userInitials}
                     </span>
                   )}
                   <svg
                     viewBox="0 0 24 24"
-                    class="h-4 w-4 transition-transform group-aria-expanded:rotate-180"
+                    class="h-3.5 w-3.5 transition-transform group-aria-expanded:rotate-180"
                     fill="none"
                     stroke="currentColor"
                     stroke-width="2"

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

@@ -167,7 +167,12 @@ export default function CodeGroup({
             hidden={index !== active}
             tabIndex={0}
           >
-            {item.html !== undefined ? <div dangerouslySetInnerHTML={{ __html: item.html }} /> : item.content}
+            {/* Astro's router marks scripts in this HTML with data-astro-exec before hydration, so it never matches exactly. */}
+            {item.html !== undefined ? (
+              <div suppressHydrationWarning dangerouslySetInnerHTML={{ __html: item.html }} />
+            ) : (
+              item.content
+            )}
           </div>
         ))}
       </div>

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

@@ -12,10 +12,16 @@
  * CSS ships in the page head and survives ClientRouter navigations (see NodeGraph.astro).
  */
 
-import { useCallback, lazy, Suspense } from 'react';
+import { useCallback, useState, lazy, Suspense } from 'react';
 import type { Node, Edge } from '@xyflow/react';
-import type { FlowGroupBy } from '@eventcatalog/visualiser';
+import type { FlowGroupBy, OpenInStudioRequest } from '@eventcatalog/visualiser';
 import { buildUrl } from '@utils/url-builder';
+import { createCanvasThroughApi } from '@features/studio/api/client';
+import { getStoredName } from '@features/studio/identity';
+
+// Studio's canvas code (what turns a diagram into a canvas, and the dialog asking for its name) is only loaded when a
+// diagram is opened in Studio: every page with a diagram would load it otherwise, with Studio on or not
+const OpenInStudioDialog = lazy(() => import('@features/studio/components/OpenInStudioDialog'));
 
 const NodeGraph = lazy(() =>
   import('@eventcatalog/visualiser').then((module) => ({ default: module.NodeGraph }))
@@ -57,9 +63,11 @@ interface AstroNodeGraphProps {
   preferenceScope?: string;
   // Group a flow's steps into swimlanes to start with
   swimlanes?: FlowGroupBy;
+  // The Studio API's address, when Studio is on: the menu can then start a canvas from the diagram
+  studioApiUrl?: string;
 }
 
-const AstroNodeGraph = ({ isDevMode = false, resourceKey, ...otherProps }: AstroNodeGraphProps) => {
+const AstroNodeGraph = ({ isDevMode = false, resourceKey, studioApiUrl, ...otherProps }: AstroNodeGraphProps) => {
   // Astro-specific navigation handler
   const handleNavigate = useCallback((url: string) => {
     // Use window.location for navigation since we can't import astro:transitions/client in a React component
@@ -108,6 +116,30 @@ const AstroNodeGraph = ({ isDevMode = false, resourceKey, ...otherProps }: Astro
     }
   }, []);
 
+  // Opening the diagram in Studio: asks what to call the canvas, then makes it with what the diagram shows and opens
+  // it (in this tab) at the level shown. What it shows is only taken once it's named (laying a level out can take a
+  // moment), and anything that goes wrong is shown in the dialog.
+  const [toOpen, setToOpen] = useState<OpenInStudioRequest | null>(null);
+  const closeOpenInStudio = useCallback(() => setToOpen(null), []);
+  const openInStudio = useCallback(
+    async (title: string | undefined) => {
+      if (!studioApiUrl || !toOpen) return;
+      const snapshot = await toOpen.getSnapshot();
+      const { canvasFromVisualiser } = await import('@features/studio/from-visualiser');
+      const { nodes, edges, levels } = canvasFromVisualiser(snapshot);
+      if (nodes.length === 0) throw new Error('Nothing on this diagram can go on a canvas yet');
+      const canvas = await createCanvasThroughApi(studioApiUrl, {
+        title,
+        createdBy: getStoredName() ?? undefined,
+        nodes,
+        edges,
+        levels,
+      });
+      window.location.assign(snapshot.level === 3 ? canvas.url : `${canvas.url}?level=${snapshot.level}`);
+    },
+    [studioApiUrl, toOpen]
+  );
+
   return (
     <Suspense fallback={<div>Loading graph...</div>}>
       <NodeGraph
@@ -118,7 +150,14 @@ const AstroNodeGraph = ({ isDevMode = false, resourceKey, ...otherProps }: Astro
         onBuildUrl={handleBuildUrl}
         onSaveLayout={handleSaveLayout}
         onResetLayout={handleResetLayout}
+        onOpenInStudio={studioApiUrl ? setToOpen : undefined}
       />
+      {toOpen && (
+        // Its own, so the diagram isn't swapped for "Loading graph..." while the dialog loads
+        <Suspense fallback={null}>
+          <OpenInStudioDialog title={toOpen.title} onOpen={openInStudio} onClose={closeOpenInStudio} />
+        </Suspense>
+      )}
     </Suspense>
   );
 };