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

package/eventcatalog/src/features/studio/identity.ts

@@ -0,0 +1,59 @@
+// Who you are in Studio: the name you give on your first visit, kept in this browser and used on every canvas
+/** The colours people can go by (as Studio on the web's): on their pointer, avatar and comments */
+export const PERSON_COLORS = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899'];
+const COLORS = PERSON_COLORS;
+const NAME_KEY = 'eventcatalog-studio-name';
+const COLOR_KEY = 'eventcatalog-studio-color';
+/** Names people give are at most this long */
+export const MAX_NAME_LENGTH = 60;
+
+export const getStoredName = () => {
+  try {
+    return localStorage.getItem(NAME_KEY);
+  } catch {
+    return null;
+  }
+};
+
+/** Whether it was kept (storage can be blocked, e.g. in some private windows) */
+export const storeName = (name: string) => {
+  try {
+    localStorage.setItem(NAME_KEY, name);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+/** Your name changing in another tab (the event only fires in the other tabs) */
+export const onStoredNameChange = (listener: (name: string | null) => void) => {
+  const handle = (event: StorageEvent) => event.key === NAME_KEY && listener(event.newValue);
+  window.addEventListener('storage', handle);
+  return () => window.removeEventListener('storage', handle);
+};
+
+// Same name, same colour across reloads
+export const colorForName = (name: string) => {
+  let hash = 0;
+  for (const char of name) hash = (hash * 31 + char.charCodeAt(0)) | 0;
+  return COLORS[Math.abs(hash) % COLORS.length];
+};
+
+/** The colour you picked, kept in this browser (else it follows from your name) */
+export const getStoredColor = () => {
+  try {
+    const color = localStorage.getItem(COLOR_KEY);
+    return color && PERSON_COLORS.includes(color) ? color : null;
+  } catch {
+    return null;
+  }
+};
+
+export const storeColor = (color: string) => {
+  try {
+    localStorage.setItem(COLOR_KEY, color);
+    return true;
+  } catch {
+    return false;
+  }
+};

package/eventcatalog/src/features/studio/limits.ts

@@ -0,0 +1,2 @@
+/** Canvas titles are at most this long (no imports, so the browser can check it without loading a canvas) */
+export const MAX_TITLE_LENGTH = 200;

package/eventcatalog/src/features/studio/pages/[id].astro

@@ -0,0 +1,69 @@
+---
+// Visualiser styles ship in the page head so ClientRouter navigations keep them (see NodeGraph.astro).
+import '@eventcatalog/visualiser/styles-core.css';
+import '@eventcatalog/visualiser/studio.css';
+import '@eventcatalog/visualiser/studio-fonts.css';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { buildUrl } from '@utils/url-builder';
+import StudioDesigner from '../components/StudioDesigner';
+import StudioNotice from '../components/StudioNotice.astro';
+import { getCatalogResources } from '../catalog-resources';
+import { startStudio, STUDIO_SOCKET_PATH } from '../server/runtime';
+import { getSignedInUser, isSignedIn } from '../server/sign-in';
+import { CANVASES_API_PATH } from '../api/canvases-api';
+
+export const prerender = false;
+
+const { id } = Astro.params;
+
+if (!id || !/^[0-9a-f-]{36}$/i.test(id)) {
+  return Astro.redirect(buildUrl('/studio'));
+}
+
+// Studio can't start when its storage can't be used (e.g. the database was updated by a newer EventCatalog)
+const started = await startStudio({ isSignedIn }).catch((error: Error) => error);
+const unavailable = started instanceof Error ? started.message : undefined;
+const runtime = started instanceof Error ? undefined : started;
+// A deleted canvas's link (anyone who still had it open was told)
+const deleted = runtime?.isDeleted(id) ?? false;
+if (unavailable) Astro.response.status = 503;
+else if (deleted) Astro.response.status = 410;
+const { resources, relations } = runtime && !deleted ? await getCatalogResources() : { resources: [], relations: [] };
+const keptInMemory = runtime?.storage.type === 'memory';
+const signedInAs = getSignedInUser(Astro.locals);
+---
+
+<VerticalSideBarLayout title="Studio" showNestedSideBar={false}>
+  <main
+    class="min-h-0 overflow-hidden bg-[rgb(var(--ec-page-bg))]"
+    style="margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1); margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1); height: calc(100dvh - 60px);"
+  >
+    {
+      unavailable ? (
+        <StudioNotice title="Studio isn't available" message={unavailable} />
+      ) : deleted ? (
+        <StudioNotice
+          title="This canvas was deleted"
+          message="Someone deleted it, so it can't be opened any more."
+          href={buildUrl('/studio')}
+          linkText="Back to Studio"
+        />
+      ) : (
+        <StudioDesigner
+          client:only="react"
+          canvasId={id}
+          socketPath={buildUrl(STUDIO_SOCKET_PATH, true)}
+          newCanvasUrl={`${buildUrl('/studio')}?new=1`}
+          studioUrl={buildUrl('/studio')}
+          canvasesApiUrl={buildUrl(CANVASES_API_PATH, true)}
+          mcpUrl={buildUrl('/docs/mcp', true)}
+          relayScriptPath={buildUrl('/webmcp-relay/embed.js', true)}
+          keptInMemory={keptInMemory}
+          signedInAs={signedInAs}
+          resources={resources}
+          relations={relations}
+        />
+      )
+    }
+  </main>
+</VerticalSideBarLayout>