@eventcatalog/core 5.0.0-beta.12 → 5.0.0-beta.14

package/LICENSE

@@ -17,13 +17,13 @@ Licensed Work:        EventCatalog version 5.0 or later, including pre-releases,
                       and the examples directory. The Licensed Work is (c) 2026
                       EventCatalog Ltd.
 Additional Use Grant: You may make Production use of the Licensed Work if You
-                      are an Eligible User and Your use is not a Hosted
+                      qualify for Free Use and Your use is not a Hosted
                       Offering. Sections 1 to 7 below form part of this grant.
                       Capitalised terms are defined in section 6.
 
-                      1. Eligible Users
+                      1. Free Use
 
-                      You are an "Eligible User" if You are:
+                      You qualify for "Free Use" if You are:
 
                       (a) an individual using the Licensed Work for Your own
                           personal purposes, and not for or on behalf of any
@@ -47,9 +47,9 @@ Additional Use Grant: You may make Production use of the Licensed Work if You
 
                       2. Growing past the thresholds
 
-                      An Organisation that is an Eligible User under 1(b)
-                      remains one until ninety (90) days after the first of the
-                      following to happen:
+                      An Organisation that qualifies for Free Use under 1(b)
+                      continues to qualify until ninety (90) days after the
+                      first of the following to happen:
 
                       (a) the end of the first financial year in which its
                           Annual Revenue reaches USD 10,000,000; or
@@ -68,7 +68,7 @@ Additional Use Grant: You may make Production use of the Licensed Work if You
                       vendor), including building, customising, hosting or
                       distributing the Licensed Work or a catalog built with it
                       for that client, Your use for that client is permitted if
-                      the client is an Eligible User or holds a Commercial
+                      the client qualifies for Free Use or holds a Commercial
                       License covering that use. You may rely on a client's
                       written statement of its status unless You know it is
                       wrong. Your own use of the Licensed Work for Your own
@@ -76,7 +76,7 @@ Additional Use Grant: You may make Production use of the Licensed Work if You
 
                       4. Coming into compliance
 
-                      (a) If You stop being an Eligible User (for example
+                      (a) If You stop qualifying for Free Use (for example
                           because Your Evaluation Period ends), or You become
                           aware (including by notice from the Licensor) that
                           Your Production use is not permitted by this grant,
@@ -219,7 +219,8 @@ Additional Use Grant: You may make Production use of the Licensed Work if You
                           Public Open Source Projects.
 
                       "Commercial License" means a written license from the
-                      Licensor permitting Production use beyond this grant.
+                      Licensor, including one accepted online, permitting
+                      Production use beyond this grant.
 
                       7. Everything else
 
@@ -230,9 +231,9 @@ Additional Use Grant: You may make Production use of the Licensed Work if You
                       Work. The content of Your own catalog (the documentation,
                       schemas, diagrams and configuration You create) is Yours
                       and is not part of the Licensed Work.
-Change Date:          Four years after the first public release, including any
-                      pre-release, of any release in the same release series as
-                      the Licensed Work.
+Change Date:          Four years after the first public release (including any
+                      pre-release) in the same release series as the Licensed
+                      Work.
 
                       A "release series" is every release that shares the same
                       major and minor release number, including its pre-releases

package/dist/analytics/analytics.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(analytics_exports);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "5.0.0-beta.12";
+var version = "5.0.0-beta.14";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,8 +1,8 @@
 import {
   raiseEvent
-} from "../chunk-CX2VB7AI.js";
+} from "../chunk-PI5YNZZZ.js";
 import "../chunk-CPW6G62V.js";
-import "../chunk-FY6MSP6J.js";
+import "../chunk-I3XDOICA.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -176,7 +176,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "5.0.0-beta.12";
+var version = "5.0.0-beta.14";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,11 +1,11 @@
 import {
   log_build_default
-} from "../chunk-BWC4YKW3.js";
+} from "../chunk-WY6M3RPT.js";
 import "../chunk-AWOO63ME.js";
 import "../chunk-ZAZHAVKB.js";
-import "../chunk-CX2VB7AI.js";
+import "../chunk-PI5YNZZZ.js";
 import "../chunk-CPW6G62V.js";
