@eventcatalog/core 5.0.0-beta.9 → 5.0.0

package/eventcatalog/src/features/studio/canvas-doc.ts

@@ -1,409 +0,0 @@
-import * as Y from 'yjs';
-import type { Connection, Edge, Node, XYPosition } from '@xyflow/react';
-import { createEdge, getEdgeLabel } from './edges';
-import { fitGroup, getAbsolutePosition, withDescendants, withParent } from './grouping';
-import { getNodeDefinition, getNodeSize, isGroupType } from './node-types';
-
-/**
- * Everything a canvas holds, as operations on its Yjs document. The same functions run in the
- * browser (people, WebMCP) and on the server (MCP tools), so humans and agents edit a canvas the same way.
- */
-
-export type Author = {
-  name: string;
-  color: string;
-  agent?: boolean;
-  /** A picture from their sign-in provider (SSO), shown over their initials */
-  picture?: string;
-};
-export type Message = { id: string; text: string; author: Author; createdAt: number };
-/** Where a comment is pinned: a canvas position, or a node (and the offset from its top left) so it moves with it */
-export type CommentAnchor = { position: XYPosition; nodeId?: string; offset?: XYPosition };
-export type Thread = CommentAnchor & { id: string; author: Author; createdAt: number; resolved: boolean; messages: Message[] };
-/** Where a canvas's design is: being worked on, up for review, agreed, or decided against */
-export const CANVAS_STATUSES = ['draft', 'proposed', 'accepted', 'rejected'] as const;
-export type CanvasStatus = (typeof CANVAS_STATUSES)[number];
-/** A canvas's status being changed: by whom, when, and why (e.g. "Agreed in the architecture review") */
-export type StatusChange = { status: CanvasStatus; by: Author; at: number; note?: string };
-export type CanvasMeta = {
-  title?: string;
-  /** Draft until someone changes it */
-  status?: CanvasStatus;
-  /** Every status change, oldest first (the last few hundred) */
-  statusHistory?: StatusChange[];
-  createdAt?: number;
-  createdBy?: string;
-  /** When the canvas was last laid out, so everyone's canvas glides the nodes into place */
-  layoutAt?: number;
-};
-
-// Canvases' documents on the collaboration server are named `design:<canvasId>` (scripts and peers join by it)
-const DOCUMENT_PREFIX = 'design:';
-export const canvasDocumentName = (canvasId: string) => `${DOCUMENT_PREFIX}${canvasId}`;
-export const canvasIdFromDocumentName = (name: string) =>
-  name.startsWith(DOCUMENT_PREFIX) ? name.slice(DOCUMENT_PREFIX.length) : undefined;
-
-export const shortId = () => crypto.randomUUID().slice(0, 8);
-
-export const getCanvasMaps = (doc: Y.Doc) => ({
-  nodes: doc.getMap<Node>('nodes'),
-  edges: doc.getMap<Edge>('edges'),
-  threads: doc.getMap<Y.Map<unknown>>('threads'),
-  meta: doc.getMap<unknown>('meta'),
-});
-
-// Only the design is shared. Selection, measured sizes and drag state stay with each user.
-export const toSharedNode = ({ id, type, position, data, width, height, parentId, zIndex }: Node): Node => ({
-  id,
-  type,
-  position,
-  data,
-  ...(width ? { width } : {}),
-  ...(height ? { height } : {}),
-  // Inside a container (its position is then relative to the container)
-  ...(parentId ? { parentId } : {}),
-  ...(zIndex !== undefined ? { zIndex } : {}),
-});
-
-/** A new node of a type, centred on a canvas position */
-export const buildNode = (type: string, data: Record<string, unknown>, center: XYPosition): Node => {
-  const definition = getNodeDefinition(type);
-  const size = getNodeSize(type);
-  return toSharedNode({
-    id: `${type}-${shortId()}`,
-    type,
-    position: { x: center.x - size.width / 2, y: center.y - size.height / 2 },
-    data,
-    ...(definition?.defaultSize ? (definition.autoHeight ? { width: size.width } : size) : {}),
-    // Containers sit behind what's in them and the connections between them
-    ...(isGroupType(type) && { zIndex: -1 }),
-  });
-};
-
-// ---- Meta ----
-
-export const readMeta = (doc: Y.Doc) => getCanvasMaps(doc).meta.toJSON() as CanvasMeta;
-
-export const setMeta = (doc: Y.Doc, meta: Partial<CanvasMeta>) =>
-  doc.transact(() => {
-    const map = getCanvasMaps(doc).meta;
-    Object.entries(meta).forEach(([key, value]) => (value === undefined ? map.delete(key) : map.set(key, value)));
-  });
-
-// ---- Status ----
-
-const MAX_STATUS_HISTORY = 200;
-
-export const getCanvasStatus = (meta: CanvasMeta): CanvasStatus => meta.status ?? 'draft';
-
-/** Changes a canvas's status (and records who did it). Returns false if it already had that status. */
-export const setCanvasStatus = (doc: Y.Doc, status: CanvasStatus, by: Author, note?: string) => {
-  let changed = false;
-  doc.transact(() => {
-    const meta = readMeta(doc);
-    if (getCanvasStatus(meta) === status) return;
-    const change: StatusChange = { status, by, at: Date.now(), ...(note?.trim() && { note: note.trim() }) };
-    const map = getCanvasMaps(doc).meta;
-    map.set('status', status);
-    map.set('statusHistory', [...(meta.statusHistory ?? []), change].slice(-MAX_STATUS_HISTORY));
-    changed = true;
-  });
-  return changed;
-};
-
-/** Accepted and rejected canvases are decided: changing what's on them makes them a draft again */
-export const isDecided = (status: CanvasStatus) => status === 'accepted' || status === 'rejected';
-
-/** A decided canvas whose nodes or edges were changed goes back to draft, recorded as changed by `by` */
-export const reopenIfDecided = (doc: Y.Doc, by: Author) => {
-  const status = getCanvasStatus(readMeta(doc));
-  if (isDecided(status)) setCanvasStatus(doc, 'draft', by, `Changed after it was ${status}`);
-};
-
-/**
- * Runs `fn` (which may change the canvas), and if it changed nodes or edges, sends a decided canvas back to draft.
- * Comments don't count: reviewing an accepted design keeps it accepted.
- */
-export const reopeningIfEdited = <T>(doc: Y.Doc, by: Author, fn: () => T): T => {
-  let result!: T;
-  // In one transaction (the one it's already in, if it is): what it changed is known before it ends
-  doc.transact((transaction) => {
-    result = fn();
-    if (changesNodesOrEdges(transaction)) reopenIfDecided(doc, by);
-  });
-  return result;
-};
-
-/** Whether a transaction changed the canvas's nodes or edges (not just its comments or meta) */
-export const changesNodesOrEdges = (transaction: Y.Transaction) => {
-  const { nodes, edges } = getCanvasMaps(transaction.doc);
-  return [...transaction.changed.keys()].some((type) => type === (nodes as unknown) || type === (edges as unknown));
-};
-
-// ---- Nodes and edges ----
-
-export const addNodes = (doc: Y.Doc, nodes: Node[], edges: Edge[] = []) =>
-  doc.transact(() => {
-    const maps = getCanvasMaps(doc);
-    nodes.forEach((node) => maps.nodes.set(node.id, toSharedNode(node)));
-    edges.forEach((edge) => maps.edges.set(edge.id, edge));
-  });
-
-export const moveNode = (doc: Y.Doc, id: string, position: XYPosition) => {
-  const { nodes } = getCanvasMaps(doc);
-  const node = nodes.get(id);
-  if (node) nodes.set(id, { ...node, position });
-  return !!node;
-};
-
-/** Resize a node: both sides, or just its width or height (e.g. text, whose height follows what's in it) */
-export const resizeNode = (
-  doc: Y.Doc,
-  id: string,
-  size: { width: number; height: number },
-  attributes: true | 'width' | 'height' = true
-) => {
-  const { nodes } = getCanvasMaps(doc);
-  const node = nodes.get(id);
-  if (node)
-    nodes.set(id, {
-      ...node,
-      ...(attributes !== 'height' && { width: size.width }),
-      ...(attributes !== 'width' && { height: size.height }),
-    });
-  return !!node;
-};
-
-/** Grow a container to fit what's in it (moving them clear of its header if needed), never shrinking it */
-/**
- * The sizes nodes are rendered at (in the browser), by id. The document doesn't have them, so without them
- * containers are fitted to the size each type renders at at most.
- */
-export type RenderedSizes = ReadonlyMap<string, { width: number; height: number }>;
-
-const withRenderedSizes = (nodes: Node[], sizes?: RenderedSizes) =>
-  sizes ? nodes.map((node) => (sizes.has(node.id) ? { ...node, measured: sizes.get(node.id) } : node)) : nodes;
-
-export const fitGroupToChildren = (doc: Y.Doc, groupId: string, sizes?: RenderedSizes) =>
-  doc.transact(() => {
-    const { nodes } = getCanvasMaps(doc);
-    const fit = fitGroup(groupId, withRenderedSizes(Array.from(nodes.values()), sizes));
-    const group = nodes.get(groupId);
-    if (!fit || !group) return;
-    if (fit.shift.x || fit.shift.y) {
-      // Children move right/down and the container left/up by the same amount: nothing moves on the canvas
-      nodes.forEach((child, id) => {
-        if (child.parentId === groupId)
-          nodes.set(id, { ...child, position: { x: child.position.x + fit.shift.x, y: child.position.y + fit.shift.y } });
-      });
-    }
-    nodes.set(groupId, {
-      ...group,
-      position: { x: group.position.x - fit.shift.x, y: group.position.y - fit.shift.y },
-      width: fit.width,
-      height: fit.height,
-    });
-  });
-
-/** The containers a node is in grow to fit it (innermost first), e.g. after it's added or resized */
-export const fitContainersAround = (doc: Y.Doc, nodeId: string, sizes?: RenderedSizes) =>
-  doc.transact(() => {
-    const { nodes } = getCanvasMaps(doc);
-    for (let id = nodes.get(nodeId)?.parentId; id; id = nodes.get(id)?.parentId) fitGroupToChildren(doc, id, sizes);
-  });
-
-/** Put a node in a container (or take it out, without a parentId), keeping it where it is on the canvas */
-export const setNodeParent = (doc: Y.Doc, nodeId: string, parentId: string | undefined, sizes?: RenderedSizes) =>
-  doc.transact(() => {
-    const { nodes } = getCanvasMaps(doc);
-    const node = nodes.get(nodeId);
-    if (!node || node.parentId === parentId) return false;
-    nodes.set(nodeId, toSharedNode(withParent(node, parentId, Array.from(nodes.values()))));
-    if (parentId) fitGroupToChildren(doc, parentId, sizes);
-    return true;
-  });
-
-export const updateNodeData = (doc: Y.Doc, id: string, updater: (data: Record<string, unknown>) => Record<string, unknown>) => {
-  const { nodes } = getCanvasMaps(doc);
-  const node = nodes.get(id);
-  if (node) nodes.set(id, { ...node, data: updater(node.data) });
-  return !!node;
-};
-
-/** Connect two nodes with an EventCatalog-labelled edge. Returns the edge, or why it couldn't be made. */
-export const connectNodes = (
-  doc: Y.Doc,
-  connection: Pick<Connection, 'source' | 'target'> & Partial<Connection>,
-  label?: string
-): Edge | { error: string } => {
-  const { nodes, edges } = getCanvasMaps(doc);
-  const source = nodes.get(connection.source);
-  const target = nodes.get(connection.target);
-  if (!source) return { error: `Node "${connection.source}" is not on the canvas` };
-  if (!target) return { error: `Node "${connection.target}" is not on the canvas` };
-  if (source.id === target.id) return { error: 'A node cannot be connected to itself' };
-  const existing = Array.from(edges.values()).find((edge) => edge.source === source.id && edge.target === target.id);
-  if (existing) return existing;
-  const edge = createEdge(
-    {
-      source: source.id,
-      target: target.id,
-      sourceHandle: connection.sourceHandle ?? null,
-      targetHandle: connection.targetHandle ?? null,
-    },
-    source.type,
-    target.type
-  );
-  const created = label === undefined ? edge : { ...edge, label };
-  edges.set(created.id, created);
-  return created;
-};
-
-/**
- * Moves a connection to new ends (dragged to another node), keeping it the same connection. Its label follows
- * the new ends if it was EventCatalog's wording, and is kept if someone wrote it.
- */
-export const reconnectEdge = (doc: Y.Doc, edgeId: string, connection: Connection): Edge | { error: string } =>
-  doc.transact(() => {
-    const { nodes, edges } = getCanvasMaps(doc);
-    const edge = edges.get(edgeId);
-    const source = nodes.get(connection.source);
-    const target = nodes.get(connection.target);
-    if (!edge) return { error: `Connection "${edgeId}" is not on the canvas` };
-    if (!source || !target) return { error: 'Connections join two nodes on the canvas' };
-    if (source.id === target.id) return { error: 'A node cannot be connected to itself' };
-    const duplicate = Array.from(edges.values()).find(
-      (other) => other.id !== edgeId && other.source === source.id && other.target === target.id
-    );
-    if (duplicate) return { error: 'Those nodes are already connected' };
-
-    const defaultLabel = getEdgeLabel(nodes.get(edge.source)?.type, nodes.get(edge.target)?.type);
-    const moved = createEdge(connection, source.type, target.type);
-    const reconnected: Edge = {
-      ...moved,
-      id: edge.id,
-      ...(edge.label !== undefined && edge.label !== defaultLabel && { label: edge.label }),
-    };
-    edges.set(edgeId, reconnected);
-    return reconnected;
-  });
-
-export const deleteEdges = (doc: Y.Doc, ids: string[]) =>
-  doc.transact(() => ids.forEach((id) => getCanvasMaps(doc).edges.delete(id)));
-
-/** Delete nodes (containers with what's in them), the edges to them, and leave their comments where they were */
-export const deleteNodes = (doc: Y.Doc, ids: string[]) =>
-  doc.transact(() => {
-    const { nodes, edges, threads } = getCanvasMaps(doc);
-    const all = Array.from(nodes.values());
-    const lookup = new Map(all.map((node) => [node.id, node]));
-    const removed = withDescendants(ids, all);
-    threads.forEach((thread) => {
-      const nodeId = thread.get('nodeId') as string | undefined;
-      const node = nodeId && removed.has(nodeId) ? nodes.get(nodeId) : undefined;
-      if (!node) return;
-      const offset = (thread.get('offset') as XYPosition) ?? { x: 0, y: 0 };
-      const position = getAbsolutePosition(node, lookup);
-      thread.set('position', { x: position.x + offset.x, y: position.y + offset.y });
-      thread.delete('nodeId');
-      thread.delete('offset');
-    });
-    removed.forEach((id) => nodes.delete(id));
-    edges.forEach((edge, id) => {
-      if (removed.has(edge.source) || removed.has(edge.target)) edges.delete(id);
-    });
-  });
-
-// ---- Comments ----
-// Each thread is a nested Y.Map and its messages a Y.Array, so concurrent replies (and resolving while
-// someone replies) all merge.
-
-export const readThreads = (doc: Y.Doc) =>
-  Array.from(getCanvasMaps(doc).threads.values())
-    .map((thread) => thread.toJSON() as Thread)
-    .sort((a, b) => a.createdAt - b.createdAt);
-
-const anchorEntries = (anchor: CommentAnchor): [string, unknown][] => [
-  ['position', anchor.position],
-  ...(anchor.nodeId && anchor.offset
-    ? ([
-        ['nodeId', anchor.nodeId],
-        ['offset', anchor.offset],
-      ] as [string, unknown][])
-    : []),
-];
-
-export const createThread = (doc: Y.Doc, anchor: CommentAnchor, text: string, author: Author) => {
-  const id = shortId();
-  const now = Date.now();
-  const messages = new Y.Array<Message>();
-  messages.push([{ id: shortId(), text, author, createdAt: now }]);
-  const thread = new Y.Map<unknown>([
-    ['id', id],
-    ...anchorEntries(anchor),
-    ['author', author],
-    ['createdAt', now],
-    ['resolved', false],
-    ['messages', messages],
-  ]);
-  getCanvasMaps(doc).threads.set(id, thread);
-  return id;
-};
-
-const getThread = (doc: Y.Doc, id: string) => getCanvasMaps(doc).threads.get(id);
-
-export const replyToThread = (doc: Y.Doc, threadId: string, text: string, author: Author) => {
-  const messages = getThread(doc, threadId)?.get('messages') as Y.Array<Message> | undefined;
-  messages?.push([{ id: shortId(), text, author, createdAt: Date.now() }]);
-  return !!messages;
-};
-
-export const setThreadResolved = (doc: Y.Doc, threadId: string, resolved: boolean) => {
-  const thread = getThread(doc, threadId);
-  thread?.set('resolved', resolved);
-  return !!thread;
-};
-
-/** Move a thread's pin, attaching it to a node (anchor.nodeId) or to the canvas */
-export const moveThread = (doc: Y.Doc, threadId: string, anchor: CommentAnchor) => {
-  const thread = getThread(doc, threadId);
-  if (!thread) return false;
-  doc.transact(() => {
-    thread.set('position', anchor.position);
-    if (anchor.nodeId && anchor.offset) {
-      thread.set('nodeId', anchor.nodeId);
-      thread.set('offset', anchor.offset);
-    } else {
-      thread.delete('nodeId');
-      thread.delete('offset');
-    }
-  });
-  return true;
-};
-
-export const deleteThread = (doc: Y.Doc, threadId: string) => {
-  const { threads } = getCanvasMaps(doc);
-  const exists = threads.has(threadId);
-  threads.delete(threadId);
-  return exists;
-};
-
-/** Deletes comment threads in one change (one undo brings them all back) */
-export const deleteThreads = (doc: Y.Doc, threadIds: string[]) =>
-  doc.transact(() => threadIds.forEach((id) => deleteThread(doc, id)));
-
-/** Moves comment threads in one change, e.g. ones that moved with what was dragged */
-export const moveThreads = (doc: Y.Doc, moves: { threadId: string; anchor: CommentAnchor }[]) =>
-  doc.transact(() => moves.forEach(({ threadId, anchor }) => moveThread(doc, threadId, anchor)));
-
-// ---- Reading a whole canvas ----
-
-export const readCanvas = (doc: Y.Doc) => {
-  const { nodes, edges } = getCanvasMaps(doc);
-  return {
-    meta: readMeta(doc),
-    nodes: Array.from(nodes.values()),
-    edges: Array.from(edges.values()),
-    threads: readThreads(doc),
-  };
-};

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

