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

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

@@ -66,16 +66,21 @@ export const canBeContainer = (resource: CatalogResource) =>
 export const containerTypeFor = (resource: CatalogResource) =>
   resource.collection === 'domains' ? GROUP_TYPES.domain : GROUP_TYPES.system;
 
-/** A container's data: the domain or system it stands for, and where it is in the catalog */
-export const catalogGroupData = (resource: CatalogResource) => ({
-  [resource.collection === 'domains' ? 'domain' : 'system']: {
-    id: resource.id,
-    name: resource.name,
-    version: resource.version,
-    summary: resource.summary,
-  },
-  catalog: { key: resource.key, url: resource.url, version: resource.version } satisfies CatalogLink,
-});
+/** A container's data: the domain or system it stands for (an external system marked as one), and where it is in the catalog */
+export const catalogGroupData = (resource: CatalogResource) => {
+  const key = resource.collection === 'domains' ? 'domain' : 'system';
+  const { scope } = (resource.node.data[key] ?? {}) as { scope?: string };
+  return {
+    [key]: {
+      id: resource.id,
+      name: resource.name,
+      version: resource.version,
+      summary: resource.summary,
+      ...(scope && { scope }),
+    },
+    catalog: { key: resource.key, url: resource.url, version: resource.version } satisfies CatalogLink,
+  };
+};
 
 /** What a domain or system contains in the catalog: a domain's systems and services, a system's services */
 export const getContents = (

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

@@ -1,51 +1,17 @@
-import { memo, type ReactNode } from 'react';
-import { useReactFlow, useStore } from '@xyflow/react';
+import { memo } from 'react';
+import { useReactFlow } from '@xyflow/react';
 import { Maximize, MessageCircle, Redo, SendToBack, StickyNote, Undo, ZoomIn, ZoomOut } from 'lucide-react';
+import { DIAGRAM_FIT_VIEW_OPTIONS, Toolbar, ToolbarButton, ToolbarDivider, ZoomLevel } from '@eventcatalog/visualiser';
 import { LEVELS, type Level } from '../levels';
 
-// The canvas's bottom bar: layout, view, levels of detail, undo, comments and notes
+// The canvas's bottom bar: layout, view, levels of detail, undo, comments and notes. Built from the visualiser's
+// toolbar, so it looks and works like a diagram's bar (in the same places: the view on the left, then the levels).
 
-export const FIT_VIEW_OPTIONS = { padding: { top: '80px', right: '60px', bottom: '100px', left: '60px' } } as const;
+// Fitted like the visualiser fits a diagram
+export const FIT_VIEW_OPTIONS = DIAGRAM_FIT_VIEW_OPTIONS;
 
-function ControlButton({
-  label,
-  onClick,
-  disabled,
-  active,
-  children,
-}: {
-  label: string;
-  onClick: () => void;
-  disabled?: boolean;
-  active?: boolean;
-  children: ReactNode;
-}) {
-  return (
-    <button
-      title={label}
-      aria-label={label}
-      onClick={onClick}
-      disabled={disabled}
-      className={`rounded-full p-2 transition-colors ${
-        disabled
-          ? 'cursor-not-allowed opacity-40'
-          : active
-            ? 'bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))]'
-            : 'text-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-page-border)/0.5)] hover:text-[rgb(var(--ec-icon-hover))]'
-      }`}
-    >
-      {children}
-    </button>
-  );
-}
-
-/** Isolated, so the bar only re-renders when the zoom changes (not on every pan) */
-function ZoomLevel() {
-  const zoom = useStore((state) => Math.round(state.transform[2] * 100));
-  return <div className="w-12 text-center text-xs font-medium tabular-nums text-[rgb(var(--ec-page-text-muted))]">{zoom}%</div>;
-}
-
-const Divider = () => <div className="mx-1 h-6 w-px bg-[rgb(var(--ec-page-border))]" />;
+// Why comments can't be added on L1 or L2 (they're pinned to the canvas, L3)
+const EDIT_IN_L3 = 'Only on L3, where comments are pinned';
 
 function LevelSwitch({
   level,
@@ -58,29 +24,18 @@ function LevelSwitch({
 }) {
   return (
     <div role="group" aria-label="Level of detail" className="flex items-center gap-0.5">
-      {LEVELS.map(({ level: value, description }) => {
-        const reason = unavailable[value];
-        const active = value === level;
-        return (
-          <button
-            key={value}
-            title={`Level ${value}: ${description}${reason ? `. ${reason}` : ''}`}
-            // Stays focusable when unavailable, so its title can say why
-            aria-disabled={!!reason}
-            aria-pressed={active}
-            onClick={() => !reason && onChange(value)}
-            className={`h-8 min-w-8 rounded-full px-2 text-xs font-semibold tabular-nums transition-colors ${
-              reason
-                ? 'cursor-not-allowed opacity-40'
-                : active
-                  ? 'bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))]'
-                  : 'text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-page-border)/0.5)]'
-            }`}
-          >
-            L{value}
-          </button>
-        );
-      })}
+      {LEVELS.map(({ level: value, description }) => (
+        <ToolbarButton
+          key={value}
+          label={`Level ${value}: ${description}`}
+          hint={unavailable[value]}
+          active={value === level}
+          disabled={!!unavailable[value]}
+          onClick={() => onChange(value)}
+        >
+          <span className="text-xs font-semibold">L{value}</span>
+        </ToolbarButton>
+      ))}
     </div>
   );
 }
@@ -102,7 +57,7 @@ export default memo(function CanvasControls({
   level: Level;
   onLevelChange: (level: Level) => void;
   unavailableLevels: Partial<Record<Level, string | undefined>>;
-  /** L1 and L2 are read only views of the canvas */
+  /** L3, the canvas itself (comments are there; L1 and L2 are arranged on their own) */
   editable: boolean;
   onReorder: () => void;
   canUndo: boolean;
@@ -116,39 +71,49 @@ export default memo(function CanvasControls({
   const { fitView, zoomIn, zoomOut } = useReactFlow();
 
   return (
-    <div className="absolute bottom-4 left-1/2 z-10 -translate-x-1/2">
-      <div className="flex items-center gap-1 rounded-full border px-2 py-1 shadow-lg bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))]">
-        <ControlButton label="Reorder diagram (the visualiser's layout)" onClick={onReorder} disabled={!editable}>
+    // Where the visualiser's bar is (React Flow's bottom-center panel)
+    <div className="absolute bottom-[15px] left-1/2 z-10 -translate-x-1/2">
+      <Toolbar>
+        <ToolbarButton
+          label={editable ? "Reorder diagram (the visualiser's layout)" : `Reorder L${level} (the visualiser's layout)`}
+          onClick={onReorder}
+        >
           <SendToBack className="h-4 w-4" />
-        </ControlButton>
-        <ControlButton label="Fit view" onClick={() => void fitView({ ...FIT_VIEW_OPTIONS, duration: 500 })}>
+        </ToolbarButton>
+        <ToolbarButton label="Fit view" onClick={() => void fitView({ ...FIT_VIEW_OPTIONS, duration: 500 })}>
           <Maximize className="h-4 w-4" />
-        </ControlButton>
-        <ControlButton label="Zoom out" onClick={() => void zoomOut({ duration: 200 })}>
+        </ToolbarButton>
+        <ToolbarButton label="Zoom out" onClick={() => void zoomOut({ duration: 200 })}>
           <ZoomOut className="h-4 w-4" />
-        </ControlButton>
+        </ToolbarButton>
         <ZoomLevel />
-        <ControlButton label="Zoom in" onClick={() => void zoomIn({ duration: 200 })}>
+        <ToolbarButton label="Zoom in" onClick={() => void zoomIn({ duration: 200 })}>
           <ZoomIn className="h-4 w-4" />
-        </ControlButton>
-        <Divider />
+        </ToolbarButton>
+        <ToolbarDivider />
         <LevelSwitch level={level} onChange={onLevelChange} unavailable={unavailableLevels} />
-        <Divider />
-        <ControlButton label="Undo (⌘Z)" onClick={onUndo} disabled={!canUndo}>
+        <ToolbarDivider />
+        <ToolbarButton label="Undo (⌘Z)" hint={canUndo ? undefined : 'Nothing to undo'} disabled={!canUndo} onClick={onUndo}>
           <Undo className="h-4 w-4" />
-        </ControlButton>
-        <ControlButton label="Redo (⇧⌘Z)" onClick={onRedo} disabled={!canRedo}>
+        </ToolbarButton>
+        <ToolbarButton label="Redo (⇧⌘Z)" hint={canRedo ? undefined : 'Nothing to redo'} disabled={!canRedo} onClick={onRedo}>
           <Redo className="h-4 w-4" />
-        </ControlButton>
-        <Divider />
-        <ControlButton label="Comment (C)" onClick={onToggleCommentMode} active={commentMode} disabled={!editable}>
+        </ToolbarButton>
+        <ToolbarDivider />
+        <ToolbarButton
+          label="Comment (C)"
+          hint={editable ? undefined : EDIT_IN_L3}
+          active={commentMode}
+          disabled={!editable}
+          onClick={onToggleCommentMode}
+        >
           <MessageCircle className="h-4 w-4" />
-        </ControlButton>
+        </ToolbarButton>
         {/* Notes can be added on every level, and are shown on the level they're added on */}
-        <ControlButton label={editable ? 'Add sticky note' : `Add sticky note to L${level}`} onClick={onAddNote}>
+        <ToolbarButton label={editable ? 'Add sticky note' : `Add sticky note to L${level}`} onClick={onAddNote}>
           <StickyNote className="h-4 w-4 text-yellow-500" />
-        </ControlButton>
-      </div>
+        </ToolbarButton>
+      </Toolbar>
     </div>
   );
 });

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

@@ -1,5 +1,13 @@
 import { memo, useEffect, useRef, useState, type ReactNode } from 'react';
-import { Bot, ChevronDown, Link2, Pencil, Plus, Trash2, UserPlus } from 'lucide-react';
+import { Bot, Link2, MoreVertical, Pencil, Plus, Trash2, UserPlus } from 'lucide-react';
+import {
+  DIAGRAM_MENU,
+  DIAGRAM_MENU_BUTTON_ICON,
+  DIAGRAM_MENU_ITEM,
+  DIAGRAM_MENU_ITEM_ICON,
+  DIAGRAM_MENU_SEPARATOR,
+  DIAGRAM_MENU_TITLE,
+} from '@eventcatalog/visualiser';
 import { usePeople, type Peer, type PresenceStore } from '../hooks/presence-store';
 import type { WebMcpStatus } from '../hooks/use-canvas-webmcp';
 import type { Status, Transport } from '../hooks/use-studio-flow';
@@ -9,17 +17,17 @@ import { CONNECTION_DOT, STATUS } from './status';
 import Picture from './Picture';
 
 /**
- * The canvas's header, like Figma or Miro: two small floating bars. On the left the canvas (its title, and a
- * menu), on the right who's here, connecting an agent and sharing.
+ * The canvas's header: two small bars over the canvas. On the left the canvas (its title, and a menu), on the right
+ * who's here, connecting an agent and sharing. They look like the visualiser's menu at the top left of a diagram
+ * (its styles, `DIAGRAM_MENU_*`), so a diagram opened in Studio feels the same.
  */
 
 const barClass =
-  'pointer-events-auto flex h-10 items-center rounded-xl border shadow-md bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))]';
+  'pointer-events-auto flex h-[42px] items-center rounded-md border bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))]';
 // The header lets the pointer through to the canvas around its bars, so its menus take it back
-const menuClass =
-  'pointer-events-auto absolute top-full z-50 mt-2 min-w-52 rounded-xl border p-1 shadow-xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]';
-const menuItemLayout = 'flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-xs';
-const menuItemClass = `${menuItemLayout} hover:bg-[rgb(var(--ec-page-border)/0.5)]`;
+const popoverClass = 'pointer-events-auto absolute top-full mt-2';
+const menuClass = `${popoverClass} ${DIAGRAM_MENU}`;
+const menuItemClass = `${DIAGRAM_MENU_ITEM} w-full text-left`;
 const MAX_AVATARS = 4;
 
 /** Closes a popover on outside clicks and Escape */
@@ -87,7 +95,7 @@ function CanvasMenu({
 
   return (
     <div ref={menu.ref} className="relative">
-      <div className={`${barClass} gap-1 pl-3 pr-1`}>
+      <div className={`${barClass} gap-1.5 pl-4 pr-1.5`}>
         <span title={statusLabel} className={`h-2 w-2 shrink-0 rounded-full ${statusColor}`} />
         <input
           ref={titleInput}
@@ -101,15 +109,15 @@ function CanvasMenu({
           }}
           onKeyDown={(e) => e.key === 'Enter' && e.currentTarget.blur()}
           size={Math.max(12, (draft ?? title ?? 'Untitled canvas').length)}
-          className="max-w-64 truncate rounded-md bg-transparent px-1.5 py-1 text-sm font-semibold placeholder:font-semibold placeholder:text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-page-border)/0.4)] focus:bg-[rgb(var(--ec-input-bg))] focus:outline-none"
+          className={`${DIAGRAM_MENU_TITLE} max-w-64 truncate rounded-md bg-transparent px-1.5 py-1 placeholder:text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-page-border)/0.4)] focus:bg-[rgb(var(--ec-input-bg))] focus:outline-none`}
         />
         {children}
         <button
           aria-label="Canvas menu"
           onClick={() => menu.setOpen((open) => !open)}
-          className="rounded-md p-1.5 text-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-page-border)/0.5)]"
+          className="group rounded-md p-1 hover:bg-[rgb(var(--ec-accent-subtle))]"
         >
-          <ChevronDown size={14} />
+          <MoreVertical className={DIAGRAM_MENU_BUTTON_ICON} />
         </button>
       </div>
       {menu.open && (
@@ -122,7 +130,7 @@ function CanvasMenu({
               titleInput.current?.select();
             }}
           >
-            <Pencil size={14} /> Rename canvas
+            <Pencil className={DIAGRAM_MENU_ITEM_ICON} /> Rename canvas
           </button>
           <button
             className={menuItemClass}
@@ -131,29 +139,30 @@ function CanvasMenu({
               menu.setOpen(false);
             }}
           >
-            <Link2 size={14} /> Copy link
+            <Link2 className={DIAGRAM_MENU_ITEM_ICON} /> Copy link
           </button>
           {newCanvasUrl && (
             <a className={menuItemClass} href={newCanvasUrl}>
-              <Plus size={14} /> New canvas
+              <Plus className={DIAGRAM_MENU_ITEM_ICON} /> New canvas
             </a>
           )}
           {onDelete && (
             <>
-              <div className="my-1 h-px bg-[rgb(var(--ec-page-border))]" />
+              <div className={DIAGRAM_MENU_SEPARATOR} />
               <button
-                className={`${menuItemLayout} ${STATUS.danger.text} ${STATUS.danger.hover}`}
+                // Laid out like the other items, in the theme's danger colour
+                className={`flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-left text-xs transition-colors ${STATUS.danger.text} ${STATUS.danger.hover}`}
                 onClick={() => {
                   menu.setOpen(false);
                   onDelete();
                 }}
               >
-                <Trash2 size={14} /> Delete canvas
+                <Trash2 className="h-3.5 w-3.5 shrink-0" /> Delete canvas
               </button>
             </>
           )}
-          <div className="my-1 h-px bg-[rgb(var(--ec-page-border))]" />
-          <p className="flex items-center gap-2 px-2.5 py-1.5 text-[11px] text-[rgb(var(--ec-page-text-muted))]">
+          <div className={DIAGRAM_MENU_SEPARATOR} />
+          <p className="flex items-center gap-2 px-3 py-1.5 text-[11px] text-[rgb(var(--ec-page-text-muted))]">
             <span className={`h-1.5 w-1.5 rounded-full ${statusColor}`} />
             {statusLabel}
           </p>
@@ -188,7 +197,9 @@ function YouAvatar({ peer, onRename }: { peer: Peer; onRename?: (name: string) =
         <Avatar peer={peer} />
       </button>
       {popover.open && (
-        <div className={`${menuClass} right-0 w-60 space-y-2 p-3`}>
+        <div
+          className={`${popoverClass} right-0 z-50 w-60 space-y-2 rounded-lg border p-3 shadow-xl bg-[rgb(var(--ec-page-bg))] border-[rgb(var(--ec-page-border))]`}
+        >
           <label className="block space-y-1.5 text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))]">
             Your name on this canvas
             <input
@@ -319,9 +330,11 @@ export default memo(function CanvasHeader({
 }) {
   const peers = usePeople(presence);
   const agentsHere = peers.some((peer) => peer.agent);
+  // Nobody else here, and signed in (so not shown as "you" to rename): no list of people
+  const showPeople = !!onRename || peers.some((peer) => peer.clientId !== clientId);
 
   return (
-    <div className="pointer-events-none absolute left-3 right-3 top-3 z-10 flex items-start justify-between gap-3">
+    <div className="pointer-events-none absolute left-4 right-4 top-4 z-10 flex items-start justify-between gap-3">
       <CanvasMenu
         title={title}
         status={status}
@@ -335,10 +348,14 @@ export default memo(function CanvasHeader({
       </CanvasMenu>
 
       <div className={`${barClass} gap-2 px-1.5`}>
-        <div className="pl-1">
-          <People peers={peers} clientId={clientId} onJumpTo={onJumpTo} onRename={onRename} />
-        </div>
-        <div className="h-5 w-px bg-[rgb(var(--ec-page-border))]" />
+        {showPeople && (
+          <>
+            <div className="pl-1">
+              <People peers={peers} clientId={clientId} onJumpTo={onJumpTo} onRename={onRename} />
+            </div>
+            <div className="h-5 w-px bg-[rgb(var(--ec-page-border))]" />
+          </>
+        )}
         <button
           onClick={onConnectAgent}
           title={

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

@@ -1,5 +1,6 @@
 import { memo, useEffect, useRef, useState } from 'react';
 import { Check, ChevronDown } from 'lucide-react';
+import { DIAGRAM_MENU, DIAGRAM_MENU_ITEM, DIAGRAM_MENU_SEPARATOR } from '@eventcatalog/visualiser';
 import { CANVAS_STATUSES, type CanvasStatus, type StatusChange } from '../canvas-doc';
 import { timeAgo } from './Comments';
 import { CANVAS_STATUS_LOOK } from './status';
@@ -58,18 +59,14 @@ export default memo(function CanvasStatusMenu({
         <ChevronDown size={12} />
       </button>
       {open && (
-        <div className="absolute left-0 top-full z-50 mt-2 w-72 rounded-xl border p-1 shadow-xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]">
-          <p className="px-2.5 pb-1 pt-1.5 text-[11px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]">
+        <div className={`absolute left-0 top-full mt-2 w-72 ${DIAGRAM_MENU}`}>
+          <p className="px-3 pb-1 pt-1.5 text-[11px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]">
             Status
           </p>
           {CANVAS_STATUSES.map((value) => {
             const option = CANVAS_STATUS_LOOK[value];
             return (
-              <button
-                key={value}
-                onClick={() => choose(value)}
-                className="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left hover:bg-[rgb(var(--ec-page-border)/0.5)]"
-              >
+              <button key={value} onClick={() => choose(value)} className={`${DIAGRAM_MENU_ITEM} w-full text-left`}>
                 <span className={`h-2 w-2 shrink-0 rounded-full ${option.dot}`} />
                 <span className="min-w-0 flex-1">
                   <span className="block text-xs font-medium">{option.label}</span>
@@ -79,7 +76,7 @@ export default memo(function CanvasStatusMenu({
               </button>
             );
           })}
-          <div className="px-2.5 py-2">
+          <div className="px-3 py-2">
             <input
               value={note}
               onChange={(event) => setNote(event.target.value)}
@@ -90,11 +87,11 @@ export default memo(function CanvasStatusMenu({
           </div>
           {recent.length > 0 && (
             <>
-              <div className="my-1 h-px bg-[rgb(var(--ec-page-border))]" />
-              <p className="px-2.5 pb-1 pt-1.5 text-[11px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]">
+              <div className={DIAGRAM_MENU_SEPARATOR} />
+              <p className="px-3 pb-1 pt-1.5 text-[11px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]">
                 History
               </p>
-              <ul className="max-h-48 space-y-1.5 overflow-y-auto px-2.5 pb-2">
+              <ul className="max-h-48 space-y-1.5 overflow-y-auto px-3 pb-2">
                 {recent.map((change) => (
                   <li key={`${change.at}-${change.status}`} className="text-[11px]">
                     <span className="flex items-center gap-1.5">

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

@@ -10,10 +10,11 @@ import {
   type ReactNode,
 } from 'react';
 import { createPortal } from 'react-dom';
-import { useInternalNode, useReactFlow, useStore, ViewportPortal, type Node, type XYPosition } from '@xyflow/react';
+import { useInternalNode, useReactFlow, ViewportPortal, type Node, type XYPosition } from '@xyflow/react';
 import { Bot, Check, Maximize2, ClipboardPaste, Copy, CopyPlus, MessageCircle, Pencil, RotateCcw, Trash2, X } from 'lucide-react';
 import { getAbsolutePosition } from '../grouping';
 import type { Author, CommentAnchor, Thread } from '../hooks/use-comments';
+import { COUNTER_SCALE, useCounterScale } from '../hooks/use-counter-scale';
 import { isWrittenOnCanvas } from '../node-types';
 import { STATUS } from './status';
 import Picture from './Picture';
@@ -458,13 +459,19 @@ function ThreadDialog({
   );
 }
 
-/** Where a pin goes on the canvas, following only the node it's on (if it's on one), counter-scaled */
-function PinAt({ anchor, zoom, zIndex, children }: { anchor: CommentAnchor; zoom: number; zIndex: number; children: ReactNode }) {
+/**
+ * Where a pin goes on the canvas, following only the node it's on (if it's on one), counter-scaled (by the layer's
+ * COUNTER_SCALE, so zooming doesn't re-render it)
+ */
+function PinAt({ anchor, zIndex, children }: { anchor: CommentAnchor; zIndex: number; children: ReactNode }) {
   const node = useInternalNode(anchor.nodeId ?? '');
   const origin = anchor.nodeId && anchor.offset ? node?.internals.positionAbsolute : undefined;
   const { x, y } = origin && anchor.offset ? { x: origin.x + anchor.offset.x, y: origin.y + anchor.offset.y } : anchor.position;
   return (
-    <div className="absolute" style={{ left: x, top: y, transform: `scale(${1 / zoom})`, transformOrigin: '0 0', zIndex }}>
+    <div
+      className="absolute"
+      style={{ left: x, top: y, transform: `scale(var(${COUNTER_SCALE}, 1))`, transformOrigin: '0 0', zIndex }}
+    >
       {/* The pin's tip (bottom left corner) sits on the anchor point, and it grows up and right as it opens */}
       <div className="nopan nodrag nowheel pointer-events-auto absolute bottom-0 left-0">{children}</div>
     </div>
@@ -511,7 +518,8 @@ export const CommentLayer = memo(function CommentLayer({
   onMove: (threadId: string, anchor: CommentAnchor) => void;
   onMoveDraft: (anchor: CommentAnchor) => void;
 }) {
-  const zoom = useStore((state) => state.transform[2]);
+  const layer = useRef<HTMLDivElement>(null);
+  useCounterScale(layer);
   const { screenToFlowPosition, getInternalNode } = useReactFlow();
   // A pin being dragged stays here until it's dropped, then moves for everyone
   const [moving, setMoving] = useState<{ threadId: string; anchor: CommentAnchor } | null>(null);
@@ -539,7 +547,7 @@ export const CommentLayer = memo(function CommentLayer({
   return (
     <ViewportPortal>
       {/* Above nodes (selected ones are raised to 1000) and other people's pointers */}
-      <div className="absolute left-0 top-0" style={{ zIndex: 2001 }}>
+      <div ref={layer} className="absolute left-0 top-0" style={{ zIndex: 2001 }}>
         {visible.map((thread) => {
           const isOpen = thread.id === openThreadId;
           return (
@@ -552,7 +560,6 @@ export const CommentLayer = memo(function CommentLayer({
                     ? { position: { x: thread.position.x + selectionOffset.x, y: thread.position.y + selectionOffset.y } }
                     : thread
               }
-              zoom={zoom}
               zIndex={isOpen ? 2 : 1}
             >
               <Pin
@@ -605,7 +612,7 @@ export const CommentLayer = memo(function CommentLayer({
           )}
 
         {draft && (
-          <PinAt anchor={draft} zoom={zoom} zIndex={3}>
+          <PinAt anchor={draft} zIndex={3}>
             <Pin author={author} active onDrag={(tip, phase) => onMoveDraft(anchorFor(tip, phase))} />
             <FloatingPanel>
               <Composer placeholder="Add a comment" onSubmit={onCreate} onCancel={onCancelDraft} />

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

@@ -1,5 +1,6 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { usePeople, type PresenceStore } from '../hooks/presence-store';
+import Dialog, { SECONDARY_BUTTON } from './Dialog';
 import { STATUS } from './status';
 
 /** Asks before deleting a canvas: it's deleted for everyone, for good */
@@ -22,12 +23,6 @@ export default function DeleteCanvasDialog({
   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);
@@ -40,42 +35,31 @@ export default function DeleteCanvasDialog({
   };
 
   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>
+    <Dialog role="alertdialog" labelledBy="delete-canvas-title" busy={deleting} onClose={onClose}>
+      <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={SECONDARY_BUTTON}>
+          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>
+    </Dialog>
   );
 }

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

@@ -0,0 +1,60 @@
+import { useEffect, useRef, type ReactNode } from 'react';
+
+/**
+ * Studio's dialogs: a card over the page, closed by Escape or clicking outside it (not while it's busy). Focus stays
+ * in it: anything that moves focus outside (e.g. the menu it was opened from, closing) sends it back to its first
+ * field or button.
+ */
+
+export const SECONDARY_BUTTON =
+  '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';
+export const PRIMARY_BUTTON =
+  'rounded-lg px-4 py-2 text-sm font-medium bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))] hover:bg-[rgb(var(--ec-button-bg-hover))] disabled:opacity-60';
+
+export default function Dialog({
+  labelledBy,
+  role = 'dialog',
+  busy = false,
+  onClose,
+  children,
+}: {
+  /** The id of its heading */
+  labelledBy: string;
+  /** `alertdialog` when it asks to confirm something that can't be undone */
+  role?: 'dialog' | 'alertdialog';
+  /** Doing what was asked: it can't be closed until it's done */
+  busy?: boolean;
+  onClose: () => void;
+  children: ReactNode;
+}) {
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => event.key === 'Escape' && !busy && onClose();
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onClose, busy]);
+
+  const card = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const keepFocus = (event: FocusEvent) => {
+      if (!card.current || card.current.contains(event.target as globalThis.Node)) return;
+      card.current.querySelector<HTMLElement>('input, button')?.focus();
+    };
+    document.addEventListener('focusin', keepFocus);
+    return () => document.removeEventListener('focusin', keepFocus);
+  }, []);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" onClick={() => !busy && onClose()}>
+      <div
+        ref={card}
+        role={role}
+        aria-modal="true"
+        aria-labelledby={labelledBy}
+        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))]"
+      >
+        {children}
+      </div>
+    </div>
+  );
+}