@eventcatalog/core 5.0.0-beta.0 → 5.0.0-beta.10

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

@@ -0,0 +1,281 @@
+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';
+
+type CanvasLink = { canvasId: string; title?: string; canvasUrl: string; mcpUrl: string };
+
+export const RELAY_COMMAND = 'npx -y @mcp-b/webmcp-local-relay@5.1.0';
+const RELAY_KEY = 'eventcatalog-webmcp-relay';
+const WEBMCP_KEY = 'eventcatalog-webmcp';
+
+const isOn = (key: string) => {
+  try {
+    return localStorage.getItem(key) === 'true';
+  } catch {
+    return false;
+  }
+};
+const turnOn = (key: string) => {
+  try {
+    localStorage.setItem(key, 'true');
+  } catch {}
+};
+
+/**
+ * WebMCP through the polyfill (for browsers without WebMCP of their own) is opt in, remembered in this browser:
+ * the polyfill watches every change to the page, which on a canvas is every drag and pan. The relay needs it.
+ */
+export const isWebMcpEnabled = () => isOn(WEBMCP_KEY) || isOn(RELAY_KEY);
+export const enableWebMcp = () => turnOn(WEBMCP_KEY);
+
+/**
+ * The WebMCP local relay hands this tab's tools to desktop agents. Opt in: its script keeps looking for a
+ * relay on localhost, so it only loads once someone turns it on (remembered in this browser).
+ */
+export const isRelayEnabled = () => isOn(RELAY_KEY);
+
+export const loadRelay = (scriptPath: string) => {
+  if (document.querySelector('script[data-webmcp-relay-embed]')) return;
+  const script = document.createElement('script');
+  script.src = scriptPath;
+  script.dataset.webmcpRelayEmbed = '';
+  script.dataset.relayPort = '9333';
+  document.body.appendChild(script);
+};
+
+const enableRelay = (scriptPath: string) => {
+  turnOn(RELAY_KEY);
+  loadRelay(scriptPath);
+};
+
+/**
+ * The prompt people give their agent to join this canvas. It works out how to connect from what the agent
+ * can do: the EventCatalog MCP server (and openCanvas in chats that show MCP Apps), WebMCP in the open tab,
+ * or the WebMCP local relay for desktop agents.
+ */
+export const buildAgentPrompt = ({ canvasId, title, canvasUrl, mcpUrl }: CanvasLink) =>
+  `Join me on an EventCatalog canvas so we can design this together, live.
+
+Canvas: ${title ? `"${title}"` : 'Untitled'}
+Canvas id: ${canvasId}
+Link: ${canvasUrl}
+
+Connect with the first of these you can use:
+
+1. EventCatalog MCP server (Streamable HTTP): ${mcpUrl}
+   - If you already have it (tools like getCanvas, addToCanvas), use them with canvasId "${canvasId}".
+   - If not and you can add MCP servers, add it. For example, in Claude Code: claude mcp add --transport http eventcatalog ${mcpUrl}
+   - If you can show MCP Apps in this chat (e.g. ChatGPT, Claude), call openCanvas with canvasId "${canvasId}" so I can work on the canvas with you right here.
+2. WebMCP: if you can use tools from my browser tab, I have the canvas open there and it offers tools like get_canvas, add_to_canvas and add_comment.
+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 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', large = false }: { text: string; label?: string; large?: boolean }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <button
+      onClick={async () => {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      }}
+      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={large ? 16 : 14} /> : <Copy size={large ? 16 : 14} />}
+      {copied ? 'Copied' : label}
+    </button>
+  );
+}
+
+/** Something to copy (an address or a command), with its copy button */
+function CopyField({ value }: { value: string }) {
+  return (
+    <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,
+  relayScriptPath,
+  onEnableWebMcp,
+  onClose,
+}: {
+  link: CanvasLink;
+  webMcp: WebMcpStatus;
+  /** Turn WebMCP on for this tab (through the polyfill, when the browser has none) */
+  onEnableWebMcp: () => void;
+  /** Where the relay's script is served (only on EventCatalog's own canvas page) */
+  relayScriptPath?: string;
+  onClose: () => void;
+}) {
+  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();
+    window.addEventListener('keydown', onKeyDown);
+    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-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))]"
+      >
+        <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} />
+            </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-md p-1 text-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-page-border)/0.5)]"
+          >
+            <X size={16} />
+          </button>
+        </header>
+
+        <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>
+
+          {/* 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>
+              ))}
+            </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>
+                )}
+              </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

@@ -0,0 +1,145 @@
+import { useEffect, useState, type ReactElement } from 'react';
+import { X } from 'lucide-react';
+import type { CatalogResource } from '../catalog-resources';
+
+/**
+ * Asked when a domain or system is dropped on the canvas: is it a card (connected to what it contains), or a
+ * container that what it contains sits inside? Styled like the visualiser's group-by picker (boxes or lanes).
+ */
+
+export type ContainerChoice = { as: 'card' } | { as: 'container'; withContents: boolean };
+
+// Small pictures of the two ways a domain or system can be on the canvas
+export const CardPreview = () => (
+  <svg viewBox="0 0 64 36" className="h-9 w-16" aria-hidden>
+    <rect
+      x="18"
+      y="8"
+      width="28"
+      height="20"
+      rx="4"
+      fill="currentColor"
+      fillOpacity="0.1"
+      stroke="currentColor"
+      strokeOpacity="0.5"
+      strokeWidth="1.5"
+    />
+    <rect x="23" y="13" width="14" height="3" rx="1.5" fill="currentColor" fillOpacity="0.6" />
+    <rect x="23" y="19" width="18" height="2" rx="1" fill="currentColor" fillOpacity="0.35" />
+    <path d="M46 18h12" stroke="currentColor" strokeOpacity="0.5" strokeWidth="1.5" strokeDasharray="2 2" />
+    <rect x="57" y="14" width="6" height="8" rx="1.5" fill="currentColor" fillOpacity="0.4" />
+  </svg>
+);
+
+const ContainerPreview = () => (
+  <svg viewBox="0 0 64 36" className="h-9 w-16" aria-hidden>
+    <rect
+      x="4"
+      y="2"
+      width="56"
+      height="32"
+      rx="4"
+      fill="currentColor"
+      fillOpacity="0.08"
+      stroke="currentColor"
+      strokeOpacity="0.5"
+      strokeWidth="1.5"
+    />
+    <path d="M4 10h56" stroke="currentColor" strokeOpacity="0.35" strokeWidth="1" />
+    <rect x="8" y="4.5" width="14" height="3" rx="1.5" fill="currentColor" fillOpacity="0.6" />
+    <rect x="10" y="15" width="18" height="12" rx="2" fill="currentColor" fillOpacity="0.5" />
+    <rect x="36" y="15" width="18" height="12" rx="2" fill="currentColor" fillOpacity="0.5" />
+  </svg>
+);
+
+const OPTIONS: { as: ContainerChoice['as']; label: string; hint: string; Preview: () => ReactElement }[] = [
+  { as: 'card', label: 'Card', hint: 'Connected to what it contains', Preview: CardPreview },
+  { as: 'container', label: 'Container', hint: 'What it contains sits inside it', Preview: ContainerPreview },
+];
+
+const plural = (count: number, noun: string) => `${count} ${noun}${count === 1 ? '' : 's'}`;
+
+export default function ContainerChooser({
+  resource,
+  contents,
+  position,
+  onChoose,
+  onCancel,
+}: {
+  resource: CatalogResource;
+  /** What it contains in the catalog that isn't on the canvas yet */
+  contents: { systems: number; services: number };
+  /** Where to show it (screen coordinates) */
+  position: { x: number; y: number };
+  onChoose: (choice: ContainerChoice) => void;
+  onCancel: () => void;
+}) {
+  const [withContents, setWithContents] = useState(true);
+  const noun = resource.collection === 'domains' ? 'domain' : 'system';
+  const contentsLabel = [
+    contents.systems > 0 && plural(contents.systems, 'system'),
+    contents.services > 0 && plural(contents.services, 'service'),
+  ]
+    .filter(Boolean)
+    .join(' and ');
+
+  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 - 260);
+
+  return (
+    <div className="fixed inset-0 z-50" onPointerDown={onCancel}>
+      <div
+        role="dialog"
+        aria-label={`Add ${resource.name} as`}
+        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} as
+            </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 === 'container'}
+              onClick={() => onChoose(as === 'card' ? { as } : { as, withContents: withContents && !!contentsLabel })}
+              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))]"
+            >
+              <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>
+
+        {contentsLabel && (
+          <label className="mt-1 flex items-center gap-2 rounded-md px-2 py-1.5 text-[11px] text-[rgb(var(--ec-page-text-muted))]">
+            <input type="checkbox" checked={withContents} onChange={(event) => setWithContents(event.target.checked)} />
+            As a container, bring its {contentsLabel} inside, with their messages and data stores
+          </label>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react';
+import { usePeople, type PresenceStore } from '../hooks/presence-store';
+import { STATUS } from './status';
+
+/** Asks before deleting a canvas: it's deleted for everyone, for good */
+export default function DeleteCanvasDialog({
+  title,
+  presence,
+  clientId,
+  onDelete,
+  onClose,
+}: {
+  title?: string;
+  /** Who has it open (to say it closes for them) */
+  presence: PresenceStore | null;
+  clientId: number | null;
+  /** Deletes it (rejects with what went wrong) */
+  onDelete: () => Promise<void>;
+  onClose: () => void;
+}) {
+  const othersHere = usePeople(presence).filter((peer) => peer.clientId !== clientId).length;
+  const [deleting, setDeleting] = useState(false);
+  const [error, setError] = useState<string>();
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => event.key === 'Escape' && !deleting && onClose();
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onClose, deleting]);
+
+  const confirm = async () => {
+    setDeleting(true);
+    setError(undefined);
+    try {
+      await onDelete();
+    } catch (failure) {
+      setError((failure as Error).message);
+      setDeleting(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" onClick={() => !deleting && onClose()}>
+      <div
+        role="alertdialog"
+        aria-labelledby="delete-canvas-title"
+        onClick={(event) => event.stopPropagation()}
+        className="w-full max-w-md 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="space-y-2 px-5 py-4">
+          <h2 id="delete-canvas-title" className="text-base font-semibold">
+            Delete {title ? `"${title}"` : 'this canvas'}?
+          </h2>
+          <p className="text-sm text-[rgb(var(--ec-page-text-muted))]">
+            It's deleted for everyone, with its comments, and can't be brought back.
+            {othersHere > 0 &&
+              ` ${othersHere === 1 ? 'Someone else has' : `${othersHere} others have`} it open: it closes for them too.`}
+          </p>
+          {error && <p className={`text-sm ${STATUS.danger.text}`}>{error}</p>}
+        </div>
+        <div className="flex justify-end gap-2 border-t px-5 py-4 border-[rgb(var(--ec-page-border))]">
+          <button
+            onClick={onClose}
+            disabled={deleting}
+            className="rounded-lg border px-4 py-2 text-sm font-medium border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-page-border)/0.4)] disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            autoFocus
+            onClick={confirm}
+            disabled={deleting}
+            className={`rounded-lg px-4 py-2 text-sm font-medium disabled:opacity-60 ${STATUS.danger.button}`}
+          >
+            {deleting ? 'Deleting…' : 'Delete canvas'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}