@@ -1,97 +0,0 @@
-import type { Edge, Node, XYPosition } from '@xyflow/react';
-import { shortId, toSharedNode } from './canvas-doc';
-import { findGroupAtPoint, getAbsolutePosition, sizeOf, sortByHierarchy, withDescendants } from './grouping';
-import { canGoInContainer } from './node-types';
-
-/**
- * Copying and pasting nodes, within a canvas or between canvases (through the system clipboard). What's copied is
- * the selected nodes, everything inside selected containers, and the connections between them. Comments aren't.
- */
-
-/** The clipboard type Studio reads first (other apps get a plain text list of what was copied) */
-export const CLIPBOARD_TYPE = 'application/x-eventcatalog-studio+json';
-const MARKER = 'eventcatalog-studio/nodes@1';
-
-export type ClipboardContent = { marker: typeof MARKER; nodes: Node[]; edges: Edge[] };
-
-/** What's copied when these nodes are selected, or null if there's nothing to copy */
-export const copyNodes = (nodes: Node[], edges: Edge[], selectedIds: string[]): ClipboardContent | null => {
-  if (selectedIds.length === 0) return null;
-  const lookup = new Map(nodes.map((node) => [node.id, node]));
-  const ids = withDescendants(selectedIds, nodes);
-  const copied = sortByHierarchy(nodes.filter((node) => ids.has(node.id))).map((node) => {
-    const shared = toSharedNode(node);
-    // Copied without its container: where it is on the canvas
-    if (shared.parentId && !ids.has(shared.parentId)) {
-      const { parentId: _, ...rest } = shared;
-      return { ...rest, position: getAbsolutePosition(node, lookup) };
-    }
-    return shared;
-  });
-  return {
-    marker: MARKER,
-    nodes: copied,
-    edges: edges.filter((edge) => ids.has(edge.source) && ids.has(edge.target)).map(({ selected: _, ...edge }) => edge),
-  };
-};
-
-/** Copied content read back from the clipboard, if it's Studio's */
-export const readClipboard = (text: string | undefined): ClipboardContent | null => {
-  if (!text) return null;
-  try {
-    const content = JSON.parse(text) as Partial<ClipboardContent>;
-    return content.marker === MARKER && Array.isArray(content.nodes) && Array.isArray(content.edges)
-      ? (content as ClipboardContent)
-      : null;
-  } catch {
-    return null;
-  }
-};
-
-/**
- * Copies of the content to add to the canvas, with new ids: centred on a point (e.g. the pointer), or moved by an
- * offset from where they were copied. Copies that land in a container on the canvas go inside it.
- */
-export const pasteNodes = (
-  content: ClipboardContent,
-  existing: Node[],
-  place: { at: XYPosition } | { offset: XYPosition }
-): { nodes: Node[]; edges: Edge[] } => {
-  const ids = new Map(content.nodes.map((node) => [node.id, `${node.type ?? 'node'}-${shortId()}`]));
-  const roots = content.nodes.filter((node) => !node.parentId);
-  const offset = 'offset' in place ? place.offset : offsetToCentre(roots, place.at);
-
-  const lookup = new Map(existing.map((node) => [node.id, node]));
-  const nodes = content.nodes.map((node): Node => {
-    const id = ids.get(node.id)!;
-    if (node.parentId) return { ...node, id, parentId: ids.get(node.parentId) };
-    const position = { x: node.position.x + offset.x, y: node.position.y + offset.y };
-    const { width, height } = sizeOf(node);
-    const container = canGoInContainer(node.type)
-      ? findGroupAtPoint({ x: position.x + width / 2, y: position.y + height / 2 }, existing)
-      : undefined;
-    if (!container) return { ...node, id, position };
-    const origin = getAbsolutePosition(container, lookup);
-    return { ...node, id, parentId: container.id, position: { x: position.x - origin.x, y: position.y - origin.y } };
-  });
-
-  return {
-    nodes,
-    edges: content.edges.map((edge) => ({
-      ...edge,
-      id: `edge-${shortId()}`,
-      source: ids.get(edge.source)!,
-      target: ids.get(edge.target)!,
-    })),
-  };
-};
-
-/** How far to move nodes so the middle of them is at a point */
-const offsetToCentre = (roots: Node[], at: XYPosition): XYPosition => {
-  if (roots.length === 0) return { x: 0, y: 0 };
-  const left = Math.min(...roots.map((node) => node.position.x));
-  const top = Math.min(...roots.map((node) => node.position.y));
-  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: at.x - (left + right) / 2, y: at.y - (top + bottom) / 2 };
-};

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

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