@eventcatalog/core 5.0.0-beta.8 → 5.0.0

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

@@ -1,20 +1,104 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type DragEvent, type MouseEvent as ReactMouseEvent } from 'react';
 import {
-  Background,
+  applyNodeChanges,
   ConnectionLineType,
   ReactFlow,
   ReactFlowProvider,
   useReactFlow,
+  type Connection,
   type Edge,
   type Node,
+  type FitViewOptions,
   type NodeChange,
   type XYPosition,
 } from '@xyflow/react';
-import { edgeTypes } from '@eventcatalog/visualiser';
+import { DiagramBackground, edgeTypes, getLegend, LegendPanel, pauseEdgeAnimations } from '@eventcatalog/visualiser';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { getCatalogConnections, indexCatalog, planWithConnections, type ConnectionGroup } from '../canvas-actions';
-import { isDecided } from '../canvas-doc';
-import { CLIPBOARD_TYPE, copyNodes, pasteNodes, readClipboard, type ClipboardContent } from '../clipboard';
+import {
+  getDiagramLevel,
+  getDiagramLevelUnavailable,
+  isDecided,
+  type LevelPlace,
+  CLIPBOARD_TYPE,
+  copyNodes,
+  pasteNodes,
+  readClipboard,
+  type ClipboardContent,
+  keepUnchanged,
+  LOCAL_EDGE_KEYS,
+  LOCAL_NODE_KEYS,
+  findDropTargets,
+  placeDropped,
+  containerFor,
+  findGroupAtPoint,
+  getAbsolutePosition,
+  getAbsoluteRect,
+  previewContainerGrowth,
+  sizeOf,
+  sortByHierarchy,
+  toRelativePosition,
+  getLayoutPositions,
+  layoutGraph,
+  getLevelGraph,
+  getLevelUnavailableReason,
+  LEVELS,
+  type Level,
+  arrangeLevel,
+  getLevelNodeSize,
+  levelPlaces,
+  withDiagramRoutes,
+  canGoInContainer,
+  getNodeDefinition,
+  getNodeLabel,
+  getNodeName,
+  getNoteLevel,
+  isOnLevel,
+  isShownOnLevel,
+  isWrittenOnCanvas,
+  getResource,
+  DropTargetContext,
+  nodeTypes,
+  UpdateNodeDataContext,
+  anchorAt,
+  ContextMenu,
+  canvasToModel,
+  modelToCanvas,
+  toDiagramFile,
+  readDiagramFile,
+  pickDiagramFile,
+  downloadFile,
+  fileNameFor,
+  DIAGRAM_FILE_EXTENSION,
+  canvasImage,
+  EmptyCanvas,
+  type ModelCanvasContent,
+  CommentLayer,
+  CommentList,
+  getAnchorPosition,
+  timeAgo,
+  type ContextMenuState,
+  CANVAS_STATUS_LOOK,
+  ContainerChooser,
+  type ContainerChoice,
+  CanvasControls,
+  ViewControls,
+  FIT_VIEW_OPTIONS,
+  EditButton,
+  LockedContext,
+  StartWritingContext,
+  EditingContext,
+  HotspotLayer,
+  HotspotList,
+  topSeverity,
+  isGroupType,
+  type Hotspot,
+  type HotspotDraft,
+  type HotspotFields,
+  type HotspotSeverity,
+  type HotspotSpot,
+} from '@eventcatalog/visualiser/studio';
+import { X } from 'lucide-react';
 import type { CatalogRelation, CatalogResource } from '../catalog-resources';
 import {
   buildContainer,
@@ -25,37 +109,23 @@ import {
   getContents,
   getRelatedEdges,
 } from '../catalog';
-import {
-  findDropTarget,
-  findGroupAtPoint,
-  getAbsolutePosition,
-  previewContainerGrowth,
-  sizeOf,
-  sortByHierarchy,
-  toRelativePosition,
-} from '../grouping';
 import type { Peer } from '../hooks/presence-store';
 import { useCanvasWebMcp } from '../hooks/use-canvas-webmcp';
 import { useStudioFlow } from '../hooks/use-studio-flow';
 import { useComments, type CommentAnchor, type Thread } from '../hooks/use-comments';
-import { getLayoutPositions, layoutGraph } from '../layout';
-import { getLevelGraph, getLevelUnavailableReason, LEVELS, type Level } from '../levels';
-import { getNodeDefinition, getNodeLabel, getNodeName, getNoteLevel, isOnLevel, isWrittenOnCanvas } from '../node-types';
 import type { ToolSync } from '../tool-sync';
-import CanvasControls, { FIT_VIEW_OPTIONS } from './CanvasControls';
 import CanvasHeader from './CanvasHeader';
-import { DropTargetContext, nodeTypes, UpdateNodeDataContext } from './canvas-nodes';
-import { anchorAt, CanvasContextMenu, CommentLayer, getAnchorPosition, timeAgo, type ContextMenuState } from './Comments';
-import { CANVAS_STATUS_LOOK } from './status';
 import ConnectAgentDialog, { enableWebMcp, isRelayEnabled, isWebMcpEnabled, loadRelay } from './ConnectAgentDialog';
-import ContainerChooser, { type ContainerChoice } from './ContainerChooser';
 import ConnectionsChooser, { type ConnectionsChoice } from './ConnectionsChooser';
 import JoinForm from './JoinForm';
-import { colorForName, getStoredName, onStoredNameChange, storeName } from '../identity';
-import LeftPanel, { CATALOG_DRAG_TYPE, COMPONENT_DRAG_TYPE } from './LeftPanel';
+import { colorForName, getStoredColor, getStoredName, onStoredNameChange, storeColor, storeName } from '../identity';
+import LeftPanel, { CATALOG_DRAG_TYPE, COMPONENT_DRAG_TYPE, type LeftPanelTab } from './LeftPanel';
 import { AgentActivity, RemotePresence, ViewportSharer } from './Presence';
-import PropertiesPanel from './PropertiesPanel';
+import NodeDetails, { type NodeConnection } from './NodeDetails';
 import ShareDialog from './ShareDialog';
+import DeleteCanvasDialog from './DeleteCanvasDialog';
+import { createCanvasThroughApi, deleteCanvasThroughApi } from '../api/client';
+import ShortcutsDialog from './ShortcutsDialog';
 
 type CanvasProps = {
   canvasId: string;
@@ -64,22 +134,28 @@ type CanvasProps = {
   socketUrl?: string;
   /** Where "New canvas" goes (hidden when not given, e.g. inside a chat) */
   newCanvasUrl?: string;
+  /** The Studio page (where you go after deleting the canvas, or finding it deleted) */
+  studioUrl?: string;
+  /** The Studio API's canvases on this site: deleting the canvas is offered when given (not inside a chat) */
+  canvasesApiUrl?: string;
   /** The canvas's link, for Share (defaults to this page) */
   shareUrl?: string;
   /** The EventCatalog MCP server agents connect to (a path on this site, or a URL) */
   mcpUrl?: string;
   /** The WebMCP local relay's script, when this page can offer it (not inside a chat) */
   relayScriptPath?: string;
-  /** Canvases are only kept in memory, until the server restarts (`studio.storage` is "memory") */
+  /** Canvases are only kept in memory, until the server restarts (`storage` is "memory") */
   keptInMemory?: boolean;
   /** Sync through MCP tool calls when the WebSocket can't connect (e.g. inside a chat's sandbox) */
   syncViaTools?: ToolSync;
   /** Follow agents' changes with the camera from the start (e.g. inside a chat, where you watch an agent work) */
   followChanges?: boolean;
+  /** Starts with the palette folded away (e.g. in a chat, where there's little room) */
+  paletteCollapsed?: boolean;
   /** Told what's selected (e.g. a chat attaches it to the conversation, so you can ask about it) */
   onSelectionChange?: (selected: SelectedNode[]) => void;
-  /** Join with this name instead of asking for one (e.g. inside a chat, where the agent or host knows who it is) */
-  defaultName?: string;
+  /** Join as this AI agent, with its name, colour and logo, instead of asking who you are (e.g. inside a chat, as the chat's agent) */
+  asAgent?: { name: string; color: string };
   /** Signed in with the catalog's sign-in (SSO): you're shown by this name and picture, and can't change them */
   signedInAs?: { name: string; picture?: string };
   resources: CatalogResource[];
@@ -90,8 +166,30 @@ export type SelectedNode = { id: string; name: string; type: string; catalogReso
 
 /** How long a level (L1, L2) waits for changes to settle before it's laid out again */
 const LEVEL_RELAYOUT_MS = 300;
+
+/**
+ * Where something added goes. While L1 or L2 is shown it's added to the canvas people edit (L3), below what's on it
+ * or in the container it's dropped in, and kept on the level where it's dropped.
+ */
+/** Where a node of this size goes to be centred on a point */
+const centredOn = (center: XYPosition, size: { width: number; height: number }): LevelPlace => ({
+  x: center.x - size.width / 2,
+  y: center.y - size.height / 2,
+});
+
+type Landing = {
+  /** Where it was dropped (or added), in what's shown */
+  point: XYPosition;
+  /** Where it's centred on the canvas, and the container it goes in there (else the one at that point, if any) */
+  center: XYPosition;
+  inside?: string;
+  /**
+   * Where it's centred on the level it was dropped on (in the container's coordinates when it's in one), and the
+   * size it's drawn at there before it's measured
+   */
+  onLevel?: { level: 1 | 2; center: XYPosition; size: { width: number; height: number } };
+};
 const DELETE_KEYS = ['Backspace', 'Delete'];
-const LEVEL_FIT_VIEW_OPTIONS = { ...FIT_VIEW_OPTIONS, maxZoom: 1 };
 const NO_THREADS: ReadonlySet<string> = new Set();
 // React Flow's warnings, except that a handle has no node: the left panel's drag previews draw nodes off the canvas
 const onFlowError = (code: string, message: string) => {
@@ -136,8 +234,58 @@ const asLevelNote = (node: Node) => {
 
 const structureOf = (nodes: Node[]) => nodes.map((node) => `${node.id}:${node.type}:${node.parentId ?? ''}`).join('|');
 
-export default function StudioDesigner({ defaultName, signedInAs, ...props }: CanvasProps) {
-  const [name, setName] = useState(() => getStoredName() ?? defaultName ?? null);
+// A node as shown with what it says about it (hidden by the legend, glowing with a hotspot, lit as a drop target):
+// one copy per node and look, so a node keeps its identity while others move (React Flow re-renders a node whose
+// object is new: copying them on every drag frame re-rendered every node with a hotspot)
+const shownAs = new WeakMap<Node, Map<string, Node>>();
+const asShown = (node: Node, hidden: boolean, className: string) => {
+  const key = `${hidden}|${className}`;
+  let looks = shownAs.get(node);
+  if (!looks) shownAs.set(node, (looks = new Map()));
+  let shown = looks.get(key);
+  if (!shown) {
+    if (looks.size > 4) looks.clear();
+    looks.set(key, (shown = { ...node, ...(hidden && { hidden: true }), ...(className && { className }) }));
+  }
+  return shown;
+};
+
+/**
+ * The drawing tools, as Studio on the web's: selecting (V), the hand (H) to move around, and what's put where the
+ * canvas is next clicked: a sticky note (N), text (T), a comment (C) or a hotspot (A)
+ */
+type CanvasTool = 'select' | 'hand' | 'text' | 'note' | 'comment' | 'hotspot';
+
+/**
+ * A diagram file opened into a new canvas: kept in this tab until the new canvas has loaded (empty), then put on it.
+ * By the new canvas's id.
+ */
+const openedKey = (canvasId: string) => `eventcatalog-studio-opened:${canvasId}`;
+const keepOpened = (canvasId: string, { nodes, edges, threads, hotspots, levelLayouts }: ModelCanvasContent) => {
+  try {
+    sessionStorage.setItem(
+      openedKey(canvasId),
+      JSON.stringify({ nodes, edges, threads, hotspots, levelLayouts: { 1: [...levelLayouts[1]], 2: [...levelLayouts[2]] } })
+    );
+    return true;
+  } catch {
+    return false;
+  }
+};
+const takeOpened = (canvasId: string): ModelCanvasContent | undefined => {
+  try {
+    const raw = sessionStorage.getItem(openedKey(canvasId));
+    if (!raw) return undefined;
+    sessionStorage.removeItem(openedKey(canvasId));
+    const saved = JSON.parse(raw);
+    return { ...saved, levelLayouts: { 1: new Map(saved.levelLayouts[1]), 2: new Map(saved.levelLayouts[2]) } };
+  } catch {
+    return undefined;
+  }
+};
+
+export default function StudioDesigner({ asAgent, signedInAs, ...props }: CanvasProps) {
+  const [name, setName] = useState(getStoredName);
 
   const saveName = useCallback((next: string) => {
     setName(next);
@@ -145,19 +293,41 @@ export default function StudioDesigner({ defaultName, signedInAs, ...props }: Ca
   }, []);
   // Renamed on the Studio page or another canvas in this browser
   useEffect(() => onStoredNameChange((next) => next && setName(next)), []);
+  // The colour picked (kept in this browser), else the one that follows from the name
+  const [chosenColor, setChosenColor] = useState(getStoredColor);
+  const recolor = useCallback((next: string) => {
+    setChosenColor(next);
+    storeColor(next);
+  }, []);
 
+  if (asAgent) {
+    return (
+      <ReactFlowProvider>
+        <Canvas {...props} name={asAgent.name} chosenColor={asAgent.color} agent onRecolor={() => {}} />
+      </ReactFlowProvider>
+    );
+  }
   if (signedInAs) {
     return (
       <ReactFlowProvider>
-        <Canvas {...props} name={signedInAs.name} picture={signedInAs.picture} />
+        <Canvas {...props} name={signedInAs.name} picture={signedInAs.picture} chosenColor={chosenColor} onRecolor={recolor} />
       </ReactFlowProvider>
     );
   }
-  if (!name) return <JoinForm onJoin={saveName} />;
+  if (!name)
+    return (
+      <JoinForm
+        color={chosenColor}
+        onJoin={(me) => {
+          recolor(me.color);
+          saveName(me.name);
+        }}
+      />
+    );
 
   return (
     <ReactFlowProvider>
-      <Canvas {...props} name={name} onRename={saveName} />
+      <Canvas {...props} name={name} onRename={saveName} chosenColor={chosenColor} onRecolor={recolor} />
     </ReactFlowProvider>
   );
 }
@@ -170,25 +340,36 @@ function Canvas({
   socketPath,
   socketUrl,
   newCanvasUrl,
+  studioUrl,
+  canvasesApiUrl,
   shareUrl,
   mcpUrl = '/docs/mcp',
   relayScriptPath,
   keptInMemory = false,
   syncViaTools,
   followChanges = false,
+  paletteCollapsed,
   onSelectionChange,
   resources,
   relations,
   name,
   picture,
+  agent,
   onRename,
-}: Omit<CanvasProps, 'defaultName' | 'signedInAs'> & {
+  chosenColor,
+  onRecolor,
+}: Omit<CanvasProps, 'asAgent' | 'signedInAs'> & {
   name: string;
   picture?: string;
+  /** You're here as an AI agent (shown with its logo, and can't change who you are) */
+  agent?: boolean;
   /** Not given when you're signed in (your name is the one you signed in with) */
   onRename?: (name: string) => void;
+  /** The colour you picked (else it follows from your name) */
+  chosenColor?: string | null;
+  onRecolor: (color: string) => void;
 }) {
-  const color = colorForName(name);
+  const color = chosenColor ?? colorForName(name);
   const canvasRef = useRef<HTMLDivElement>(null);
 
   // Nodes glide to their new place after a layout (anyone's) or a level change (not while editing: it would make dragging lag)
@@ -215,12 +396,25 @@ function Canvas({
     name,
     color,
     picture,
+    agent,
     syncViaTools,
     onLayout: glide,
     onContainerResize: animateContainers,
   });
-  const author = useMemo(() => ({ name, color, ...(picture && { picture }) }), [name, color, picture]);
+  const author = useMemo(
+    () => ({ name, color, ...(picture && { picture }), ...(agent && { agent }) }),
+    [name, color, picture, agent]
+  );
   const comments = useComments(flow.doc, author);
+  // Locked (looked at, not changed): for everyone on it, by whoever locked it
+  const locked = !!flow.lockedBy;
+  const lockedRef = useRef(locked);
+  lockedRef.current = locked;
+  // Fitted clear of the palette on the left (shown unless the canvas is locked)
+  const fitOptions = useMemo<FitViewOptions>(
+    () => (locked ? FIT_VIEW_OPTIONS : { ...FIT_VIEW_OPTIONS, padding: { ...FIT_VIEW_OPTIONS.padding, left: '304px' } }),
+    [locked]
+  );
   const { screenToFlowPosition, flowToScreenPosition, setCenter, getZoom, fitView } = useReactFlow();
 
   const catalog = useMemo(() => indexCatalog(resources, relations), [resources, relations]);
@@ -230,6 +424,13 @@ function Canvas({
   const edgesRef = useRef(flow.edges);
   edgesRef.current = flow.edges;
   const lookupNodes = () => new Map(nodesRef.current.map((node) => [node.id, node]));
+  /** Selects just these nodes, changing only those whose selection changes (each change copies its node) */
+  const select = (ids: ReadonlySet<string>) => {
+    const changes: NodeChange[] = nodesRef.current.flatMap((node) =>
+      !!node.selected === ids.has(node.id) ? [] : [{ type: 'select' as const, id: node.id, selected: ids.has(node.id) }]
+    );
+    if (changes.length) flow.onNodesChange(changes);
+  };
 
   // Agents in the browser (WebMCP) work on this canvas through the page, as the user's agent. Browsers without
   // WebMCP of their own get it through the polyfill once someone turns it on (Connect agent).
@@ -246,8 +447,7 @@ function Canvas({
     resources,
     catalog,
     agent: { name: `${name}'s agent`, color, agent: true },
-    select: (ids) =>
-      flow.onNodesChange(nodesRef.current.map((node) => ({ type: 'select', id: node.id, selected: ids.includes(node.id) }))),
+    select: (ids) => select(new Set(ids)),
     fitView: (ids) => void fitView({ nodes: ids?.map((id) => ({ id })), duration: 400, padding: 0.3, maxZoom: 1.2 }),
     reorder: () => reorder(),
   });
@@ -271,27 +471,35 @@ function Canvas({
   // ---- Adding things ----
 
   // A domain or system dropped on the canvas: asked whether it's a card or a container first
-  const [chooser, setChooser] = useState<{ resource: CatalogResource; center: XYPosition } | null>(null);
+  const [chooser, setChooser] = useState<{ resource: CatalogResource; at: Landing } | null>(null);
   // A service or message that connects to things not on the canvas yet: asked whether to bring them too
   const [connectionsChooser, setConnectionsChooser] = useState<{
     resource: CatalogResource;
-    center: XYPosition;
+    at: Landing;
     groups: ConnectionGroup[];
   } | null>(null);
 
   // A catalog resource is added with edges to the related resources already on the canvas
-  const addResource = useStableCallback((key: string, center: XYPosition = canvasCenter()) => {
+  const addResource = (key: string, point: XYPosition) => {
     const resource = catalog.resourcesByKey.get(key);
     if (!resource) return;
-    if (canBeContainer(resource)) return setChooser({ resource, center });
+    const at = landingAt(point, resource.node.type);
+    if (canBeContainer(resource)) return setChooser({ resource, at });
     const groups = getCatalogConnections(resource, catalog, keysOnCanvas);
-    if (groups.length > 0) return setConnectionsChooser({ resource, center, groups });
-    addCard(resource, center);
-  });
+    if (groups.length > 0) return setConnectionsChooser({ resource, at, groups });
+    addCard(resource, at);
+  };
 
-  const addCard = (resource: CatalogResource, center: XYPosition) =>
-    flow.insertNode(resource.node.type, catalogNodeData(resource), center, (id, existing) =>
-      getRelatedEdges(resource, id, existing, catalog.relationsByKey)
+  const addCard = (resource: CatalogResource, at: Landing) =>
+    keepOnLevel(
+      at,
+      flow.insertNode(
+        resource.node.type,
+        catalogNodeData(resource),
+        at.center,
+        (id, existing) => getRelatedEdges(resource, id, existing, catalog.relationsByKey),
+        at.inside
+      )
     );
 
   // Nodes waiting to be shown before the canvas is laid out around them
@@ -307,38 +515,42 @@ function Canvas({
   }, [flow.nodes]);
 
   /** A domain or system as a container, with everything it holds in the catalog inside if asked */
-  const addContainer = async (resource: CatalogResource, center: XYPosition, withContents: boolean) => {
+  const addContainer = async (resource: CatalogResource, at: Landing, withContents: boolean) => {
     const existing = nodesRef.current;
     const built = withContents
-      ? await buildContainerWithContents(resource, center, catalog, existing)
-      : { nodes: [buildContainer(resource, center)], edges: [] };
+      ? await buildContainerWithContents(resource, at.center, catalog, existing)
+      : { nodes: [buildContainer(resource, at.center)], edges: [] };
     // Dropped in another container (e.g. a system in its domain): it goes in it
-    const outer = findGroupAtPoint(center, existing);
+    const outer = containerFor(at.center, existing, at.inside);
     const nodes = outer
       ? built.nodes.map((node) =>
           node.parentId ? node : { ...node, parentId: outer.id, position: toRelativePosition(node.position, outer.id, existing) }
         )
       : built.nodes;
-    // With its contents, the canvas is laid out again to make room for it all
-    if (withContents && existing.length > 0) reorderOnceShown.current = nodes.map((node) => node.id);
+    // With its contents, the canvas is laid out again to make room for it all (not when added on a level: it's
+    // below everything on the canvas, and nothing on the level moves)
+    if (withContents && existing.length > 0 && !at.onLevel) reorderOnceShown.current = nodes.map((node) => node.id);
     flow.insertNodes(nodes, built.edges);
+    keepOnLevel(at, built.nodes.find((node) => !node.parentId)?.id);
   };
 
   const choose = useStableCallback((choice: ContainerChoice) => {
     if (!chooser) return;
-    if (choice.as === 'card') addCard(chooser.resource, chooser.center);
-    else void addContainer(chooser.resource, chooser.center, choice.withContents);
+    if (choice.as === 'card') addCard(chooser.resource, chooser.at);
+    else void addContainer(chooser.resource, chooser.at, !!choice.withContents);
     setChooser(null);
   });
   const cancelChooser = useCallback(() => setChooser(null), []);
 
   const chooseConnections = useStableCallback((choice: ConnectionsChoice) => {
     if (!connectionsChooser) return;
-    const { resource, center } = connectionsChooser;
-    if (choice.as === 'card') addCard(resource, center);
+    const { resource, at } = connectionsChooser;
+    if (choice.as === 'card') addCard(resource, at);
     else {
-      const { nodes, edges } = planWithConnections(nodesRef.current, resource, center, choice.include, catalog);
+      const { nodes, edges } = planWithConnections(nodesRef.current, resource, at.center, choice.include, catalog, at.inside);
       flow.insertNodes(nodes, edges);
+      // What it connects to is placed next to it on the level
+      keepOnLevel(at, nodes.find((node) => getCatalogLink(node)?.key === resource.key)?.id);
     }
     setConnectionsChooser(null);
   });
@@ -356,31 +568,71 @@ function Canvas({
     };
   }, [chooser, catalog, keysOnCanvas]);
 
-  /** A sticky note on the level shown (it's only shown on that level) */
+  /** A sticky note on the level shown (it's only shown on that level), written on straight away */
   const addNoteAt = (center: XYPosition) => {
     const data = getNodeDefinition('note')!.createData();
-    flow.insertNode('note', levelRef.current === 3 ? data : { ...data, level: levelRef.current }, center);
+    const id = flow.insertNode('note', levelRef.current === 3 ? data : { ...data, level: levelRef.current }, center);
+    if (id) setStartWriting(id);
+  };
+  // The note or text just put on the canvas: written on straight away (see canvas-nodes)
+  const [startWriting, setStartWriting] = useState<string | null>(null);
+  /** Text written on the canvas, its first line where it's put (on the level shown, as notes are) */
+  const writeTextAt = (point: XYPosition) => {
+    const size = getNodeDefinition('text')!.defaultSize!;
+    const data = levelRef.current === 3 ? { text: '' } : { text: '', level: levelRef.current };
+    const id = flow.insertNode('text', data, { x: point.x + size.width / 2 - 4, y: point.y + size.height / 2 - 16 });
+    if (id) setStartWriting(id);
   };
   /**
-   * Where something added while L1 or L2 is shown goes: L1 and L2 are views of the canvas people edit (L3), so it's
-   * added there (shown on L3), below what's on it
+   * Where something added at a point goes (see Landing). On L1 and L2 it's centred where it's dropped, in the
+   * container there (and in the same container on the canvas). Something the level doesn't show (a message on L1)
+   * goes to L3, where it's shown.
    */
-  const centerOnCanvas = (center: XYPosition) => {
-    if (levelRef.current === 3) return center;
-    changeLevel(3);
-    const roots = nodesRef.current.filter((node) => !node.parentId && isOnLevel(node, 3));
-    if (roots.length === 0) return { x: 0, y: 0 };
-    const left = Math.min(...roots.map((node) => node.position.x));
-    const right = Math.max(...roots.map((node) => node.position.x + sizeOf(node).width));
-    const bottom = Math.max(...roots.map((node) => node.position.y + sizeOf(node).height));
-    return { x: (left + right) / 2, y: bottom + 160 };
+  const landingAt = (point: XYPosition, type: string | undefined): Landing => {
+    const level = levelRef.current;
+    if (level === 3) return { point, center: point };
+    const shownHere = isShownOnLevel(type, level);
+    if (!shownHere) changeLevel(3);
+    // The container it's dropped in on the level, which the canvas has too (levels keep the canvas's ids)
+    const shown = shownHere && levelGraphRef.current?.level === level ? levelGraphRef.current.nodes : [];
+    const container = canGoInContainer(type) ? findGroupAtPoint(point, shown) : undefined;
+    const canvas = nodesRef.current;
+    const inside = container && containerFor(point, canvas, container.id) ? container.id : undefined;
+    // On the canvas: below what's in that container, or below everything
+    const lookup = new Map(canvas.map((node) => [node.id, node]));
+    const beside = canvas.filter((node) => (inside ? node.parentId === inside : !node.parentId && isOnLevel(node, 3)));
+    const rects = (beside.length ? beside : inside ? [lookup.get(inside)!] : []).map((node) => getAbsoluteRect(node, lookup));
+    const center = rects.length
+      ? {
+          x: (Math.min(...rects.map((rect) => rect.x)) + Math.max(...rects.map((rect) => rect.x + rect.width))) / 2,
+          // Below them, or in the middle of an empty container
+          y: beside.length ? Math.max(...rects.map((rect) => rect.y + rect.height)) + 160 : rects[0].y + rects[0].height / 2,
+        }
+      : { x: 0, y: 0 };
+    if (!shownHere) return { point, center };
+    const origin =
+      container && inside ? getAbsolutePosition(container, new Map(shown.map((node) => [node.id, node]))) : { x: 0, y: 0 };
+    const size = getLevelNodeSize(type, level);
+    return { point, center, inside, onLevel: { level, center: { x: point.x - origin.x, y: point.y - origin.y }, size } };
+  };
+  // Added on a level, until they're measured, with the size they were centred at: centred again at their real size
+  const centring = useRef(new Map<string, { level: 1 | 2; size: { width: number; height: number } }>());
+  /** Keeps what was added where it was dropped on the level (undone with adding it) */
+  const keepOnLevel = (at: Landing, id: string | undefined) => {
+    if (!id || !at.onLevel) return;
+    const { level, center, size } = at.onLevel;
+    centring.current.set(id, { level, size });
+    flow.setLevelLayout(level, new Map([[id, centredOn(center, size)]]));
+  };
+  /** A component (its type, or its key in the components list: the kinds of data store share a type) */
+  const addComponentAt = (component: string, point: XYPosition) => {
+    if (component === 'note') return addNoteAt(point);
+    const at = landingAt(point, getNodeDefinition(component)?.type ?? component);
+    keepOnLevel(at, flow.addNode(component, at.center, at.inside));
   };
-  const addComponentAt = (type: string, center: XYPosition) =>
-    type === 'note' ? addNoteAt(center) : flow.addNode(type, centerOnCanvas(center));
 
   const addComponent = useStableCallback((type: string) => addComponentAt(type, canvasCenter()));
-  const addNote = useStableCallback(() => addNoteAt(canvasCenter()));
-  const addResourceFromPanel = useStableCallback((key: string) => addResource(key, centerOnCanvas(canvasCenter())));
+  const addResourceFromPanel = useStableCallback((key: string) => addResource(key, canvasCenter()));
 
   const onDrop = useStableCallback((event: DragEvent) => {
     event.preventDefault();
@@ -388,7 +640,7 @@ function Canvas({
     const type = event.dataTransfer.getData(COMPONENT_DRAG_TYPE);
     const resourceKey = event.dataTransfer.getData(CATALOG_DRAG_TYPE);
     if (type) addComponentAt(type, position);
-    if (resourceKey) addResource(resourceKey, centerOnCanvas(position));
+    if (resourceKey) addResource(resourceKey, position);
   });
 
   // ---- Pointer, panning and dragging ----
@@ -478,8 +730,13 @@ function Canvas({
   // While the canvas is panned, zoomed or dragged, message edges stop animating (a class, not state, so nothing re-renders)
   const interactions = useRef({ moving: false, dragging: false });
   const setInteraction = useCallback((kind: 'moving' | 'dragging', on: boolean) => {
+    const wasActive = interactions.current.moving || interactions.current.dragging;
     interactions.current[kind] = on;
-    canvasRef.current?.classList.toggle('ec-interaction-active', interactions.current.moving || interactions.current.dragging);
+    const active = interactions.current.moving || interactions.current.dragging;
+    if (active === wasActive) return;
+    canvasRef.current?.classList.toggle('ec-interaction-active', active);
+    // (hiding them doesn't stop the envelopes' SMIL)
+    pauseEdgeAnimations(canvasRef.current, active);
   }, []);
 
   // The camera follows agents unless people move it themselves (set by AgentActivity)
@@ -495,10 +752,6 @@ function Canvas({
 
   // Dragging something into a container puts it in it, out of one takes it out
   const [dropTargetId, setDropTargetId] = useState<string | null>(null);
-  const dragRoots = (dragged: Node[]) => {
-    const ids = new Set(dragged.map((node) => node.id));
-    return dragged.filter((node) => !node.parentId || !ids.has(node.parentId));
-  };
   // While something's dragged, the containers around it grow to fit it (see previewContainerGrowth): the canvas
   // when the drag started, and those containers, innermost first
   const dragStart = useRef<{ nodes: Map<string, Node>; containers: string[] } | null>(null);
@@ -545,15 +798,17 @@ function Canvas({
     dragged.forEach((node) => now.set(node.id, { ...now.get(node.id)!, position: node.position }));
     flow.showDragPreview(previewContainerGrowth(started.containers, new Set(dragged.map((node) => node.id)), started.nodes, now));
   };
-  const onNodeDrag = useStableCallback((_: unknown, __: Node, dragged: Node[]) => {
+  const onNodeDrag = useStableCallback((_: unknown, held: Node, dragged: Node[]) => {
     growContainers(dragged);
     moveThreadsWith(dragged);
-    const [root] = dragRoots(dragged);
-    const current = root && nodesRef.current.find((node) => node.id === root.id);
-    const target = root ? findDropTarget(root.id, nodesRef.current) : undefined;
-    setDropTargetId(target && target.id !== current?.parentId ? target.id : null);
+    const moves = findDropTargets(
+      held.id,
+      dragged.map((node) => node.id),
+      nodesRef.current
+    );
+    setDropTargetId(moves.find(({ target }) => target)?.target?.id ?? null);
   });
-  const onNodeDragStop = useStableCallback((_: unknown, __: Node, dragged: Node[]) => {
+  const onNodeDragStop = useStableCallback((_: unknown, held: Node, dragged: Node[]) => {
     setInteraction('dragging', false);
     setDropTargetId(null);
     dragStart.current = null;
@@ -571,56 +826,113 @@ function Canvas({
     }
     threadsDrag.current = null;
     setThreadsOffset(null);
-    // The containers it grew are saved with the drop; dropped in another container (or out of one), it moves there
-    for (const root of dragRoots(dragged)) {
-      const current = nodesRef.current.find((node) => node.id === root.id);
-      const target = findDropTarget(root.id, nodesRef.current);
-      if (current && target?.id !== current.parentId) flow.setParent(root.id, target?.id);
-    }
+    // The containers it grew are saved with the drop; dropped in another container (or out of one), it moves there,
+    // and what's selected with it goes too, into free space there (gliding off anything it was dropped on)
+    const moves = findDropTargets(
+      held.id,
+      dragged.map((node) => node.id),
+      nodesRef.current
+    );
+    if (!moves.length) return;
+    const { places, nudged } = placeDropped(nodesRef.current, moves);
+    if (nudged) glide();
+    flow.setParents(moves.map(({ id, target }) => ({ id, parentId: target?.id, at: places.get(id) })));
   });
 
   // ---- Levels of detail ----
 
-  // Like EventCatalog's diagrams: L3 is the canvas people edit, L1 and L2 read only views of it
-  const [level, setLevel] = useState<Level>(3);
+  // Like EventCatalog's diagrams: L3 is everything on the canvas, L1 and L2 less detailed views of it, arranged and
+  // edited on their own (what's done there changes the canvas: a system card is the system). A canvas opened
+  // from a diagram opens at the level it was shown at (?level=1 or 2), once: reloading opens the canvas (L3).
+  const [level, setLevel] = useState<Level>(() => {
+    const url = new URL(window.location.href);
+    const asked = Number(url.searchParams.get('level'));
+    if (!url.searchParams.has('level')) return 3;
+    url.searchParams.delete('level');
+    window.history.replaceState(window.history.state, '', url);
+    return asked === 1 || asked === 2 ? asked : 3;
+  });
   const levelRef = useRef(level);
   levelRef.current = level;
+  // L3 is the canvas itself: comments and other people's pointers are there (L1 and L2 are arranged on their own)
   const editable = level === 3;
-  const [levelGraph, setLevelGraph] = useState<{ level: Level; nodes: Node[]; edges: Edge[] } | null>(null);
+  const [levelGraph, setLevelGraphState] = useState<{ level: Level; nodes: Node[]; edges: Edge[] } | null>(null);
+  // The level shown as it is now (for changes to it, and saving where things are put)
+  const levelGraphRef = useRef(levelGraph);
+  /** Changes to the level shown (moved, selected, measured), as they happen */
+  const updateLevelGraph = useCallback((next: { level: Level; nodes: Node[]; edges: Edge[] }) => {
+    levelGraphRef.current = next;
+    setLevelGraphState(next);
+  }, []);
+  /**
+   * Shows a level (arranged again), keeping what hasn't changed on it as it's shown (so it doesn't render again), and
+   * what's selected and nodes' measured sizes (not measured again). Containers come before what's in them, as React
+   * Flow needs (the canvas's order can have them after).
+   */
+  const setLevelGraph = useCallback((next: { level: Level; nodes: Node[]; edges: Edge[] } | null) => {
+    const previous = levelGraphRef.current;
+    const same = previous && next && previous.level === next.level ? previous : null;
+    const shown = next && {
+      ...next,
+      nodes: sortByHierarchy(same ? keepUnchanged(same.nodes, next.nodes, LOCAL_NODE_KEYS) : next.nodes),
+      edges: same ? keepUnchanged(same.edges, next.edges, LOCAL_EDGE_KEYS) : next.edges,
+    };
+    levelGraphRef.current = shown;
+    setLevelGraphState(shown);
+  }, []);
 
   // What a level shows depends on what's on the canvas and how it's connected, and names (not positions). Notes
   // aren't laid out with it: adding, moving or writing one doesn't lay the level out again.
-  const levelKey =
-    level === 3
-      ? ''
-      : `${flow.nodes
-          .filter((node) => node.type !== 'note')
-          .map((node) => `${node.id}:${node.type}:${node.parentId ?? ''}:${getNodeName(node.type, node.data)}`)
-          .join('|')}#${flow.edges.map((edge) => `${edge.source}>${edge.target}:${String(edge.label ?? '')}`).join('|')}`;
+  // Also whether a canvas opened from a diagram still has the diagram's levels: only worked out when needed
+  const levelKey = level === 3 ? '' : flow.structureKey;
   const shownLevelRef = useRef<Level | undefined>(undefined);
   shownLevelRef.current = levelGraph?.level;
+  const levelLayout = level === 3 ? undefined : flow.levelLayouts[level];
   useEffect(() => {
     if (level === 3) return setLevelGraph(null);
     let cancelled = false;
-    // Straight away when switching levels; after changes settle while one is shown
-    const timer = setTimeout(
-      () => {
-        const collapsed = getLevelGraph(nodesRef.current, edgesRef.current, level);
-        void layoutGraph(
-          collapsed.nodes.map((node) => ({ ...node, selected: false })),
-          collapsed.edges
-        ).then((laidOut) => !cancelled && setLevelGraph({ level, ...laidOut }));
-      },
-      shownLevelRef.current === level ? LEVEL_RELAYOUT_MS : 0
-    );
+    const show = () => {
+      // A canvas opened from a diagram shows the diagram's levels as it did, until what's on the canvas changes
+      const fromDiagram = getDiagramLevel(flow.diagramLevels, level, flow.structureKey);
+      const diagram = flow.diagramLevels?.[level];
+      const derived = fromDiagram ? undefined : getLevelGraph(nodesRef.current, edgesRef.current, level);
+      const content = fromDiagram ?? { ...derived!, edges: withDiagramRoutes(derived!.edges, diagram?.edges) };
+      // Where things are: as arranged on the level, else as the diagram had them, and anything new next to what it
+      // connects to (kept there, so nothing moves later)
+      const arranged = arrangeLevel(content, flow.levelLayouts[level], diagram && levelPlaces(diagram.nodes));
+      if (arranged) {
+        setLevelGraph({ level, ...arranged.graph });
+        if (arranged.placed.size) flow.setLevelLayout(level, arranged.placed, 'level');
+        return;
+      }
+      // Nothing on it has a place yet: laid out with the visualiser's layout once, and kept
+      void layoutGraph(
+        content.nodes.map((node) => ({ ...node, selected: false })),
+        content.edges
+      ).then((laidOut) => {
+        if (cancelled) return;
+        setLevelGraph({ level, ...laidOut });
+        flow.setLevelLayout(level, levelPlaces(laidOut.nodes), 'level');
+        // (with sizes guessed from the nodes' types: laid out again once they're drawn, see below)
+        if (!flow.presence?.getPeers().length) relayoutWhenMeasured.current = level;
+      });
+    };
+    // Straight away when switching levels (or from the diagram); after changes settle while one is shown
+    if (shownLevelRef.current !== level || getDiagramLevel(flow.diagramLevels, level, flow.structureKey)) {
+      show();
+      return () => void (cancelled = true);
+    }
+    const timer = setTimeout(show, LEVEL_RELAYOUT_MS);
     return () => {
       cancelled = true;
       clearTimeout(timer);
     };
-  }, [level, levelKey]);
+  }, [level, levelKey, flow.diagramLevels, levelLayout]);
 
-  // Comments: right click > Add comment, or C for comment mode then click (like Figma)
-  const [commentMode, setCommentMode] = useState(false);
+  // The tool picked (see CanvasTool): comments are right click > Add comment, or C then click (like Figma)
+  const [tool, setTool] = useState<CanvasTool>('select');
+  const commentMode = tool === 'comment';
+  const placing = tool === 'text' || tool === 'note';
   const [draft, setDraft] = useState<CommentAnchor | null>(null);
   const [openThreadId, setOpenThreadId] = useState<string | null>(null);
   const [showResolved, setShowResolved] = useState(false);
@@ -632,10 +944,31 @@ function Canvas({
   const threadsShown = () => comments.threads.filter((thread) => showResolved || !thread.resolved);
   const [contextMenu, setContextMenu] = useState<ContextMenuState>(null);
 
+  // A level's first layout is worked out before its nodes have been drawn, so with sizes guessed from their types: a
+  // little off once they're drawn at their real sizes. Once they all have been (measured), it's laid out again with
+  // them, as Reorder would, gliding there. Only that first time, and not while others are on the canvas: it would
+  // move what they're looking at (the level stays as first laid out, and Reorder tidies it)
+  const relayoutWhenMeasured = useRef<1 | 2 | null>(null);
+  useEffect(() => {
+    const pending = relayoutWhenMeasured.current;
+    if (!pending || levelGraph?.level !== pending) return;
+    if (!levelGraph.nodes.every((node) => node.measured?.width && node.measured?.height)) return;
+    relayoutWhenMeasured.current = null;
+    void layoutGraph(
+      levelGraph.nodes.map((node) => ({ ...node, selected: false })),
+      levelGraph.edges
+    ).then((laidOut) => {
+      if (levelRef.current !== pending) return;
+      glide();
+      flow.setLevelLayout(pending, levelPlaces(laidOut.nodes), 'level');
+      setTimeout(() => void fitView({ ...fitOptions, duration: 450 }), 50);
+    });
+  }, [levelGraph]);
+
   const changeLevel = useStableCallback((next: Level) => {
     if (next === level) return;
     glide();
-    setCommentMode(false);
+    setTool('select');
     setDraft(null);
     setOpenThreadId(null);
     // What's selected may not be on the next level (e.g. a note added on this one)
@@ -644,22 +977,41 @@ function Canvas({
   });
   const editInL3 = useCallback(() => changeLevel(3), [changeLevel]);
 
-  // Fit the camera to a level once it's laid out (and to the canvas when going back to L3)
+  // Fit the camera to a level once it's laid out (and to the canvas when going back to L3). A level shown before the
+  // canvas has arrived (opened at ?level=) is laid out empty first: it's fitted once it has something to show.
   const shownLevel = level === 3 ? 3 : levelGraph?.level;
+  const levelHasNodes = !!levelGraph?.nodes.length;
   useEffect(() => {
-    if (shownLevel === undefined) return;
-    // Like the visualiser, a level isn't zoomed in past its real size
-    const options = shownLevel === 3 ? FIT_VIEW_OPTIONS : LEVEL_FIT_VIEW_OPTIONS;
-    const frame = requestAnimationFrame(() => void fitView({ ...options, duration: 450 }));
+    if (shownLevel === undefined || (shownLevel !== 3 && !levelHasNodes)) return;
+    const frame = requestAnimationFrame(() => void fitView({ ...fitOptions, duration: 450 }));
     return () => cancelAnimationFrame(frame);
-  }, [shownLevel]);
+  }, [shownLevel, levelHasNodes]);
 
-  /** Lays the canvas out with the visualiser's layout, for everyone on it (everyone's nodes glide there) */
+  /**
+   * Lays the canvas out with the visualiser's layout, for everyone on it (everyone's nodes glide there). On L1 or
+   * L2 it lays out just that level (one step to undo), leaving the canvas as it is.
+   */
   const reorder = useStableCallback(async () => {
-    if (levelRef.current !== 3) setLevel(3);
+    const level = levelRef.current;
+    if (level !== 3) {
+      const content =
+        getDiagramLevel(flow.diagramLevels, level, flow.structureKey) ?? getLevelGraph(nodesRef.current, edgesRef.current, level);
+      // As they're drawn on the level (its cards and boxes aren't the canvas's), where they have been
+      const drawn = new Map(
+        (levelGraphRef.current?.level === level ? levelGraphRef.current.nodes : []).map((node) => [node.id, node.measured])
+      );
+      const laidOut = await layoutGraph(
+        content.nodes.map((node) => ({ ...node, selected: false, ...(drawn.get(node.id) && { measured: drawn.get(node.id) }) })),
+        content.edges
+      );
+      glide();
+      flow.setLevelLayout(level, levelPlaces(laidOut.nodes));
+      setTimeout(() => void fitView({ ...fitOptions, duration: 450 }), 50);
+      return;
+    }
     const positions = await getLayoutPositions(nodesRef.current, edgesRef.current);
     flow.applyPositions(positions);
-    setTimeout(() => void fitView({ ...FIT_VIEW_OPTIONS, duration: 450 }), 50);
+    setTimeout(() => void fitView({ ...fitOptions, duration: 450 }), 50);
   });
   const onReorder = useCallback(() => void reorder(), [reorder]);
 
@@ -684,27 +1036,234 @@ function Canvas({
     const notes = sortedNodes.filter((node) => getNoteLevel(node) === levelShown.level);
     return notes.length ? [...levelShown.nodes, ...notes.map(asLevelNote)] : levelShown.nodes;
   }, [levelShown, sortedNodes]);
-  /** On L1 and L2, only changes to the level's notes go to the canvas (its other nodes are drawn from it) */
+
+  // The legend, as the visualiser's: how many of each kind of node is shown (not what's written on the canvas), and
+  // clicking a kind hides or shows it. Hiding only changes what this person sees.
+  const [hiddenLegendKeys, setHiddenLegendKeys] = useState<string[]>([]);
+  const toggleLegendKey = useCallback(
+    (key: string) => setHiddenLegendKeys((keys) => (keys.includes(key) ? keys.filter((other) => other !== key) : [...keys, key])),
+    []
+  );
+  // What's shown only changes with what's on it (not as nodes are dragged, on any level)
+  const shownStructure = levelShown ? structureOf(levelShown.nodes) : structure;
+  const legend = useMemo(() => getLegend(shownNodes.filter((node) => !isWrittenOnCanvas(node.type))), [shownStructure]);
+  const shownNodesRef = useRef(shownNodes);
+  shownNodesRef.current = shownNodes;
+  // The nodes shown now (on L1 and L2 they're the level's, where they are there)
+  const shownLookup = () => new Map<string, Node>(shownNodesRef.current.map((node) => [node.id, node]));
+
+  // ---- Hotspots: what's flagged for people to know (risks, problems, the key parts), on nodes or places ----
+
+  const [hotspotDraft, setHotspotDraft] = useState<HotspotDraft | null>(null);
+  const [openHotspot, setOpenHotspot] = useState<string | null>(null);
+  const [listingHotspots, setListingHotspots] = useState(false);
+  // The node a hotspot being dragged would go on: it lights up in the hotspot's colour
+  const [hotspotDropTarget, setHotspotDropTarget] = useState<{ nodeId: string; severity: HotspotSeverity } | null>(null);
+  // Hotspots where they show on this level: on L3 on their node (or at their place); on L1 and L2 on their node if
+  // it's shown, else on what it's in that is (so they're found from the overview). From what's on the canvas and the
+  // level, read through refs: the nodes arrays are new on every drag frame, and which node holds which doesn't
+  // change while things move.
+  const hotspotSpots = useMemo((): HotspotSpot[] => {
+    const canvas = new Map(nodesRef.current.map((node) => [node.id, node]));
+    const shown = new Set(shownNodesRef.current.map((node) => node.id));
+    const onNodes = new Map<string, Hotspot[]>();
+    const holding = new Set<string>();
+    const places: HotspotSpot[] = [];
+    // The node itself if it's shown, else the nearest container of it that is
+    const shownAround = (id: string | undefined) => {
+      while (id && !shown.has(id)) id = canvas.get(id)?.parentId;
+      return id;
+    };
+    for (const hotspot of flow.hotspots) {
+      let target = hotspot.nodeId && canvas.has(hotspot.nodeId) ? hotspot.nodeId : undefined;
+      if (!target) {
+        if ((hotspot.level ?? 3) === level)
+          places.push({ key: `place:${hotspot.id}`, position: hotspot.position, hotspots: [hotspot] });
+        continue;
+      }
+      const own = target;
+      target = shownAround(own);
+      // Not in anything shown (e.g. a message on L2): on what it's connected to (its sender first), or what that's in
+      if (!target) {
+        const linked = flow.edges
+          .filter((edge) => edge.source === own || edge.target === own)
+          .sort((a) => (a.target === own ? -1 : 1));
+        target = linked.map((edge) => shownAround(edge.source === own ? edge.target : edge.source)).find(Boolean);
+      }
+      if (!target) continue;
+      if (target !== hotspot.nodeId) holding.add(target);
+      onNodes.set(target, [...(onNodes.get(target) ?? []), hotspot]);
+    }
+    return [
+      ...[...onNodes].map(([nodeId, hotspots]) => ({ key: `node:${nodeId}`, nodeId, hotspots, inside: holding.has(nodeId) })),
+      ...places,
+    ];
+  }, [flow.hotspots, structure, shownStructure, flow.edges, level]);
+
+  const visibleNodes = useMemo(() => {
+    // A node with hotspots glows in the colour of the most important (see studio.css)
+    const glowing = new Map(
+      hotspotSpots.flatMap((spot) => (spot.nodeId ? [[spot.nodeId, topSeverity(spot.hotspots)] as const] : []))
+    );
+    const dropOn = hotspotDropTarget?.nodeId;
+    if (!hiddenLegendKeys.length && !glowing.size && !dropOn) return shownNodes;
+    return shownNodes.map((node) => {
+      const hidden = hiddenLegendKeys.includes(node.type ?? '');
+      const severity = glowing.get(node.id);
+      const target = node.id === dropOn;
+      if (!hidden && !severity && !target) return node;
+      const classes = [
+        node.className,
+        severity && `studio-hotspot studio-hotspot-${severity}`,
+        target && `studio-hotspot-drop studio-hotspot-drop-${hotspotDropTarget!.severity}`,
+      ];
+      return asShown(node, hidden, classes.filter(Boolean).join(' '));
+    });
+  }, [shownNodes, hiddenLegendKeys, hotspotSpots, hotspotDropTarget]);
+
+  const startHotspot = useStableCallback((at: HotspotDraft) => {
+    setOpenHotspot(null);
+    setDraft(null);
+    setHotspotDraft(at);
+    setTool('select');
+  });
+  const createHotspot = useStableCallback((fields: HotspotFields) => {
+    if (!hotspotDraft) return;
+    flow.createHotspot({
+      ...fields,
+      ...(hotspotDraft.nodeId ? { nodeId: hotspotDraft.nodeId } : hotspotDraft.level && { level: hotspotDraft.level }),
+      position: hotspotDraft.position,
+      author,
+    });
+    setHotspotDraft(null);
+  });
+  const cancelHotspot = useCallback(() => setHotspotDraft(null), []);
+  const deleteHotspot = useStableCallback((id: string) => flow.deleteHotspot(id));
+  // Dragged onto a node (they move with it), or to a place; open where it lands if it was open
+  const moveHotspots = useStableCallback((ids: string[], to: { nodeId?: string; position: XYPosition }) => {
+    const at = to.nodeId ? {} : placeLevel();
+    ids.forEach((id) =>
+      flow.updateHotspot(id, { nodeId: to.nodeId, position: to.position, level: 'level' in at ? at.level : undefined })
+    );
+    setOpenHotspot((open) => (open ? (to.nodeId ? `node:${to.nodeId}` : ids.length === 1 ? `place:${ids[0]}` : null) : open));
+  });
+  // From the list (or inside a node on L1 and L2): the canvas goes to it, and it opens
+  const goToHotspot = useStableCallback((hotspot: Hotspot) => {
+    // On a node shown here, it's here; on another, on L3; at a place, on its level
+    const shownHere = hotspot.nodeId && shownLookup().has(hotspot.nodeId);
+    const target = shownHere ? levelRef.current : hotspot.nodeId ? 3 : (hotspot.level ?? 3);
+    if (target !== levelRef.current) changeLevel(target);
+    const nodes = shownHere ? shownLookup() : lookupNodes();
+    const node = hotspot.nodeId ? nodes.get(hotspot.nodeId) : undefined;
+    const at = node ? getAbsolutePosition(node, nodes) : hotspot.position;
+    const width = node ? (node.measured?.width ?? node.width ?? 0) : 0;
+    void setCenter(at.x + width / 2 + 120, at.y + 80, { zoom: Math.max(getZoom(), 0.8), duration: 300 });
+    setHotspotDraft(null);
+    setOpenHotspot(node ? `node:${node.id}` : `place:${hotspot.id}`);
+    setListingHotspots(false);
+  });
+  const nameOfNode = useStableCallback((id: string) => {
+    const node = nodesRef.current.find((candidate) => candidate.id === id);
+    return node ? getNodeName(node.type, node.data, id) : undefined;
+  });
+  const toggleHotspotList = useCallback(() => {
+    setListingComments(false);
+    setListingHotspots((shown) => !shown);
+  }, []);
+  const hotspotsCount = flow.hotspots.length;
+  const hotspotsSeverity = topSeverity(flow.hotspots);
+  // What the bottom left controls show (the same objects while that's the same: they're memoised)
+  const hotspotsControl = useMemo(
+    () => ({ count: hotspotsCount, severity: hotspotsSeverity, onToggle: toggleHotspotList, active: listingHotspots }),
+    [hotspotsCount, hotspotsSeverity, toggleHotspotList, listingHotspots]
+  );
+
+  // A node's details open from its Edit button (and by double clicking it): one selected node on the canvas
+  const selectedNodes = visibleNodes.filter((node) => node.selected);
+  const toEdit =
+    selectedNodes.length === 1 &&
+    !isWrittenOnCanvas(selectedNodes[0].type) &&
+    nodesRef.current.some((node) => node.id === selectedNodes[0].id)
+      ? selectedNodes[0]
+      : undefined;
+  const editSelected = useStableCallback(() => toEdit && setEditingId(toEdit.id));
+  /**
+   * Changes on L1 and L2. The level's notes are on the canvas, so changes to them go there; removing something
+   * removes it from the canvas (the level is drawn from it); and moving or resizing something arranges the level,
+   * kept when it's dropped.
+   */
   const onLevelNodesChange = useStableCallback((changes: NodeChange[]) => {
-    const notes = new Set(nodesRef.current.filter((node) => getNoteLevel(node) === levelRef.current).map((node) => node.id));
-    const ofNotes = changes.filter((change) => change.type !== 'add' && notes.has(change.id));
+    const level = levelRef.current;
+    const current = levelGraphRef.current;
+    if (level === 3 || !current) return;
+    const notes = new Set(nodesRef.current.filter((node) => getNoteLevel(node) === level).map((node) => node.id));
+    const isNote = (change: NodeChange) => 'id' in change && notes.has(change.id);
+    const ofNotes = changes.filter((change) => change.type !== 'add' && isNote(change));
     if (ofNotes.length) flow.onNodesChange(ofNotes);
+
+    const ofLevel = changes.filter((change) => !isNote(change) && change.type !== 'add');
+    const onCanvas = new Set(nodesRef.current.map((node) => node.id));
+    const removed = ofLevel.flatMap((change) => (change.type === 'remove' && onCanvas.has(change.id) ? [change.id] : []));
+    if (removed.length) flow.deleteNodes(removed);
+    const arranging = ofLevel.filter((change) => change.type !== 'remove');
+    if (!arranging.length) return;
+    const nodes = applyNodeChanges(arranging, current.nodes);
+    updateLevelGraph({ ...current, nodes });
+    const done = new Set(
+      arranging.flatMap((change) =>
+        (change.type === 'position' && change.dragging === false) || (change.type === 'dimensions' && change.resizing === false)
+          ? [change.id]
+          : []
+      )
+    );
+    if (done.size) flow.setLevelLayout(level, levelPlaces(nodes.filter((node) => done.has(node.id))));
+    // Something just added, now it's measured: centred where it was dropped, from where it is now (a container it's in
+    // may have grown around it), in one step to undo with adding it
+    const measured = arranging.flatMap((change) => {
+      const dropped = change.type === 'dimensions' && change.dimensions && centring.current.get(change.id);
+      const node = dropped && nodes.find((candidate) => candidate.id === change.id);
+      if (!dropped || !node) return [];
+      centring.current.delete(change.id);
+      const { width, height } = change.dimensions!;
+      const { x, y } = node.position;
+      const place = { x: x + (dropped.size.width - width) / 2, y: y + (dropped.size.height - height) / 2 };
+      return dropped.level === level ? [[change.id, place] as const] : [];
+    });
+    if (measured.length) flow.setLevelLayout(level, new Map(measured));
+  });
+  /** Connecting two things on L1 or L2 connects them on the canvas (e.g. a relationship between two systems) */
+  const onLevelConnect = useStableCallback((connection: Connection) => {
+    const onCanvas = new Set(nodesRef.current.map((node) => node.id));
+    if (onCanvas.has(connection.source) && onCanvas.has(connection.target)) flow.onConnect(connection);
   });
-  // Message edges' envelopes only move on what's selected (the edge, or a node at either end): any moving
-  // envelope at all costs a style recalc and layout every frame, which an editing canvas can't afford at idle
+  // Message edges' envelopes only move under the pointer (the connection, or a node at either end): any moving
+  // envelope needs a main-thread frame on every frame (one selected node's cost ~200–300 ms of every 3 seconds and
+  // dropped frames), which an editing canvas can't afford at idle
+  // (on L1 and L2, the level's edges: the level itself changes on every frame something on it is dragged)
+  const [hovered, setHovered] = useState<{ node?: string; edge?: string }>({});
+  const onNodeMouseEnter = useCallback((_: ReactMouseEvent, node: Node) => setHovered({ node: node.id }), []);
+  const onEdgeMouseEnter = useCallback((_: ReactMouseEvent, edge: Edge) => setHovered({ edge: edge.id }), []);
+  const onHoverEnd = useCallback(() => setHovered({}), []);
+  const levelEdges = levelShown?.edges;
   const shownEdges = useMemo(() => {
-    const edges = levelShown ? levelShown.edges : flow.edges;
-    const focused = new Set(selectedKey ? selectedKey.split(',') : []);
+    const edges = levelEdges ?? flow.edges;
     return edges.map((edge) =>
-      edge.type === 'animated' && !edge.selected && !focused.has(edge.source) && !focused.has(edge.target)
+      edge.type === 'animated' && edge.id !== hovered.edge && edge.source !== hovered.node && edge.target !== hovered.node
         ? withoutEnvelope(edge)
         : edge
     );
-  }, [levelShown, flow.edges, selectedKey]);
-  const unavailableLevels = useMemo(
-    () => ({ 1: getLevelUnavailableReason(nodesRef.current, 1), 2: getLevelUnavailableReason(nodesRef.current, 2) }),
-    [structure]
-  );
+  }, [levelEdges, flow.edges, hovered]);
+  // A canvas opened from a diagram has the levels the diagram has (until what's on it changes)
+  const unavailableLevels = useMemo(() => {
+    const reason = (level: 1 | 2) => {
+      if (getDiagramLevel(flow.diagramLevels, level, flow.structureKey)) return undefined;
+      return (
+        getDiagramLevelUnavailable(flow.diagramLevels, level, flow.structureKey) ??
+        getLevelUnavailableReason(nodesRef.current, level)
+      );
+    };
+    return { 1: reason(1), 2: reason(2) };
+  }, [structure, flow.structureKey, flow.diagramLevels]);
 
   // ---- People and agents ----
 
@@ -722,9 +1281,108 @@ function Canvas({
   const [following, setFollowing] = useState(followChanges);
   const toggleFollowing = useCallback(() => setFollowing((on) => !on), []);
 
-  const [shareOpen, setShareOpen] = useState(false);
-  const openShare = useCallback(() => setShareOpen(true), []);
+  const [shareOpen, setShareOpen] = useState<false | 'choose' | 'invite'>(false);
+  const openShare = useCallback(() => setShareOpen('choose'), []);
+  const openLiveCollaboration = useCallback(() => setShareOpen('invite'), []);
   const closeShare = useCallback(() => setShareOpen(false), []);
+  const [helpOpen, setHelpOpen] = useState(false);
+  const openHelp = useCallback(() => setHelpOpen(true), []);
+  const closeHelp = useCallback(() => setHelpOpen(false), []);
+
+  // ---- Files and images (as Studio on the web's: the same .eventcatalog files, so diagrams move between them) ----
+
+  // A short message at the top (a file that couldn't be opened or saved)
+  const [notice, setNotice] = useState<string>();
+  useEffect(() => {
+    if (!notice) return;
+    const timer = setTimeout(() => setNotice(undefined), 6000);
+    return () => clearTimeout(timer);
+  }, [notice]);
+  /** The canvas as a diagram (the model a .eventcatalog file holds) */
+  const canvasModel = () =>
+    canvasToModel(
+      nodesRef.current,
+      edgesRef.current,
+      flow.levelLayouts,
+      { title: flow.title || 'Untitled canvas', resources: [], relations: [] },
+      comments.threads,
+      flow.hotspots
+    );
+  const saveToFile = useStableCallback(() => {
+    const text = toDiagramFile(canvasModel());
+    downloadFile({ name: fileNameFor(flow.title || 'canvas', DIAGRAM_FILE_EXTENSION), mimeType: 'application/json', text });
+  });
+  const exportImage = useStableCallback(async () => {
+    const image = canvasRef.current && (await canvasImage(canvasRef.current));
+    if (!image) return setNotice('Nothing to export yet: put something on the canvas first.');
+    downloadFile({ name: fileNameFor(flow.title || 'canvas', '.png'), mimeType: 'image/png', base64: image.split(',')[1] });
+  });
+  /**
+   * A .eventcatalog file (from Studio on the web, or saved here), opened on this canvas while it's empty, else as a
+   * new canvas (this one stays as it is)
+   */
+  const openFile = useStableCallback(async () => {
+    if (!canvasesApiUrl) return;
+    const file = await pickDiagramFile();
+    if (!file) return;
+    const opened = await readDiagramFile(file);
+    if ('error' in opened) return setNotice(opened.error);
+    try {
+      const content = await modelToCanvas(opened.model);
+      if (!nodesRef.current.length && !comments.threads.length && !flow.hotspots.length) {
+        flow.addContent(content);
+        if (!flow.title || flow.title === 'Untitled canvas') flow.rename(opened.model.title);
+        setTimeout(() => void fitView({ ...fitOptions, duration: 450 }), 100);
+        return;
+      }
+      const created = await createCanvasThroughApi(canvasesApiUrl, { title: opened.model.title, createdBy: name });
+      if (!keepOpened(created.id, content))
+        return setNotice("Couldn't open it in a new canvas here (this browser's storage is blocked).");
+      window.location.assign(created.url);
+    } catch (error) {
+      setNotice(error instanceof Error ? error.message : "Couldn't open that file.");
+    }
+  });
+  // A file opened into this canvas (just made for it): put on it once it's loaded, if it's still empty
+  useEffect(() => {
+    if (!flow.synced) return;
+    const content = takeOpened(canvasId);
+    if (!content || nodesRef.current.length) return;
+    flow.addContent(content);
+    setTimeout(() => void fitView({ ...fitOptions, duration: 450 }), 100);
+  }, [flow.synced, canvasId]);
+  useHotkeys('mod+o', () => void openFile(), { preventDefault: true, enabled: !!canvasesApiUrl });
+  useHotkeys('mod+s', () => saveToFile(), { preventDefault: true });
+  useHotkeys('mod+shift+e', () => void exportImage(), { preventDefault: true });
+  // ? for help (by the character typed, so it works on every keyboard layout)
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if ((event.target as HTMLElement)?.closest?.('input, textarea, [contenteditable]')) return;
+      if (event.key === '?') {
+        event.preventDefault();
+        setHelpOpen(true);
+      }
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, []);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const openDelete = useCallback(() => setDeleteOpen(true), []);
+  const closeDelete = useCallback(() => setDeleteOpen(false), []);
+  // Deleted here: on the way to Studio. Set before asking, since the server closes the canvas before it answers
+  // (the canvas closing as it's deleted isn't news)
+  const [leaving, setLeaving] = useState(false);
+  const deleteCanvas = useStableCallback(async () => {
+    if (!canvasesApiUrl) return;
+    setLeaving(true);
+    try {
+      await deleteCanvasThroughApi(canvasesApiUrl, canvasId);
+    } catch (error) {
+      setLeaving(false);
+      throw error;
+    }
+    window.location.assign(studioUrl ?? '/');
+  });
   const [connectOpen, setConnectOpen] = useState(false);
   const openConnect = useCallback(() => setConnectOpen(true), []);
   const closeConnect = useCallback(() => setConnectOpen(false), []);
@@ -764,11 +1422,26 @@ function Canvas({
     { preventDefault: true }
   );
   // On every level: notes are changed on L1 and L2 too (and the levels show what's undone on the canvas)
-  useHotkeys('mod+z', () => flow.undo(), { preventDefault: true });
-  useHotkeys(['mod+shift+z', 'mod+y'], () => flow.redo(), { preventDefault: true });
-  useHotkeys('c', () => onCanvas() && setCommentMode((on) => !on));
+  useHotkeys('mod+z', () => !lockedRef.current && flow.undo(), { preventDefault: true });
+  useHotkeys(['mod+shift+z', 'mod+y'], () => !lockedRef.current && flow.redo(), { preventDefault: true });
+  // Drawing tools' keys: V to select, H for the hand, N, T, C and A to put something down, 1-3 for the levels,
+  // Shift+1 to fit
+  useHotkeys('n', () => pickTool('note'));
+  useHotkeys('t', () => pickTool('text'));
+  useHotkeys('c', () => pickTool('comment'));
+  // A for attention: a hotspot
+  useHotkeys('a', () => pickTool('hotspot'));
+  useHotkeys('v', () => setTool('select'));
+  useHotkeys('h', () => setTool('hand'));
+  useHotkeys(['1', '2', '3'], (event) => {
+    const next = Number(event.code.replace('Digit', '')) as Level;
+    if (next === 3 || !unavailableLevels[next]) changeLevel(next);
+  });
+  useHotkeys('shift+1', () => void fitView({ ...fitOptions, duration: 500 }), { useKey: false });
   useHotkeys('escape', () => {
-    setCommentMode(false);
+    setHotspotDraft(null);
+    setOpenHotspot(null);
+    setTool('select');
     setDraft(null);
     setOpenThreadId(null);
     clearSelectedThreads();
@@ -786,20 +1459,48 @@ function Canvas({
     comments.deleteThreads([...selectedThreads]);
     clearSelectedThreads();
   });
-  const toggleCommentMode = useCallback(() => setCommentMode((on) => !on), []);
+  /** A tool that puts something down: picked, or put back to selecting if it was already */
+  const pickTool = useStableCallback((next: 'text' | 'note' | 'comment' | 'hotspot') => {
+    // (comments can be left on a locked canvas: reviewing it changes nothing on it)
+    if (lockedRef.current && next !== 'comment') return;
+    // Comments are pinned to the canvas people edit (L3)
+    if (next === 'comment' && levelRef.current !== 3) changeLevel(3);
+    setTool((current) => (current === next ? 'select' : next));
+  });
+  const toggleCommentMode = useCallback(() => pickTool('comment'), [pickTool]);
+  const toggleNoteMode = useCallback(() => pickTool('note'), [pickTool]);
+  const toggleTextMode = useCallback(() => pickTool('text'), [pickTool]);
+  const toggleHotspotMode = useCallback(() => pickTool('hotspot'), [pickTool]);
+  const selectTool = useCallback(() => setTool('select'), []);
+  const handTool = useCallback(() => setTool('hand'), []);
+  const toggleLock = useStableCallback(() => {
+    setTool('select');
+    flow.setLocked(lockedRef.current ? null : name);
+  });
 
   const startComment = (anchor: CommentAnchor) => {
     setOpenThreadId(null);
     setDraft(anchor);
-    setCommentMode(false);
+    setTool('select');
   };
 
   const flowPositionOf = (event: { clientX: number; clientY: number }) =>
     screenToFlowPosition({ x: event.clientX, y: event.clientY });
 
+  // A place on L1 or L2 is on that level (they're laid out on their own): what's put there says so
+  const placeLevel = () => (levelRef.current === 3 ? {} : { level: levelRef.current as 1 | 2 });
   const onPaneClick = useStableCallback((event: ReactMouseEvent) => {
     clearSelectedThreads();
+    if (tool === 'hand') return;
     if (commentMode && editable) return startComment(anchorAt(flowPositionOf(event)));
+    // Flagging: a hotspot where it's clicked
+    if (tool === 'hotspot') return startHotspot({ position: flowPositionOf(event), ...placeLevel() });
+    // The text and note tools: put where it's clicked, then back to selecting
+    if (placing) {
+      setTool('select');
+      if (tool === 'text') return writeTextAt(flowPositionOf(event));
+      return addNoteAt(flowPositionOf(event));
+    }
     // A click inside a container (not on something in it) selects it: its body lets the pointer through so you can
     // drag a selection box in it, so the click lands on the canvas
     // (after React Flow clears the selection, which it does once this returns)
@@ -811,24 +1512,31 @@ function Canvas({
 
   // Double clicking a node edits its details (notes are edited on the canvas, by double clicking them too)
   const onNodeDoubleClick = useStableCallback((_: ReactMouseEvent, node: Node) => {
-    if (editable && !isWrittenOnCanvas(node.type)) setEditingId(node.id);
+    // On L1 and L2 too: what's there is on the canvas (a system card is the system)
+    if (!isWrittenOnCanvas(node.type) && nodesRef.current.some((other) => other.id === node.id)) setEditingId(node.id);
   });
   // ...and inside a container (not on something in it): its body lets the pointer through, so it's on the canvas
+  // ...and anywhere else on the canvas writes there, as on Excalidraw's (and Studio on the web's)
   const onCanvasDoubleClick = useStableCallback((event: ReactMouseEvent) => {
-    if (!editable || !(event.target as Element).classList?.contains('react-flow__pane')) return;
-    const container = findGroupAtPoint(flowPositionOf(event), nodesRef.current);
-    if (container) setEditingId(container.id);
+    if (!(event.target as Element).classList?.contains('react-flow__pane')) return;
+    const container = editable ? findGroupAtPoint(flowPositionOf(event), nodesRef.current) : undefined;
+    if (container) return setEditingId(container.id);
+    if (!lockedRef.current) writeTextAt(flowPositionOf(event));
   });
 
   const onNodeClick = useStableCallback((event: ReactMouseEvent, node: Node) => {
     // Clicking one node selects just it (with shift or ⌘, it's added to what's selected)
     if (!event.shiftKey && !event.metaKey) clearSelectedThreads();
+    // Not on notes and text: they're written on, not what's being flagged or commented on
+    if (isWrittenOnCanvas(node.type)) return;
+    // A hotspot on it (it shows on the node, wherever it goes, on every level it's on)
+    if (tool === 'hotspot') return startHotspot({ nodeId: node.id, position: flowPositionOf(event) });
     if (commentMode && editable) startComment(anchorAt(flowPositionOf(event), node, lookupNodes()));
   });
 
   const openContextMenu = useStableCallback((event: ReactMouseEvent | MouseEvent, node?: Node) => {
     event.preventDefault();
-    if (!editable) return;
+    if (!editable || lockedRef.current) return;
     setContextMenu({ x: event.clientX, y: event.clientY, flowPosition: flowPositionOf(event), node });
   });
   const onPaneContextMenu = useCallback((event: ReactMouseEvent | MouseEvent) => openContextMenu(event), [openContextMenu]);
@@ -849,6 +1557,26 @@ function Canvas({
     if (contextMenu?.node) setEditingId(contextMenu.node.id);
     setContextMenu(null);
   });
+  /** A sticky note where the menu was opened, or to the right of the node right clicked (about it) */
+  const noteFromMenu = useStableCallback(() => {
+    if (!contextMenu) return;
+    const node = contextMenu.node && lookupNodes().get(contextMenu.node.id);
+    if (node) {
+      const at = getAbsolutePosition(node, lookupNodes());
+      const width = node.measured?.width ?? node.width ?? 240;
+      addNoteAt({ x: at.x + width + 140, y: at.y + 88 });
+    } else addNoteAt(contextMenu.flowPosition);
+    setContextMenu(null);
+  });
+  const hotspotFromMenu = useStableCallback(() => {
+    if (!contextMenu) return;
+    startHotspot({ ...(contextMenu.node ? { nodeId: contextMenu.node.id } : placeLevel()), position: contextMenu.flowPosition });
+    setContextMenu(null);
+  });
+  const reorderFromMenu = useStableCallback(() => {
+    setContextMenu(null);
+    onReorder();
+  });
   const copyFromMenu = useStableCallback(() => {
     // Through the copy event, so it's copied like ⌘C (to the system clipboard too)
     copyOnly.current = menuTargets();
@@ -871,6 +1599,7 @@ function Canvas({
   });
 
   const openThread = useStableCallback((thread: Thread) => {
+    setListingComments(false);
     const { x, y } = getAnchorPosition(thread, lookupNodes());
     // Leave room for the thread, which opens to the right of its pin
     void setCenter(x + 150, y, { zoom: getZoom(), duration: 300 });
@@ -878,6 +1607,18 @@ function Canvas({
     setOpenThreadId(thread.id);
   });
   const toggleResolved = useCallback(() => setShowResolved((show) => !show), []);
+  const [panelTab, setPanelTab] = useState<LeftPanelTab>('components');
+  // All the comments, listed over the bottom left controls (as Studio on the web's): clicking one goes to it
+  const [listingComments, setListingComments] = useState(false);
+  const toggleCommentList = useCallback(() => {
+    setListingHotspots(false);
+    setListingComments((shown) => !shown);
+  }, []);
+  const openComments = comments.threads.filter((thread) => !thread.resolved).length;
+  const commentsControl = useMemo(
+    () => ({ open: openComments, onToggle: toggleCommentList, active: listingComments }),
+    [openComments, toggleCommentList, listingComments]
+  );
   const openThreadById = useCallback((id: string | null) => {
     setDraft(null);
     setOpenThreadId(id);
@@ -909,16 +1650,37 @@ function Canvas({
       })
     );
   }, [selectedKey]);
-  // The node whose details are being edited in the panel: opened by double clicking it, or "Edit details" in its
-  // menu (selecting a node doesn't open it). Notes are edited on the canvas.
+  // The node whose details are being edited in its card: opened with the edit button over it, by double clicking it,
+  // or "Edit details" in its menu (selecting a node doesn't open it). Notes are edited on the canvas.
   const [editingId, setEditingId] = useState<string | null>(null);
-  const editing =
-    editable && editingId ? flow.nodes.find((node) => node.id === editingId && !isWrittenOnCanvas(node.type)) : undefined;
-  // What the panel shows (not the node's position, so dragging it doesn't re-render the panel)
+  const editing = editingId ? flow.nodes.find((node) => node.id === editingId && !isWrittenOnCanvas(node.type)) : undefined;
+  // What the card shows (not the node's position, so dragging it doesn't re-render the card)
   const inspected = useMemo(
     () => (editing ? { id: editing.id, type: editing.type, data: editing.data } : null),
     [editing?.id, editing?.type, editing?.data]
   );
+  // The domain or system it's in
+  const parent = editing?.parentId ? flow.nodes.find((node) => node.id === editing.parentId) : undefined;
+  const inspectedParent = parent ? String(getResource(parent.type, parent.data).name ?? '') || undefined : undefined;
+  // What it's connected to, for its card
+  const inspectedConnections = useMemo((): NodeConnection[] => {
+    if (!editingId) return [];
+    const byId = new Map(flow.nodes.map((node) => [node.id, node]));
+    return flow.edges.flatMap((edge) => {
+      const outgoing = edge.source === editingId;
+      if (!outgoing && edge.target !== editingId) return [];
+      const other = byId.get(outgoing ? edge.target : edge.source);
+      if (!other || isWrittenOnCanvas(other.type)) return [];
+      const name = String(getResource(other.type, other.data).name ?? '') || getNodeLabel(other.type);
+      return [{ id: other.id, name, type: other.type, label: typeof edge.label === 'string' ? edge.label : undefined, outgoing }];
+    });
+  }, [editingId, flow.nodes, flow.edges]);
+  // Goes to a node it's connected to, and shows its card
+  const openConnected = useStableCallback((id: string) => {
+    setEditingId(id);
+    select(new Set([id]));
+    void fitView({ nodes: [{ id }], duration: 400, padding: 0.3, maxZoom: 1.2 });
+  });
   const closePanel = useCallback(() => setEditingId(null), []);
   // An accepted or rejected canvas, and when it was decided
   const { status: canvasStatus, history: statusHistory } = flow.canvasStatus;
@@ -929,233 +1691,400 @@ function Canvas({
   return (
     <UpdateNodeDataContext.Provider value={flow.updateNodeData}>
       <DropTargetContext.Provider value={dropTargetId}>
-        <div className="flex h-full min-h-0 text-[rgb(var(--ec-page-text))]">
-          <LeftPanel
-            resources={resources}
-            keysOnCanvas={keysOnCanvas}
-            onAddComponent={addComponent}
-            onAddResource={addResourceFromPanel}
-            threads={comments.threads}
-            showResolved={showResolved}
-            onToggleResolved={toggleResolved}
-            onOpenThread={openThread}
-          />
-
-          <div
-            ref={canvasRef}
-            className={`eventcatalog-visualizer studio-canvas relative flex-1 min-w-0 ${commentMode ? 'comment-mode' : ''} ${
-              transitioning ? 'is-layout-transition' : ''
-            }`}
-            onPointerMove={trackPointer}
-            onPointerLeave={clearPointer}
-            onDoubleClick={onCanvasDoubleClick}
-          >
-            <ReactFlow
-              nodes={shownNodes}
-              edges={shownEdges}
-              nodeTypes={nodeTypes}
-              edgeTypes={edgeTypes}
-              nodesDraggable={editable}
-              nodesConnectable={editable}
-              elementsSelectable={editable}
-              onNodesChange={editable ? flow.onNodesChange : onLevelNodesChange}
-              onEdgesChange={editable ? flow.onEdgesChange : undefined}
-              onConnect={flow.onConnect}
-              // Drag either end of a connection to another node (dropped anywhere else, it stays where it was)
-              edgesReconnectable={editable}
-              onReconnect={editable ? flow.onReconnect : undefined}
-              reconnectRadius={RECONNECT_RADIUS}
-              onDragOver={onDragOver}
-              onMoveStart={onMoveStart}
-              onMoveEnd={onMoveEnd}
-              onNodeDragStart={onNodeDragStart}
-              onNodeDrag={onNodeDrag}
-              onNodeDragStop={onNodeDragStop}
-              onDrop={onDrop}
-              onPaneClick={onPaneClick}
-              onNodeClick={onNodeClick}
-              onNodeDoubleClick={onNodeDoubleClick}
-              onError={onFlowError}
-              onSelectionStart={clearSelectedThreads}
-              onPaneContextMenu={onPaneContextMenu}
-              onNodeContextMenu={onNodeContextMenu}
-              connectionLineType={ConnectionLineType.SmoothStep}
-              connectionRadius={40}
-              deleteKeyCode={DELETE_KEYS}
-              multiSelectionKeyCode={MULTI_SELECTION_KEYS}
-              selectionOnDrag={editable}
-              // Read only levels can't select: dragging pans them
-              panOnDrag={editable ? PAN_BUTTONS : true}
-              panOnScroll
-              zoomActivationKeyCode={ZOOM_KEYS}
-              zoomOnDoubleClick={false}
-              minZoom={0.1}
-              maxZoom={2}
-            >
-              <Background gap={10} bgColor="rgb(var(--ec-page-bg))" color="rgb(var(--ec-page-border))" />
-              <ViewportSharer onChange={flow.setViewport} />
-              {/* Pointers, selections and comments are on the canvas people edit (L3) */}
-              {editable && <RemotePresence store={flow.presence} clientId={flow.clientId} />}
-              {editable && (
-                <CommentLayer
-                  threads={comments.threads}
-                  author={author}
-                  openThreadId={openThreadId}
-                  draft={draft}
-                  showResolved={showResolved}
-                  onOpen={openThreadById}
-                  onCreate={createThread}
-                  onCancelDraft={cancelDraft}
-                  onReply={comments.reply}
-                  onResolve={comments.setResolved}
-                  onMove={comments.moveThread}
-                  onMoveDraft={setDraft}
-                  onDelete={deleteThread}
-                  selectedIds={selectedThreads}
-                  selectionOffset={threadsOffset}
-                />
-              )}
-            </ReactFlow>
-
-            <AgentActivity
-              store={flow.presence}
-              clientId={flow.clientId}
-              enabled={editable}
-              following={following}
-              onToggleFollowing={toggleFollowing}
-              pauseRef={pauseCamera}
-            />
-
-            {!editable && (
-              <div className="absolute left-1/2 top-16 z-10 flex -translate-x-1/2 items-center gap-3 rounded-full border px-4 py-1.5 text-xs shadow-sm bg-[rgb(var(--ec-accent-subtle))] border-[rgb(var(--ec-accent)/0.3)] text-[rgb(var(--ec-page-text))]">
-                <span>
-                  <span className="font-semibold">L{level}</span> · {LEVELS.find((entry) => entry.level === level)?.description} ·
-                  read only, sticky notes can be added
-                </span>
-                <button onClick={editInL3} className="font-semibold text-[rgb(var(--ec-accent))] hover:underline">
-                  Edit in L3
-                </button>
-              </div>
-            )}
-
-            {/* Accepted or rejected: still editable, but changing it makes it a draft again (for everyone) */}
-            {editable && decided && (
-              <div
-                className={`absolute left-1/2 top-16 z-10 flex max-w-[calc(100%-2rem)] -translate-x-1/2 items-center gap-2 rounded-full border px-4 py-1.5 text-xs shadow-sm ${CANVAS_STATUS_LOOK[decided.status].pill}`}
-              >
-                <span className="truncate">
-                  <span className="font-semibold">{CANVAS_STATUS_LOOK[decided.status].label}</span>
-                  {decided.change && ` by ${decided.change.by.name} · ${timeAgo(decided.change.at)}`}
-                  {decided.change?.note && ` · “${decided.change.note}”`} · changing it moves it back to Draft
-                </span>
-              </div>
-            )}
-
-            <CanvasControls
-              level={level}
-              onLevelChange={changeLevel}
-              unavailableLevels={unavailableLevels}
-              editable={editable}
-              onReorder={onReorder}
-              canUndo={flow.canUndo}
-              canRedo={flow.canRedo}
-              onUndo={flow.undo}
-              onRedo={flow.redo}
-              commentMode={commentMode}
-              onToggleCommentMode={toggleCommentMode}
-              onAddNote={addNote}
-            />
-
-            <CanvasContextMenu
-              menu={contextMenu}
-              onAddComment={commentFromMenu}
-              onEditDetails={editFromMenu}
-              onCopy={copyFromMenu}
-              onDuplicate={duplicateFromMenu}
-              onPaste={lastCopied ? pasteFromMenu : undefined}
-              onDeleteNode={deleteFromMenu}
-              onClose={closeContextMenu}
-            />
-
-            <CanvasHeader
-              title={flow.title}
-              onRetitle={flow.rename}
-              status={flow.status}
-              transport={flow.transport}
-              presence={flow.presence}
-              clientId={flow.clientId}
-              onJumpTo={jumpTo}
-              onRename={onRename}
-              onConnectAgent={openConnect}
-              onShare={openShare}
-              webMcp={webMcp}
-              shareUrl={shareUrl}
-              newCanvasUrl={newCanvasUrl}
-              canvasStatus={flow.canvasStatus.status}
-              statusHistory={flow.canvasStatus.history}
-              onStatusChange={flow.changeStatus}
-            />
-
-            {/* Only on an empty canvas (not over comments people have left on it) */}
-            {flow.status === 'connected' && flow.nodes.length === 0 && comments.threads.length === 0 && !draft && (
-              <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-                <p className="text-sm text-[rgb(var(--ec-page-text-muted))]">
-                  Drag components or catalog resources from the left onto the canvas, then share the link to work on it together.
-                </p>
+        <EditingContext.Provider value={flow.sendEditing}>
+          <StartWritingContext.Provider value={startWriting}>
+            <LockedContext.Provider value={locked}>
+              <div className="flex h-full min-h-0 text-[rgb(var(--ec-page-text))]">
+                <div
+                  ref={canvasRef}
+                  className={`eventcatalog-visualizer studio-canvas relative flex-1 min-w-0 ${commentMode ? 'comment-mode' : ''} ${
+                    transitioning ? 'is-layout-transition' : ''
+                  } ${placing || tool === 'comment' || tool === 'hotspot' ? 'is-placing' : ''} ${tool === 'hand' ? 'is-panning' : ''}`}
+                  onPointerMove={trackPointer}
+                  onPointerLeave={clearPointer}
+                  onDoubleClick={onCanvasDoubleClick}
+                >
+                  <ReactFlow
+                    nodes={visibleNodes}
+                    edges={shownEdges}
+                    onNodeMouseEnter={onNodeMouseEnter}
+                    onNodeMouseLeave={onHoverEnd}
+                    onEdgeMouseEnter={onEdgeMouseEnter}
+                    onEdgeMouseLeave={onHoverEnd}
+                    nodeTypes={nodeTypes}
+                    edgeTypes={edgeTypes}
+                    nodesDraggable={!locked && tool !== 'hand'}
+                    nodesConnectable={!locked && tool !== 'hand'}
+                    elementsSelectable={tool !== 'hand'}
+                    onNodesChange={editable ? flow.onNodesChange : onLevelNodesChange}
+                    onEdgesChange={editable ? flow.onEdgesChange : undefined}
+                    onConnect={editable ? flow.onConnect : onLevelConnect}
+                    // Drag either end of a connection to another node (dropped anywhere else, it stays where it was)
+                    edgesReconnectable={editable && !locked}
+                    onReconnect={editable ? flow.onReconnect : undefined}
+                    reconnectRadius={RECONNECT_RADIUS}
+                    onDragOver={locked ? undefined : onDragOver}
+                    onMoveStart={onMoveStart}
+                    onMoveEnd={onMoveEnd}
+                    onNodeDragStart={onNodeDragStart}
+                    onNodeDrag={onNodeDrag}
+                    onNodeDragStop={onNodeDragStop}
+                    onDrop={locked ? undefined : onDrop}
+                    onPaneClick={onPaneClick}
+                    onNodeClick={onNodeClick}
+                    onNodeDoubleClick={onNodeDoubleClick}
+                    onError={onFlowError}
+                    onSelectionStart={clearSelectedThreads}
+                    onPaneContextMenu={onPaneContextMenu}
+                    onNodeContextMenu={onNodeContextMenu}
+                    connectionLineType={ConnectionLineType.SmoothStep}
+                    connectionRadius={40}
+                    deleteKeyCode={locked ? null : DELETE_KEYS}
+                    multiSelectionKeyCode={MULTI_SELECTION_KEYS}
+                    selectionOnDrag={tool !== 'hand'}
+                    // The hand drags the canvas around; otherwise dragging selects (space, the middle button or scrolling pan)
+                    panOnDrag={tool === 'hand' ? true : PAN_BUTTONS}
+                    panOnScroll
+                    zoomActivationKeyCode={ZOOM_KEYS}
+                    zoomOnDoubleClick={false}
+                    minZoom={0.1}
+                    maxZoom={2}
+                  >
+                    <DiagramBackground />
+                    {/* Above the selected node's top right corner: its details, to edit them */}
+                    {toEdit && <EditButton nodeId={toEdit.id} locked={locked} onClick={editSelected} />}
+                    <LegendPanel legend={legend} hiddenKeys={hiddenLegendKeys} onLegendClick={toggleLegendKey} />
+                    <ViewportSharer onChange={flow.setViewport} />
+                    {/* Pointers, selections and comments are on the canvas people edit (L3) */}
+                    {editable && <RemotePresence store={flow.presence} clientId={flow.clientId} />}
+                    {editable && (
+                      <CommentLayer
+                        threads={comments.threads}
+                        author={author}
+                        openThreadId={openThreadId}
+                        draft={draft}
+                        showResolved={showResolved}
+                        onOpen={openThreadById}
+                        onCreate={createThread}
+                        onCancelDraft={cancelDraft}
+                        onReply={comments.reply}
+                        onResolve={comments.setResolved}
+                        onMove={comments.moveThread}
+                        onMoveDraft={setDraft}
+                        onDelete={deleteThread}
+                        selectedIds={selectedThreads}
+                        selectionOffset={threadsOffset}
+                      />
+                    )}
+                    {/* Hotspots on every level (on L1 and L2, on what they're in) */}
+                    <HotspotLayer
+                      spots={hotspotSpots}
+                      openKey={openHotspot}
+                      draft={hotspotDraft}
+                      locked={locked}
+                      movable={!locked}
+                      selectedIds={null}
+                      onMove={moveHotspots}
+                      onDropTarget={setHotspotDropTarget}
+                      onOpen={setOpenHotspot}
+                      onCreate={createHotspot}
+                      onCancelDraft={cancelHotspot}
+                      onUpdate={flow.updateHotspot}
+                      onDelete={deleteHotspot}
+                      onGo={goToHotspot}
+                    />
+                  </ReactFlow>
+
+                  <AgentActivity
+                    store={flow.presence}
+                    clientId={flow.clientId}
+                    enabled={editable}
+                    following={following}
+                    onToggleFollowing={toggleFollowing}
+                    pauseRef={pauseCamera}
+                  />
+
+                  {!editable && (
+                    <div className="absolute left-1/2 top-16 z-10 flex -translate-x-1/2 items-center gap-3 rounded-full border px-4 py-1.5 text-xs shadow-sm bg-[rgb(var(--ec-accent-subtle))] border-[rgb(var(--ec-accent)/0.3)] text-[rgb(var(--ec-page-text))]">
+                      <span>
+                        <span className="font-semibold">L{level}</span> ·{' '}
+                        {LEVELS.find((entry) => entry.level === level)?.description}
+                      </span>
+                      <button onClick={editInL3} className="font-semibold text-[rgb(var(--ec-accent))] hover:underline">
+                        Everything is on L3
+                      </button>
+                    </div>
+                  )}
+
+                  {/* Accepted or rejected: still editable, but changing it makes it a draft again (for everyone) */}
+                  {editable && decided && (
+                    <div
+                      className={`absolute left-1/2 top-16 z-10 flex max-w-[calc(100%-2rem)] -translate-x-1/2 items-center gap-2 rounded-full border px-4 py-1.5 text-xs shadow-sm ${CANVAS_STATUS_LOOK[decided.status].pill}`}
+                    >
+                      <span className="truncate">
+                        <span className="font-semibold">{CANVAS_STATUS_LOOK[decided.status].label}</span>
+                        {decided.change && ` by ${decided.change.by.name} · ${timeAgo(decided.change.at)}`}
+                        {decided.change?.note && ` · “${decided.change.note}”`} · changing it moves it back to Draft
+                      </span>
+                    </div>
+                  )}
+
+                  {/* At the top, as drawing tools have their tools (and Studio on the web has them) */}
+                  <CanvasControls
+                    level={level}
+                    onLevelChange={changeLevel}
+                    unavailableLevels={unavailableLevels}
+                    editable={editable}
+                    locked={locked}
+                    onToggleLock={toggleLock}
+                    lockedBy={flow.lockedBy}
+                    selectMode={tool === 'select'}
+                    onSelectMode={selectTool}
+                    handMode={tool === 'hand'}
+                    onHandMode={handTool}
+                    noteMode={tool === 'note'}
+                    onToggleNoteMode={toggleNoteMode}
+                    textMode={tool === 'text'}
+                    onToggleTextMode={toggleTextMode}
+                    commentMode={commentMode}
+                    onToggleCommentMode={toggleCommentMode}
+                    hotspotMode={tool === 'hotspot'}
+                    onToggleHotspotMode={toggleHotspotMode}
+                  />
+
+                  {/* The palette: components, the catalog and the comments, under the canvas's title */}
+                  {!locked && (
+                    <LeftPanel
+                      level={level}
+                      onShowAll={editInL3}
+                      resources={resources}
+                      keysOnCanvas={keysOnCanvas}
+                      onAddComponent={addComponent}
+                      onAddResource={addResourceFromPanel}
+                      tab={panelTab}
+                      onTabChange={setPanelTab}
+                      startCollapsed={paletteCollapsed}
+                    />
+                  )}
+
+                  {/* All the hotspots, most important first, over the bottom left controls: clicking one goes to it */}
+                  {listingComments && (
+                    <div className="absolute bottom-[64px] left-3 z-20 flex max-h-[min(480px,calc(100%-140px))] w-80 flex-col overflow-hidden rounded-xl border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] shadow-xl">
+                      <div className="flex flex-none items-center justify-between border-b border-[rgb(var(--ec-page-border))] px-3 py-2 text-sm font-semibold">
+                        Comments
+                        <button
+                          type="button"
+                          aria-label="Close"
+                          onClick={toggleCommentList}
+                          className="rounded p-1 text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-content-hover))]"
+                        >
+                          <X className="h-4 w-4" />
+                        </button>
+                      </div>
+                      <div className="flex min-h-0 flex-1 flex-col overflow-y-auto pt-2">
+                        <CommentList
+                          threads={comments.threads}
+                          showResolved={showResolved}
+                          onToggleResolved={toggleResolved}
+                          onOpen={openThread}
+                        />
+                      </div>
+                    </div>
+                  )}
+                  {listingHotspots && (
+                    <div className="absolute bottom-[64px] left-3 z-20 flex max-h-[min(480px,calc(100%-140px))] w-80 flex-col overflow-hidden rounded-xl border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] shadow-xl">
+                      <div className="flex flex-none items-center justify-between border-b border-[rgb(var(--ec-page-border))] px-3 py-2 text-sm font-semibold">
+                        Hotspots
+                        <button
+                          type="button"
+                          aria-label="Close"
+                          onClick={toggleHotspotList}
+                          className="rounded p-1 text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-content-hover))]"
+                        >
+                          <X className="h-4 w-4" />
+                        </button>
+                      </div>
+                      <div className="min-h-0 flex-1 overflow-y-auto">
+                        <HotspotList hotspots={flow.hotspots} nameOf={nameOfNode} onOpen={goToHotspot} />
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Bottom left: zoom, undo and redo (as Excalidraw's), fitting and reordering, the comments and hotspots */}
+                  <div className="absolute bottom-3 left-3 z-10 flex items-center gap-2">
+                    <ViewControls
+                      canUndo={flow.canUndo && !locked}
+                      canRedo={flow.canRedo && !locked}
+                      onUndo={flow.undo}
+                      onRedo={flow.redo}
+                      onReorder={onReorder}
+                      reorderLabel={
+                        editable ? "Reorder diagram (the visualiser's layout)" : `Reorder L${level} (the visualiser's layout)`
+                      }
+                      locked={locked}
+                      fitOptions={fitOptions}
+                      comments={commentsControl}
+                      hotspots={hotspotsControl}
+                    />
+                  </div>
+
+                  <ContextMenu
+                    menu={contextMenu}
+                    onAddComment={commentFromMenu}
+                    onAddHotspot={hotspotFromMenu}
+                    onAddNote={noteFromMenu}
+                    onEditDetails={editFromMenu}
+                    onCopy={copyFromMenu}
+                    onDuplicate={duplicateFromMenu}
+                    onPaste={lastCopied ? pasteFromMenu : undefined}
+                    onReorder={reorderFromMenu}
+                    onDeleteNode={deleteFromMenu}
+                    onClose={closeContextMenu}
+                  />
+
+                  <CanvasHeader
+                    title={flow.title}
+                    onRetitle={flow.rename}
+                    status={flow.status}
+                    transport={flow.transport}
+                    presence={flow.presence}
+                    clientId={flow.clientId}
+                    onJumpTo={jumpTo}
+                    me={author}
+                    onRename={onRename}
+                    onRecolor={onRecolor}
+                    onConnectAgent={openConnect}
+                    onShare={openShare}
+                    onOpenFile={canvasesApiUrl ? openFile : undefined}
+                    onSaveToFile={saveToFile}
+                    onExportImage={exportImage}
+                    onLiveCollaboration={openLiveCollaboration}
+                    onHelp={openHelp}
+                    webMcp={webMcp}
+                    shareUrl={shareUrl}
+                    newCanvasUrl={newCanvasUrl}
+                    canvasStatus={flow.canvasStatus.status}
+                    statusHistory={flow.canvasStatus.history}
+                    onStatusChange={flow.changeStatus}
+                    onDelete={canvasesApiUrl ? openDelete : undefined}
+                  />
+
+                  {flow.deleted && !leaving && (
+                    <div className="absolute inset-0 z-40 flex items-center justify-center bg-[rgb(var(--ec-page-bg)/0.85)] p-4">
+                      <div className="max-w-sm space-y-2 rounded-xl border p-5 text-center shadow-xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))]">
+                        <h2 className="text-base font-semibold">This canvas was deleted</h2>
+                        <p className="text-sm text-[rgb(var(--ec-page-text-muted))]">
+                          Someone deleted it, so it can't be opened or changed any more.
+                        </p>
+                        {studioUrl && (
+                          <a
+                            href={studioUrl}
+                            className="mt-2 inline-flex 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))]"
+                          >
+                            Back to Studio
+                          </a>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Only on an empty canvas (not over comments people have left on it): what it's for, and what to do */}
+                  {flow.status === 'connected' &&
+                    flow.nodes.length === 0 &&
+                    comments.threads.length === 0 &&
+                    flow.hotspots.length === 0 &&
+                    !draft && (
+                      <EmptyCanvas
+                        // Just the hints to the palette, levels and Share (the catalog is around it, not a blank page)
+                        welcome={false}
+                        onOpen={canvasesApiUrl ? openFile : undefined}
+                        onHelp={openHelp}
+                        onConnect={openConnect}
+                        palette={!locked}
+                        live
+                      />
+                    )}
+
+                  {/* The node being edited: its card, next to it (as Studio on the web's) */}
+                  {inspected && (
+                    <NodeDetails
+                      key={inspected.id}
+                      node={inspected}
+                      parentName={inspectedParent}
+                      connections={inspectedConnections}
+                      onOpenNode={openConnected}
+                      containerRef={canvasRef}
+                      locked={locked}
+                      onChange={flow.updateNodeData}
+                      onClose={closePanel}
+                    />
+                  )}
+                </div>
+
+                {chooser && (
+                  <ContainerChooser
+                    kind={chooser.resource.collection === 'domains' ? 'domain' : 'system'}
+                    name={chooser.resource.name}
+                    contents={chooserContents}
+                    position={flowToScreenPosition(chooser.at.point)}
+                    onChoose={choose}
+                    onCancel={cancelChooser}
+                  />
+                )}
+                {connectionsChooser && (
+                  <ConnectionsChooser
+                    resource={connectionsChooser.resource}
+                    groups={connectionsChooser.groups}
+                    position={flowToScreenPosition(connectionsChooser.at.point)}
+                    onChoose={chooseConnections}
+                    onCancel={cancelConnectionsChooser}
+                  />
+                )}
+                {shareOpen && (
+                  <ShareDialog
+                    initialView={shareOpen}
+                    keptInMemory={keptInMemory}
+                    url={agentLink.canvasUrl}
+                    title={flow.title}
+                    presence={flow.presence}
+                    clientId={flow.clientId}
+                    onRename={onRename}
+                    onJumpTo={jumpTo}
+                    onConnectAgent={openConnect}
+                    onClose={closeShare}
+                  />
+                )}
+                {helpOpen && <ShortcutsDialog onClose={closeHelp} />}
+                {notice && (
+                  <div
+                    role="status"
+                    className="absolute left-1/2 top-[72px] z-30 max-w-md -translate-x-1/2 rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] px-4 py-2 text-sm shadow-lg"
+                  >
+                    {notice}
+                  </div>
+                )}
+                {deleteOpen && (
+                  <DeleteCanvasDialog
+                    title={flow.title}
+                    presence={flow.presence}
+                    clientId={flow.clientId}
+                    onDelete={deleteCanvas}
+                    onClose={closeDelete}
+                  />
+                )}
+                {connectOpen && (
+                  <ConnectAgentDialog
+                    link={agentLink}
+                    webMcp={webMcp}
+                    relayScriptPath={relayScriptPath}
+                    onEnableWebMcp={turnOnWebMcp}
+                    onClose={closeConnect}
+                  />
+                )}
               </div>
-            )}
-          </div>
-
-          {chooser && (
-            <ContainerChooser
-              resource={chooser.resource}
-              contents={chooserContents}
-              position={flowToScreenPosition(chooser.center)}
-              onChoose={choose}
-              onCancel={cancelChooser}
-            />
-          )}
-          {connectionsChooser && (
-            <ConnectionsChooser
-              resource={connectionsChooser.resource}
-              groups={connectionsChooser.groups}
-              position={flowToScreenPosition(connectionsChooser.center)}
-              onChoose={chooseConnections}
-              onCancel={cancelConnectionsChooser}
-            />
-          )}
-          {shareOpen && (
-            <ShareDialog
-              keptInMemory={keptInMemory}
-              url={agentLink.canvasUrl}
-              title={flow.title}
-              presence={flow.presence}
-              clientId={flow.clientId}
-              onRename={onRename}
-              onJumpTo={jumpTo}
-              onConnectAgent={openConnect}
-              onClose={closeShare}
-            />
-          )}
-          {connectOpen && (
-            <ConnectAgentDialog
-              link={agentLink}
-              webMcp={webMcp}
-              relayScriptPath={relayScriptPath}
-              onEnableWebMcp={turnOnWebMcp}
-              onClose={closeConnect}
-            />
-          )}
-          {inspected && (
-            <PropertiesPanel
-              key={inspected.id}
-              node={inspected}
-              onChange={flow.updateNodeData}
-              onDelete={flow.deleteNodes}
-              onClose={closePanel}
-            />
-          )}
-        </div>
+            </LockedContext.Provider>
+          </StartWritingContext.Provider>
+        </EditingContext.Provider>
       </DropTargetContext.Provider>
     </UpdateNodeDataContext.Provider>
   );