@eventcatalog/core 5.0.0-beta.7 → 5.0.0-beta.8

package/eventcatalog/src/features/studio/components/ConnectAgentDialog.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState, type ReactNode } from 'react';
-import { Bot, Check, Copy, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Bot, Check, ChevronDown, Copy, X } from 'lucide-react';
 import type { WebMcpStatus } from '../hooks/use-canvas-webmcp';
 import { STATUS } from './status';
 
@@ -71,12 +71,12 @@ Connect with the first of these you can use:
 3. WebMCP local relay: if you run on my computer (e.g. Claude Code, Cursor) and can't reach the MCP server, add the MCP server \`${RELAY_COMMAND}\`. It gives you the tools of my open canvas tab.
 
 Once connected:
-- Read the canvas first (getCanvas / get_canvas) and tell me who else is on it.
-- Ask me what we are designing, then work on the canvas as we talk: add catalog resources (find them with getResources / search_catalog), add new components for things that don't exist yet, and connect them. Leave out positions so new nodes go next to what they connect to; only re-lay the whole canvas (layoutCanvas / layout_canvas) when I ask.
-- Leave questions and suggestions as comments on the canvas, and reply to comments people leave for you.
+- Read the canvas first (getCanvas / get_canvas) and tell me here who else is on it.
+- Ask me here, in our conversation, what we are designing, then work on the canvas as we talk: add catalog resources (find them with getResources / search_catalog), add new components for things that don't exist yet, and connect them. Leave out positions so new nodes go next to what they connect to; only re-lay the whole canvas (layoutCanvas / layout_canvas) when I ask.
+- Talk to me here, not in canvas comments. Only comment on the canvas when I ask you to (e.g. to review it), and reply to comments people leave for you.
 - Pass agentName with your name on MCP tools, so people on the canvas can see who you are.`;
 
-function CopyButton({ text, label = 'Copy' }: { text: string; label?: string }) {
+function CopyButton({ text, label = 'Copy', large = false }: { text: string; label?: string; large?: boolean }) {
   const [copied, setCopied] = useState(false);
   return (
     <button
@@ -85,31 +85,56 @@ function CopyButton({ text, label = 'Copy' }: { text: string; label?: string })
         setCopied(true);
         setTimeout(() => setCopied(false), 1500);
       }}
-      className="flex shrink-0 items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))]"
+      className={`flex shrink-0 items-center justify-center gap-1.5 rounded-lg font-medium bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))] hover:bg-[rgb(var(--ec-button-bg-hover))] ${
+        large ? 'w-full px-4 py-2.5 text-sm' : 'px-2.5 py-1.5 text-xs'
+      }`}
     >
-      {copied ? <Check size={14} /> : <Copy size={14} />}
+      {copied ? <Check size={large ? 16 : 14} /> : <Copy size={large ? 16 : 14} />}
       {copied ? 'Copied' : label}
     </button>
   );
 }
 
-function Detail({ title, value, children }: { title: string; value?: string; children: ReactNode }) {
+/** Something to copy (an address or a command), with its copy button */
+function CopyField({ value }: { value: string }) {
   return (
-    <div className="space-y-1.5">
-      <h3 className="text-xs font-semibold">{title}</h3>
-      <p className="text-xs text-[rgb(var(--ec-page-text-muted))]">{children}</p>
-      {value && (
-        <div className="flex items-center gap-2">
-          <code className="min-w-0 flex-1 truncate rounded-md border px-2 py-1.5 text-xs bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))]">
-            {value}
-          </code>
-          <CopyButton text={value} />
-        </div>
-      )}
+    <div className="flex items-center gap-2">
+      <code className="min-w-0 flex-1 truncate rounded-md border px-2 py-1.5 text-xs bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))]">
+        {value}
+      </code>
+      <CopyButton text={value} />
     </div>
   );
 }
 
+/** Turns something on for this tab, or says it's on */
+function TabSwitch({ on, onTurnOn, label }: { on: boolean; onTurnOn: () => void; label: string }) {
+  return on ? (
+    <p className={`flex shrink-0 items-center gap-1.5 whitespace-nowrap text-xs font-medium ${STATUS.success.text}`}>
+      <span className={`h-2 w-2 rounded-full ${STATUS.success.dot}`} />
+      On for this tab
+    </p>
+  ) : (
+    <button
+      onClick={onTurnOn}
+      className="shrink-0 whitespace-nowrap rounded-lg border px-2.5 py-1.5 text-xs font-medium border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-page-border)/0.4)]"
+    >
+      {label}
+    </button>
+  );
+}
+
+type Way = 'chat' | 'code' | 'browser';
+const WAYS: { id: Way; label: string; hint: string }[] = [
+  { id: 'chat', label: 'Chat app', hint: 'Claude, ChatGPT' },
+  { id: 'code', label: 'Coding agent', hint: 'Claude Code, Cursor, Codex' },
+  { id: 'browser', label: 'This browser', hint: 'WebMCP' },
+];
+
+/**
+ * Bringing an AI agent onto the canvas: copy the prompt and give it to the agent (it works out how to connect).
+ * The prompt is there to read, and how each kind of agent connects is one step each, for setting it up by hand.
+ */
 export default function ConnectAgentDialog({
   link,
   webMcp,
@@ -127,6 +152,8 @@ export default function ConnectAgentDialog({
 }) {
   const prompt = buildAgentPrompt(link);
   const [relayOn, setRelayOn] = useState(isRelayEnabled);
+  const [showPrompt, setShowPrompt] = useState(false);
+  const [way, setWay] = useState<Way>('chat');
 
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => event.key === 'Escape' && onClose();
@@ -134,82 +161,119 @@ export default function ConnectAgentDialog({
     return () => window.removeEventListener('keydown', onKeyDown);
   }, [onClose]);
 
+  const turnOnRelay = () => {
+    if (!relayScriptPath) return;
+    enableRelay(relayScriptPath);
+    setRelayOn(true);
+    // The relay hands this tab's WebMCP tools to desktop agents
+    onEnableWebMcp();
+  };
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" onClick={onClose}>
       <div
         role="dialog"
         aria-label="Connect your agent"
         onClick={(event) => event.stopPropagation()}
-        className="flex max-h-full w-full max-w-2xl flex-col rounded-xl border shadow-2xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]"
+        className="flex max-h-full w-full max-w-md flex-col rounded-xl border shadow-2xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]"
       >
-        <div className="flex items-start justify-between gap-4 border-b p-5 border-[rgb(var(--ec-page-border))]">
-          <div className="space-y-1">
-            <h2 className="flex items-center gap-2 text-base font-semibold">
+        <header className="flex items-start justify-between gap-3 px-5 pb-3 pt-5">
+          <div className="flex items-center gap-3">
+            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))]">
               <Bot size={18} />
-              Connect your agent
-            </h2>
-            <p className="text-sm text-[rgb(var(--ec-page-text-muted))]">
-              Give this prompt to your agent (Claude, ChatGPT, Codex, Cursor...). It joins this canvas and works on it with you,
-              live, using whatever it can connect with.
-            </p>
+            </span>
+            <div>
+              <h2 className="text-base font-semibold">Bring in an AI agent</h2>
+              <p className="text-xs text-[rgb(var(--ec-page-text-muted))]">It joins this canvas and designs with you, live.</p>
+            </div>
           </div>
           <button
             onClick={onClose}
             aria-label="Close"
-            className="rounded p-1 text-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-page-border)/0.5)]"
+            className="rounded-md p-1 text-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-page-border)/0.5)]"
           >
             <X size={16} />
           </button>
-        </div>
+        </header>
 
-        <div className="min-h-0 space-y-5 overflow-y-auto p-5">
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
-              <h3 className="text-xs font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]">Prompt</h3>
-              <CopyButton text={prompt} label="Copy prompt" />
-            </div>
-            <pre className="max-h-64 overflow-y-auto whitespace-pre-wrap rounded-lg border p-3 font-mono text-xs leading-relaxed bg-[rgb(var(--ec-page-bg))] border-[rgb(var(--ec-page-border))]">
-              {prompt}
-            </pre>
-          </div>
+        <div className="min-h-0 space-y-5 overflow-y-auto px-5 pb-5">
+          {/* The one thing most people need: the prompt */}
+          <section className="space-y-2">
+            <CopyButton text={prompt} label="Copy prompt" large />
+            <p className="text-center text-xs text-[rgb(var(--ec-page-text-muted))]">
+              Paste it into your agent. It works out how to connect.{' '}
+              <button
+                onClick={() => setShowPrompt((shown) => !shown)}
+                aria-expanded={showPrompt}
+                className="inline-flex items-center gap-0.5 font-medium text-[rgb(var(--ec-accent))] hover:underline"
+              >
+                {showPrompt ? 'Hide prompt' : 'Show prompt'}
+                <ChevronDown size={12} className={`transition-transform ${showPrompt ? 'rotate-180' : ''}`} />
+              </button>
+            </p>
+            {showPrompt && (
+              <pre className="max-h-56 overflow-y-auto whitespace-pre-wrap rounded-lg border p-3 font-mono text-[11px] leading-relaxed bg-[rgb(var(--ec-page-bg))] border-[rgb(var(--ec-page-border))]">
+                {prompt}
+              </pre>
+            )}
+          </section>
 
-          <div className="space-y-4 border-t pt-4 border-[rgb(var(--ec-page-border))]">
-            <Detail title="MCP server" value={link.mcpUrl}>
-              For agents that can add an MCP server. Chats that show MCP Apps (ChatGPT, Claude) can open the canvas right in the
-              chat. Agents running in the cloud need this EventCatalog on a public URL.
-            </Detail>
-            <Detail title="WebMCP (this tab)">
-              {webMcp.state === 'on'
-                ? `On: this tab offers ${webMcp.tools} canvas tools to agents in your browser (${webMcp.source === 'native' ? "your browser's WebMCP" : 'WebMCP polyfill, e.g. for the MCP-B extension'}).`
-                : 'Off: this tab is not offering tools to agents in your browser (e.g. through the MCP-B extension).'}{' '}
-              {webMcp.state === 'off' && (
-                <button onClick={onEnableWebMcp} className="font-medium text-[rgb(var(--ec-accent))] hover:underline">
-                  Turn on for this tab
+          {/* Or set it up by hand, for the kind of agent you use */}
+          <section className="space-y-3 border-t pt-4 border-[rgb(var(--ec-page-border))]">
+            <h3 className="text-xs font-semibold">Or connect it yourself</h3>
+            <div role="tablist" className="grid grid-cols-3 gap-1 rounded-lg p-1 bg-[rgb(var(--ec-page-border)/0.5)]">
+              {WAYS.map(({ id, label, hint }) => (
+                <button
+                  key={id}
+                  role="tab"
+                  aria-selected={way === id}
+                  onClick={() => setWay(id)}
+                  className={`rounded-md px-2 py-1.5 text-center ${
+                    way === id ? 'bg-[rgb(var(--ec-card-bg))] shadow-sm' : 'text-[rgb(var(--ec-page-text-muted))]'
+                  }`}
+                >
+                  <span className="block text-xs font-medium">{label}</span>
+                  <span className="block truncate text-[10px] text-[rgb(var(--ec-page-text-muted))]">{hint}</span>
                 </button>
-              )}
-            </Detail>
-            {relayScriptPath && (
-              <Detail title="WebMCP local relay" value={RELAY_COMMAND}>
-                For agents on your computer (Claude Code, Cursor...): add this as an MCP server, and turn the relay on for this
-                tab. They get the tools of this tab while it stays open.{' '}
-                {relayOn ? (
-                  <span className={`font-medium ${STATUS.success.text}`}>The relay is on for this tab.</span>
-                ) : (
-                  <button
-                    onClick={() => {
-                      enableRelay(relayScriptPath);
-                      setRelayOn(true);
-                      // The relay hands this tab's WebMCP tools to desktop agents
-                      onEnableWebMcp();
-                    }}
-                    className="font-medium text-[rgb(var(--ec-accent))] hover:underline"
-                  >
-                    Turn on for this tab
-                  </button>
+              ))}
+            </div>
+
+            {way === 'chat' && (
+              <div className="space-y-2">
+                <p className="text-xs text-[rgb(var(--ec-page-text-muted))]">
+                  Add this MCP server to your chat app. Chats that show MCP Apps open the canvas right in the chat.
+                </p>
+                <CopyField value={link.mcpUrl} />
+              </div>
+            )}
+            {way === 'code' && (
+              <div className="space-y-2">
+                <p className="text-xs text-[rgb(var(--ec-page-text-muted))]">
+                  Add EventCatalog's MCP server, e.g. in Claude Code:
+                </p>
+                <CopyField value={`claude mcp add --transport http eventcatalog ${link.mcpUrl}`} />
+                {relayScriptPath && (
+                  <div className="flex items-center justify-between gap-3 pt-1">
+                    <p className="text-[11px] text-[rgb(var(--ec-page-text-muted))]">
+                      Can't reach this server? Use this tab through the local relay: add <code>{RELAY_COMMAND}</code> as an MCP
+                      server.
+                    </p>
+                    <TabSwitch on={relayOn} onTurnOn={turnOnRelay} label="Turn on relay" />
+                  </div>
                 )}
-              </Detail>
+              </div>
             )}
-          </div>
+            {way === 'browser' && (
+              <div className="flex items-center justify-between gap-3">
+                <p className="text-xs text-[rgb(var(--ec-page-text-muted))]">
+                  {webMcp.state === 'on'
+                    ? `This tab offers ${webMcp.tools} canvas tools to agents in your browser (like the MCP-B extension).`
+                    : 'Let agents in your browser (like the MCP-B extension) use this canvas through WebMCP.'}
+                </p>
+                <TabSwitch on={webMcp.state === 'on'} onTurnOn={onEnableWebMcp} label="Turn on" />
+              </div>
+            )}
+          </section>
         </div>
       </div>
     </div>

package/eventcatalog/src/features/studio/components/ConnectionsChooser.tsx

@@ -0,0 +1,144 @@
+import { useEffect, useState, type ReactElement } from 'react';
+import { X } from 'lucide-react';
+import type { ConnectionGroup, ConnectionGroupId } from '../canvas-actions';
+import type { CatalogResource } from '../catalog-resources';
+import { getNodeLabel } from '../node-types';
+import { CardPreview } from './ContainerChooser';
+
+/**
+ * Asked when a catalog service or message is dropped on the canvas (and connects to things that aren't on it yet):
+ * just it, or it with its connections (a service's messages and data stores, the services that send and receive a
+ * message), picked by group. Styled like the domain and system chooser.
+ */
+
+export type ConnectionsChoice = { as: 'card' } | { as: 'connected'; include: CatalogResource[] };
+
+// It in the middle, what comes in before it and what goes out after it
+const ConnectedPreview = () => (
+  <svg viewBox="0 0 64 36" className="h-9 w-16" aria-hidden>
+    <rect x="1" y="7" width="10" height="8" rx="1.5" fill="currentColor" fillOpacity="0.4" />
+    <rect x="1" y="21" width="10" height="8" rx="1.5" fill="currentColor" fillOpacity="0.4" />
+    <path d="M11 11h8M11 25h8" stroke="currentColor" strokeOpacity="0.5" strokeWidth="1.5" />
+    <rect
+      x="19"
+      y="8"
+      width="26"
+      height="20"
+      rx="4"
+      fill="currentColor"
+      fillOpacity="0.1"
+      stroke="currentColor"
+      strokeOpacity="0.5"
+      strokeWidth="1.5"
+    />
+    <rect x="23" y="13" width="13" height="3" rx="1.5" fill="currentColor" fillOpacity="0.6" />
+    <rect x="23" y="19" width="17" height="2" rx="1" fill="currentColor" fillOpacity="0.35" />
+    <path d="M45 18h8" stroke="currentColor" strokeOpacity="0.5" strokeWidth="1.5" />
+    <rect x="53" y="14" width="10" height="8" rx="1.5" fill="currentColor" fillOpacity="0.4" />
+  </svg>
+);
+
+/** What "with its connections" brings, by what's dropped */
+const CONNECTED_HINTS: Record<string, string> = {
+  services: 'What it sends, receives and stores, around it',
+};
+const MESSAGE_HINT = 'The services that send and receive it, around it';
+
+export default function ConnectionsChooser({
+  resource,
+  groups,
+  position,
+  onChoose,
+  onCancel,
+}: {
+  resource: CatalogResource;
+  /** What it connects to that isn't on the canvas yet */
+  groups: ConnectionGroup[];
+  /** Where to show it (screen coordinates) */
+  position: { x: number; y: number };
+  onChoose: (choice: ConnectionsChoice) => void;
+  onCancel: () => void;
+}) {
+  const noun = getNodeLabel(resource.node.type).toLowerCase();
+  const [included, setIncluded] = useState<Set<ConnectionGroupId>>(() => new Set(groups.map((group) => group.id)));
+  const toggle = (id: ConnectionGroupId) =>
+    setIncluded((current) => {
+      const next = new Set(current);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  const include = groups.flatMap((group) => (included.has(group.id) ? group.resources : []));
+  const options: { as: ConnectionsChoice['as']; label: string; hint: string; Preview: () => ReactElement }[] = [
+    { as: 'card', label: `Just the ${noun}`, hint: 'Connected to what is already on the canvas', Preview: CardPreview },
+    {
+      as: 'connected',
+      label: 'With its connections',
+      hint: CONNECTED_HINTS[resource.collection] ?? MESSAGE_HINT,
+      Preview: ConnectedPreview,
+    },
+  ];
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => event.key === 'Escape' && onCancel();
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onCancel]);
+
+  // Kept on screen, next to where it was dropped
+  const left = Math.min(Math.max(position.x - 160, 12), window.innerWidth - 332);
+  const top = Math.min(Math.max(position.y - 20, 12), window.innerHeight - 300);
+
+  return (
+    <div className="fixed inset-0 z-50" onPointerDown={onCancel}>
+      <div
+        role="dialog"
+        aria-label={`Add ${resource.name}`}
+        onPointerDown={(event) => event.stopPropagation()}
+        className="absolute w-80 rounded-lg border p-1.5 shadow-xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]"
+        style={{ left, top }}
+      >
+        <div className="flex items-start justify-between gap-2 px-2 pb-1.5 pt-1">
+          <div>
+            <p className="text-[10px] font-semibold uppercase tracking-wider text-[rgb(var(--ec-page-text-muted))]">
+              Add this {noun}
+            </p>
+            <p className="truncate text-xs font-semibold">{resource.name}</p>
+          </div>
+          <button
+            onClick={onCancel}
+            aria-label="Cancel"
+            className="rounded p-0.5 text-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-page-border)/0.5)]"
+          >
+            <X size={14} />
+          </button>
+        </div>
+
+        <div className="grid grid-cols-2 gap-1.5 px-0.5 pb-0.5">
+          {options.map(({ as, label, hint, Preview }) => (
+            <button
+              key={as}
+              autoFocus={as === 'connected'}
+              disabled={as === 'connected' && include.length === 0}
+              onClick={() => onChoose(as === 'card' ? { as } : { as, include })}
+              className="flex flex-col items-center gap-1 rounded-md border px-2 pb-1.5 pt-2 text-xs outline-none transition-colors border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text-muted))] hover:border-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent)/0.08)] hover:text-[rgb(var(--ec-accent))] focus-visible:border-[rgb(var(--ec-accent))] focus-visible:text-[rgb(var(--ec-accent))] disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <Preview />
+              <span className="font-semibold">{label}</span>
+              <span className="text-center text-[10px] leading-tight text-[rgb(var(--ec-page-text-muted))]">{hint}</span>
+            </button>
+          ))}
+        </div>
+
+        <div className="mt-1 space-y-0.5 px-2 pb-1">
+          {groups.map((group) => (
+            <label key={group.id} className="flex items-center gap-2 py-0.5 text-[11px] text-[rgb(var(--ec-page-text-muted))]">
+              <input type="checkbox" checked={included.has(group.id)} onChange={() => toggle(group.id)} />
+              {group.label} ({group.resources.length})
+            </label>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/eventcatalog/src/features/studio/components/ContainerChooser.tsx

@@ -10,7 +10,7 @@ import type { CatalogResource } from '../catalog-resources';
 export type ContainerChoice = { as: 'card' } | { as: 'container'; withContents: boolean };
 
 // Small pictures of the two ways a domain or system can be on the canvas
-const CardPreview = () => (
+export const CardPreview = () => (
   <svg viewBox="0 0 64 36" className="h-9 w-16" aria-hidden>
     <rect
       x="18"

package/eventcatalog/src/features/studio/components/DragGhost.tsx

@@ -0,0 +1,115 @@
+import { useCallback, useEffect, useMemo, useRef, useState, type DragEvent } from 'react';
+import { ReactFlow, ReactFlowProvider, useStoreApi, type Node, type XYPosition } from '@xyflow/react';
+import { getNodeSize, isGroupType } from '../node-types';
+import { nodeTypes } from './canvas-nodes';
+
+/**
+ * Dragging something from the left panel onto the canvas shows the node it becomes, under the pointer, at the
+ * canvas's zoom and where it will land (centred on the pointer, as it's dropped). Drawn here rather than as the
+ * browser's drag image, which browsers shrink, fade and put a backing behind.
+ */
+
+/** What's dragged: the node it becomes */
+export type DragPreview = { type: string; data: Record<string, unknown> };
+/** Starts dragging `value` as `dragType`, showing `preview` as what's dragged */
+export type StartDrag = (dragType: string, value: string, preview: DragPreview) => (event: DragEvent) => void;
+
+// Hides the browser's own drag image (a transparent pixel)
+const NO_DRAG_IMAGE =
+  typeof Image === 'undefined'
+    ? undefined
+    : Object.assign(new Image(), { src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' });
+
+// Room around the node for the badge on its top edge
+const MARGIN = 16;
+const PRO_OPTIONS = { hideAttribution: true };
+
+type Ghost = { preview: DragPreview; zoom: number; at: XYPosition };
+
+/** The ghost of what's being dragged, and how to start dragging something with one */
+export function useDragGhost() {
+  const store = useStoreApi();
+  const [ghost, setGhost] = useState<Ghost | null>(null);
+
+  const startDrag = useCallback<StartDrag>(
+    (dragType, value, preview) => (event) => {
+      event.dataTransfer.setData(dragType, value);
+      event.dataTransfer.effectAllowed = 'move';
+      if (NO_DRAG_IMAGE) event.dataTransfer.setDragImage(NO_DRAG_IMAGE, 0, 0);
+      setGhost({ preview, zoom: store.getState().transform[2], at: { x: event.clientX, y: event.clientY } });
+    },
+    [store]
+  );
+
+  const element = ghost && <DragGhost ghost={ghost} onEnd={() => setGhost(null)} />;
+  return { startDrag, ghost: element };
+}
+
+function DragGhost({ ghost, onEnd }: { ghost: Ghost; onEnd: () => void }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const { preview, zoom } = ghost;
+  const container = isGroupType(preview.type);
+  // The size it's added at (containers are sized; cards are drawn at their own size inside this)
+  const size = getNodeSize(preview.type);
+  // The node is placed with its middle where it's dropped, at the size it's added at
+  const offset = { x: (size.width / 2) * zoom + MARGIN, y: (size.height / 2) * zoom + MARGIN };
+
+  // Follows the pointer (as the browser reports it while dragging) without re-rendering, and goes when it's dropped
+  useEffect(() => {
+    const move = (x: number, y: number) => {
+      if (ref.current) ref.current.style.transform = `translate(${x - offset.x}px, ${y - offset.y}px)`;
+    };
+    move(ghost.at.x, ghost.at.y);
+    const onDragOver = (event: globalThis.DragEvent) => {
+      if (event.clientX || event.clientY) move(event.clientX, event.clientY);
+    };
+    document.addEventListener('dragover', onDragOver);
+    document.addEventListener('drop', onEnd);
+    document.addEventListener('dragend', onEnd);
+    return () => {
+      document.removeEventListener('dragover', onDragOver);
+      document.removeEventListener('drop', onEnd);
+      document.removeEventListener('dragend', onEnd);
+    };
+  }, [ghost]);
+
+  const nodes = useMemo<Node[]>(
+    () => [
+      {
+        id: 'drag-ghost',
+        type: preview.type,
+        position: { x: 0, y: 0 },
+        data: preview.data,
+        ...(container && size),
+      },
+    ],
+    [preview, container, size]
+  );
+  const viewport = useMemo(() => ({ x: MARGIN, y: MARGIN, zoom }), [zoom]);
+
+  return (
+    <div
+      ref={ref}
+      aria-hidden
+      // Sized here: the visualiser's styles make its class fill the window
+      className="studio-drag-preview eventcatalog-visualizer pointer-events-none fixed left-0 top-0 z-[100]"
+      style={{ width: size.width * zoom + MARGIN * 2, height: size.height * zoom + MARGIN * 2 }}
+    >
+      <ReactFlowProvider>
+        <ReactFlow
+          nodes={nodes}
+          nodeTypes={nodeTypes}
+          defaultViewport={viewport}
+          proOptions={PRO_OPTIONS}
+          nodesDraggable={false}
+          nodesConnectable={false}
+          elementsSelectable={false}
+          panOnDrag={false}
+          zoomOnScroll={false}
+          zoomOnPinch={false}
+          preventScrolling={false}
+        />
+      </ReactFlowProvider>
+    </div>
+  );
+}

package/eventcatalog/src/features/studio/components/JoinForm.tsx

@@ -1,29 +1,5 @@
 import { useState } from 'react';
 
-const COLORS = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899'];
-const NAME_KEY = 'eventcatalog-studio-name';
-
-export const getStoredName = () => {
-  try {
-    return localStorage.getItem(NAME_KEY);
-  } catch {
-    return null;
-  }
-};
-
-export const storeName = (name: string) => {
-  try {
-    localStorage.setItem(NAME_KEY, name);
-  } catch {}
-};
-
-// 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];
-};
-
 export default function JoinForm({ onJoin }: { onJoin: (name: string) => void }) {
   const [draft, setDraft] = useState('');