-import "../chunk-FY6MSP6J.js";
+import "../chunk-I3XDOICA.js";
 import "../chunk-RFIXKATC.js";
 export {
   log_build_default as default

package/dist/catalog-runtime.cjs

@@ -36,7 +36,7 @@ __export(catalog_runtime_exports, {
 });
 module.exports = __toCommonJS(catalog_runtime_exports);
 
-// ../../node_modules/.pnpm/tsup@8.5.0_jiti@2.7.0_postcss@8.5.15_tsx@4.21.0_typescript@5.9.3_yaml@2.9.0/node_modules/tsup/assets/cjs_shims.js
+// ../../node_modules/.pnpm/tsup@8.5.0_jiti@2.7.0_postcss@8.5.29_tsx@4.23.15_typescript@5.9.3_yaml@2.9.0/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-TSY5CC27.js → chunk-4KE3EUDJ.js}

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

package/dist/{chunk-FY6MSP6J.js → chunk-I3XDOICA.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "5.0.0-beta.12";
+var version = "5.0.0-beta.14";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-QB7X34OD.js → chunk-OFK7U7BX.js}

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

package/dist/{chunk-CX2VB7AI.js → chunk-PI5YNZZZ.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-CPW6G62V.js";
 import {
   VERSION
-} from "./chunk-FY6MSP6J.js";
+} from "./chunk-I3XDOICA.js";
 
 // src/analytics/analytics.js
 import os from "os";

package/dist/{chunk-BWC4YKW3.js → chunk-WY6M3RPT.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-ZAZHAVKB.js";
 import {
   raiseEvent
-} from "./chunk-CX2VB7AI.js";
+} from "./chunk-PI5YNZZZ.js";
 import {
   TELEMETRY_REQUEST_TIMEOUT_MS,
   isTelemetryDisabled

package/dist/constants.cjs

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-FY6MSP6J.js";
+} from "./chunk-I3XDOICA.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@2.7.0_postcss@8.5.15_tsx@4.21.0_typescript@5.9.3_yaml@2.9.0/node_modules/tsup/assets/cjs_shims.js
+// ../../node_modules/.pnpm/tsup@8.5.0_jiti@2.7.0_postcss@8.5.29_tsx@4.23.15_typescript@5.9.3_yaml@2.9.0/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();
 
@@ -181,7 +181,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "5.0.0-beta.12";
+var version = "5.0.0-beta.14";
 
 // src/constants.ts
 var VERSION = version;
@@ -2980,7 +2980,7 @@ var resolveDevPort = async ({ projectDir }) => {
 };
 var startDevPrewarm = ({
   port = 3e3,
-  paths = ["/ping", "/"],
+  paths = ["/"],
   retries = 80,
   intervalMs = 250,
   initialDelayMs = 500
@@ -2989,10 +2989,13 @@ var startDevPrewarm = ({
   const hit = (requestPath) => new Promise((resolve2) => {
     const req = import_node_http.default.get(
       {
-        hostname: "127.0.0.1",
+        // Not 127.0.0.1: the dev server can listen on IPv6 only ([::1]), which refused
+        // every prewarm request
+        hostname: "localhost",
         port,
         path: requestPath,
-        timeout: 1200
+        // A refused connection fails at once; once connected, let the first render finish
+        timeout: 3e4
       },
       (res) => {
         res.resume();
@@ -3251,7 +3254,9 @@ program.command("dev").description("Run development server of EventCatalog").opt
       });
       startDevPrewarm({
         port: prewarmPort,
-        paths: ["/ping", "/"]
+        // Renders the homepage before anyone opens it. Requests stop at the first response,
+        // so a probe path like /ping first would leave the homepage cold.
+        paths: ["/"]
       });
     }
     await runCommandWithFilteredOutput({

package/dist/eventcatalog.js

@@ -4,7 +4,7 @@ import {
 import "./chunk-CA4U2JP7.js";
 import {
   log_build_default
-} from "./chunk-BWC4YKW3.js";
+} from "./chunk-WY6M3RPT.js";
 import {
   getLicenseStatus,
   printLicenseStatus
@@ -33,10 +33,10 @@ import {
 } from "./chunk-MDWB5HLO.js";
 import {
   generate
-} from "./chunk-TSY5CC27.js";
+} from "./chunk-4KE3EUDJ.js";
 import {
   logger
-} from "./chunk-QB7X34OD.js";
+} from "./chunk-OFK7U7BX.js";
 import {
   resolve_catalog_dependencies_default
 } from "./chunk-36RYTYT5.js";
@@ -50,7 +50,7 @@ import {
 import {
   watch
 } from "./chunk-U63GDPPY.js";
-import "./chunk-CX2VB7AI.js";
+import "./chunk-PI5YNZZZ.js";
 import "./chunk-CPW6G62V.js";
 import {
   getAstroConfigPath
@@ -67,7 +67,7 @@ import {
 } from "./chunk-LFQJXLHG.js";
 import {
   VERSION
-} from "./chunk-FY6MSP6J.js";
+} from "./chunk-I3XDOICA.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile
@@ -669,7 +669,7 @@ var resolveDevPort = async ({ projectDir }) => {
 };
 var startDevPrewarm = ({
   port = 3e3,
-  paths = ["/ping", "/"],
+  paths = ["/"],
   retries = 80,
   intervalMs = 250,
   initialDelayMs = 500
@@ -678,10 +678,13 @@ var startDevPrewarm = ({
   const hit = (requestPath) => new Promise((resolve) => {
     const req = http.get(
       {
-        hostname: "127.0.0.1",
+        // Not 127.0.0.1: the dev server can listen on IPv6 only ([::1]), which refused
+        // every prewarm request
+        hostname: "localhost",
         port,
         path: requestPath,
-        timeout: 1200
+        // A refused connection fails at once; once connected, let the first render finish
+        timeout: 3e4
       },
       (res) => {
         res.resume();
@@ -940,7 +943,9 @@ program.command("dev").description("Run development server of EventCatalog").opt
       });
       startDevPrewarm({
         port: prewarmPort,
-        paths: ["/ping", "/"]
+        // Renders the homepage before anyone opens it. Requests stop at the first response,
+        // so a probe path like /ping first would leave the homepage cold.
+        paths: ["/"]
       });
     }
     await runCommandWithFilteredOutput({

package/dist/generate.cjs

@@ -112,7 +112,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "5.0.0-beta.12";
+var version = "5.0.0-beta.14";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-TSY5CC27.js";
-import "./chunk-QB7X34OD.js";
-import "./chunk-FY6MSP6J.js";
+} from "./chunk-4KE3EUDJ.js";
+import "./chunk-OFK7U7BX.js";
+import "./chunk-I3XDOICA.js";
 import "./chunk-RFIXKATC.js";
 export {
   generate

package/dist/runtime-dependencies/@eventcatalog__visualiser__studio-fonts.css.mjs

@@ -0,0 +1,3 @@
+export * from "@eventcatalog/visualiser/studio-fonts.css";
+import * as dependency from "@eventcatalog/visualiser/studio-fonts.css";
+export default dependency.default;

package/dist/runtime-dependencies/@eventcatalog__visualiser__studio.css.mjs

@@ -0,0 +1,3 @@
+export * from "@eventcatalog/visualiser/studio.css";
+import * as dependency from "@eventcatalog/visualiser/studio.css";
+export default dependency.default;

package/dist/runtime-dependencies/@eventcatalog__visualiser__studio.mjs

@@ -0,0 +1,3 @@
+export * from "@eventcatalog/visualiser/studio";
+import * as dependency from "@eventcatalog/visualiser/studio";
+export default dependency.default;

package/dist/runtime-dependencies/manifest.json

@@ -21,6 +21,9 @@
   "@eventcatalog/sdk": "@eventcatalog__sdk.mjs",
   "@eventcatalog/visualiser": "@eventcatalog__visualiser.mjs",
   "@eventcatalog/visualiser/layout": "@eventcatalog__visualiser__layout.mjs",
+  "@eventcatalog/visualiser/studio": "@eventcatalog__visualiser__studio.mjs",
+  "@eventcatalog/visualiser/studio-fonts.css": "@eventcatalog__visualiser__studio-fonts.css.mjs",
+  "@eventcatalog/visualiser/studio.css": "@eventcatalog__visualiser__studio.css.mjs",
   "@eventcatalog/visualiser/styles-core.css": "@eventcatalog__visualiser__styles-core.css.mjs",
   "@fontsource/inter": "@fontsource__inter.mjs",
   "@fontsource/inter/400.css": "@fontsource__inter__400.css.mjs",

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 = "5.0.0-beta.12";
+var version = "5.0.0-beta.14";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-QB7X34OD.js";
-import "../chunk-FY6MSP6J.js";
+} from "../chunk-OFK7U7BX.js";
+import "../chunk-I3XDOICA.js";
 export {
   logger
 };

package/eventcatalog/astro.config.mjs

@@ -35,6 +35,8 @@ 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';
 
@@ -166,6 +168,8 @@ export default defineConfig({
     },
     plugins: [
       runtimeDependencies(),
+      stableDependencyOrder(),
+      skipStartupReload(),
       tailwindcss(),
       ...(await eventCatalogLikeC4(projectDirectory)),
       ...(config.trailingSlash === true ? [astroTrailingSlashEndpointFix()] : []),
@@ -224,7 +228,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/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/MDX/NodeGraph/AstroNodeGraph.tsx

@@ -17,9 +17,11 @@ import type { Node, Edge } from '@xyflow/react';
 import type { FlowGroupBy, OpenInStudioRequest } from '@eventcatalog/visualiser';
 import { buildUrl } from '@utils/url-builder';
 import { createCanvasThroughApi } from '@features/studio/api/client';
-import { canvasFromVisualiser } from '@features/studio/from-visualiser';
 import { getStoredName } from '@features/studio/identity';
-import OpenInStudioDialog from '@features/studio/components/OpenInStudioDialog';
+
+// 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 }))
@@ -123,6 +125,7 @@ const AstroNodeGraph = ({ isDevMode = false, resourceKey, studioApiUrl, ...other
     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, {
@@ -149,7 +152,12 @@ const AstroNodeGraph = ({ isDevMode = false, resourceKey, studioApiUrl, ...other
         onResetLayout={handleResetLayout}
         onOpenInStudio={studioApiUrl ? setToOpen : undefined}
       />
-      {toOpen && <OpenInStudioDialog title={toOpen.title} onOpen={openInStudio} onClose={closeOpenInStudio} />}
+      {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>
   );
 };