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

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

@@ -0,0 +1,97 @@
+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

@@ -134,17 +134,18 @@ export default memo(function CanvasControls({
         <Divider />
         <LevelSwitch level={level} onChange={onLevelChange} unavailable={unavailableLevels} />
         <Divider />
-        <ControlButton label="Undo (⌘Z)" onClick={onUndo} disabled={!editable || !canUndo}>
+        <ControlButton label="Undo (⌘Z)" onClick={onUndo} disabled={!canUndo}>
           <Undo className="h-4 w-4" />
         </ControlButton>
-        <ControlButton label="Redo (⇧⌘Z)" onClick={onRedo} disabled={!editable || !canRedo}>
+        <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>
-        <ControlButton label="Add sticky note" onClick={onAddNote} disabled={!editable}>
+        {/* 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>

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

@@ -1,9 +1,12 @@
 import { memo, useEffect, useRef, useState, type ReactNode } from 'react';
-import { Bot, Check, ChevronDown, Link2, Pencil, Plus } from 'lucide-react';
+import { Bot, ChevronDown, Link2, Pencil, Plus, UserPlus } from 'lucide-react';
 import { usePeople, type Peer, type PresenceStore } from '../hooks/presence-store';
 import type { WebMcpStatus } from '../hooks/use-canvas-webmcp';
 import type { Status, Transport } from '../hooks/use-studio-flow';
+import type { CanvasStatus, StatusChange } from '../canvas-doc';
+import CanvasStatusMenu from './CanvasStatusMenu';
 import { CONNECTION_DOT, STATUS } from './status';
+import Picture from './Picture';
 
 /**
  * The canvas's header, like Figma or Miro: two small floating bars. On the left the canvas (its title, and a
@@ -12,8 +15,9 @@ import { CONNECTION_DOT, STATUS } from './status';
 
 const barClass =
   'pointer-events-auto flex h-10 items-center rounded-xl border shadow-md bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))]';
+// The header lets the pointer through to the canvas around its bars, so its menus take it back
 const menuClass =
-  'absolute top-full z-50 mt-2 min-w-52 rounded-xl border p-1 shadow-xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]';
+  'pointer-events-auto absolute top-full z-50 mt-2 min-w-52 rounded-xl border p-1 shadow-xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]';
 const menuItemClass =
   'flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-xs hover:bg-[rgb(var(--ec-page-border)/0.5)]';
 const MAX_AVATARS = 4;
@@ -41,10 +45,11 @@ function usePopover() {
 function Avatar({ peer, size = 28, children }: { peer: Peer; size?: number; children?: ReactNode }) {
   return (
     <span
-      className="flex items-center justify-center rounded-full text-[11px] font-semibold text-white ring-2 ring-[rgb(var(--ec-card-bg))]"
+      className="relative flex items-center justify-center rounded-full text-[11px] font-semibold text-white ring-2 ring-[rgb(var(--ec-card-bg))]"
       style={{ backgroundColor: peer.color, width: size, height: size }}
     >
       {children ?? (peer.agent ? <Bot size={14} /> : peer.name.slice(0, 2).toUpperCase())}
+      {!children && <Picture src={peer.picture} />}
     </span>
   );
 }
@@ -56,6 +61,7 @@ function CanvasMenu({
   onRetitle,
   shareUrl,
   newCanvasUrl,
+  children,
 }: {
   title?: string;
   status: Status;
@@ -63,6 +69,8 @@ function CanvasMenu({
   onRetitle: (title: string) => void;
   shareUrl?: string;
   newCanvasUrl?: string;
+  /** Shown after the title (the canvas's status) */
+  children?: ReactNode;
 }) {
   const menu = usePopover();
   const titleInput = useRef<HTMLInputElement>(null);
@@ -92,6 +100,7 @@ function CanvasMenu({
           size={Math.max(12, (draft ?? title ?? 'Untitled canvas').length)}
           className="max-w-64 truncate rounded-md bg-transparent px-1.5 py-1 text-sm font-semibold placeholder:font-semibold placeholder:text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-page-border)/0.4)] focus:bg-[rgb(var(--ec-input-bg))] focus:outline-none"
         />
+        {children}
         <button
           aria-label="Canvas menu"
           onClick={() => menu.setOpen((open) => !open)}
@@ -137,16 +146,18 @@ function CanvasMenu({
   );
 }
 
-/** You: change the name others see you by */
-function YouAvatar({ peer, onRename }: { peer: Peer; onRename: (name: string) => void }) {
+/** You: change the name others see you by (unless you're signed in, when it's the name you signed in with) */
+function YouAvatar({ peer, onRename }: { peer: Peer; onRename?: (name: string) => void }) {
   const popover = usePopover();
   const [draft, setDraft] = useState(peer.name);
   const commit = () => {
     const trimmed = draft.trim();
-    if (trimmed && trimmed !== peer.name) onRename(trimmed);
+    if (trimmed && trimmed !== peer.name) onRename?.(trimmed);
     popover.setOpen(false);
   };
 
+  // Signed in: you're shown in the app's header already
+  if (!onRename) return null;
   return (
     <div ref={popover.ref} className="relative">
       <button
@@ -193,7 +204,7 @@ function People({
   peers: Peer[];
   clientId: number | null;
   onJumpTo: (peer: Peer) => void;
-  onRename: (name: string) => void;
+  onRename?: (name: string) => void;
 }) {
   const overflow = usePopover();
   const you = peers.find((peer) => peer.clientId === clientId);
@@ -262,30 +273,33 @@ export default memo(function CanvasHeader({
   webMcp,
   shareUrl,
   newCanvasUrl,
+  onShare,
+  canvasStatus,
+  statusHistory,
+  onStatusChange,
 }: {
   title?: string;
   onRetitle: (title: string) => void;
+  canvasStatus: CanvasStatus;
+  statusHistory: StatusChange[];
+  onStatusChange: (status: CanvasStatus, note?: string) => void;
   status: Status;
   transport: Transport;
   presence: PresenceStore | null;
   clientId: number | null;
   onJumpTo: (peer: Peer) => void;
-  onRename: (name: string) => void;
+  /** Not given when you're signed in */
+  onRename?: (name: string) => void;
   onConnectAgent: () => void;
   webMcp: WebMcpStatus;
   shareUrl?: string;
   newCanvasUrl?: string;
+  /** Open the share dialog */
+  onShare: () => void;
 }) {
-  const [copied, setCopied] = useState(false);
   const peers = usePeople(presence);
   const agentsHere = peers.some((peer) => peer.agent);
 
-  const share = async () => {
-    await navigator.clipboard.writeText(shareUrl ?? window.location.href);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1500);
-  };
-
   return (
     <div className="pointer-events-none absolute left-3 right-3 top-3 z-10 flex items-start justify-between gap-3">
       <CanvasMenu
@@ -295,7 +309,9 @@ export default memo(function CanvasHeader({
         onRetitle={onRetitle}
         shareUrl={shareUrl}
         newCanvasUrl={newCanvasUrl}
-      />
+      >
+        <CanvasStatusMenu status={canvasStatus} history={statusHistory} onChange={onStatusChange} />
+      </CanvasMenu>
 
       <div className={`${barClass} gap-2 px-1.5`}>
         <div className="pl-1">
@@ -309,22 +325,23 @@ export default memo(function CanvasHeader({
               ? `Connect an AI agent to this canvas. WebMCP is on in this tab${webMcp.lastCall ? ` (last: ${webMcp.lastCall})` : ''}`
               : 'Connect an AI agent to this canvas'
           }
-          className="relative flex h-7 items-center gap-1.5 rounded-lg px-2.5 text-xs font-medium hover:bg-[rgb(var(--ec-page-border)/0.5)]"
+          // A button of its own next to Share (the two ways to bring someone in): people, or an AI agent
+          className="relative flex h-7 items-center gap-1.5 rounded-lg border px-2.5 text-xs font-semibold transition-colors border-[rgb(var(--ec-accent)/0.35)] bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] hover:border-[rgb(var(--ec-accent)/0.7)] hover:bg-[rgb(var(--ec-accent)/0.15)]"
         >
           <Bot size={15} />
-          Connect agent
+          {agentsHere ? 'Agent connected' : 'Connect agent'}
           {(webMcp.state === 'on' || agentsHere) && (
             <span
-              className={`absolute left-5 top-1 h-1.5 w-1.5 rounded-full ring-2 ring-[rgb(var(--ec-card-bg))] ${STATUS.success.dot}`}
+              className={`absolute -right-1 -top-1 h-2.5 w-2.5 rounded-full ring-2 ring-[rgb(var(--ec-card-bg))] ${STATUS.success.dot}`}
             />
           )}
         </button>
         <button
-          onClick={share}
+          onClick={onShare}
           className="flex h-7 items-center gap-1.5 rounded-lg px-3 text-xs font-semibold bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))] hover:bg-[rgb(var(--ec-button-bg-hover))]"
         >
-          {copied ? <Check size={14} /> : null}
-          {copied ? 'Link copied' : 'Share'}
+          <UserPlus size={14} />
+          Share
         </button>
       </div>
     </div>

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

@@ -0,0 +1,117 @@
+import { memo, useEffect, useRef, useState } from 'react';
+import { Check, ChevronDown } from 'lucide-react';
+import { CANVAS_STATUSES, type CanvasStatus, type StatusChange } from '../canvas-doc';
+import { timeAgo } from './Comments';
+import { CANVAS_STATUS_LOOK } from './status';
+
+/** Status changes shown in the menu, newest first */
+const HISTORY_SHOWN = 8;
+
+/**
+ * The canvas's status (draft, proposed, accepted, rejected) as a pill beside its title. It opens a menu to change it,
+ * with a note on why, and who changed it before.
+ */
+export default memo(function CanvasStatusMenu({
+  status,
+  history,
+  onChange,
+}: {
+  status: CanvasStatus;
+  history: StatusChange[];
+  onChange: (status: CanvasStatus, note?: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [note, setNote] = useState('');
+  const ref = useRef<HTMLDivElement>(null);
+  const look = CANVAS_STATUS_LOOK[status];
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: PointerEvent) => {
+      if (!ref.current?.contains(event.target as globalThis.Node)) setOpen(false);
+    };
+    const onKeyDown = (event: KeyboardEvent) => event.key === 'Escape' && setOpen(false);
+    window.addEventListener('pointerdown', onPointerDown);
+    window.addEventListener('keydown', onKeyDown);
+    return () => {
+      window.removeEventListener('pointerdown', onPointerDown);
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [open]);
+
+  const choose = (next: CanvasStatus) => {
+    if (next !== status) onChange(next, note);
+    setNote('');
+    setOpen(false);
+  };
+  const recent = history.slice(-HISTORY_SHOWN).reverse();
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen((current) => !current)}
+        aria-label={`Status: ${look.label}`}
+        aria-expanded={open}
+        className={`flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-semibold ${look.pill}`}
+      >
+        {look.label}
+        <ChevronDown size={12} />
+      </button>
+      {open && (
+        <div className="absolute left-0 top-full z-50 mt-2 w-72 rounded-xl border p-1 shadow-xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]">
+          <p className="px-2.5 pb-1 pt-1.5 text-[11px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]">
+            Status
+          </p>
+          {CANVAS_STATUSES.map((value) => {
+            const option = CANVAS_STATUS_LOOK[value];
+            return (
+              <button
+                key={value}
+                onClick={() => choose(value)}
+                className="flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left hover:bg-[rgb(var(--ec-page-border)/0.5)]"
+              >
+                <span className={`h-2 w-2 shrink-0 rounded-full ${option.dot}`} />
+                <span className="min-w-0 flex-1">
+                  <span className="block text-xs font-medium">{option.label}</span>
+                  <span className="block text-[11px] text-[rgb(var(--ec-page-text-muted))]">{option.description}</span>
+                </span>
+                {value === status && <Check size={14} className="shrink-0 text-[rgb(var(--ec-accent))]" />}
+              </button>
+            );
+          })}
+          <div className="px-2.5 py-2">
+            <input
+              value={note}
+              onChange={(event) => setNote(event.target.value)}
+              placeholder="Add a note (optional), then pick a status"
+              aria-label="Note for the status change"
+              className="w-full rounded-md border px-2 py-1.5 text-xs bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-page-text-muted))] focus:outline-none focus:border-[rgb(var(--ec-accent))]"
+            />
+          </div>
+          {recent.length > 0 && (
+            <>
+              <div className="my-1 h-px bg-[rgb(var(--ec-page-border))]" />
+              <p className="px-2.5 pb-1 pt-1.5 text-[11px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]">
+                History
+              </p>
+              <ul className="max-h-48 space-y-1.5 overflow-y-auto px-2.5 pb-2">
+                {recent.map((change) => (
+                  <li key={`${change.at}-${change.status}`} className="text-[11px]">
+                    <span className="flex items-center gap-1.5">
+                      <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${CANVAS_STATUS_LOOK[change.status].dot}`} />
+                      <span className="font-medium">{CANVAS_STATUS_LOOK[change.status].label}</span>
+                      <span className="text-[rgb(var(--ec-page-text-muted))]">
+                        by {change.by.name} · {timeAgo(change.at)}
+                      </span>
+                    </span>
+                    {change.note && <span className="block pl-3 text-[rgb(var(--ec-page-text-muted))]">{change.note}</span>}
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});