@eventcatalog/visualiser 5.0.0-beta.5 → 5.0.0-beta.7

package/dist/studio.d.mts

@@ -0,0 +1,1312 @@
+import * as Y from 'yjs';
+import { XYPosition, Node, Edge, Connection, EdgeMarker, NodeTypes, FitViewOptions, NodeProps } from '@xyflow/react';
+import { E as EdgeRoute, L as LayoutGraph, a as LayoutSize } from './elk-layout-BVUJjv6i.mjs';
+import * as react from 'react';
+import { RefObject, ReactNode, DragEvent, SVGProps } from 'react';
+import { R as Resource, M as Model, L as Level$1, A as ArchitecturePayload } from './schema-DKA0EQ_H.mjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LucideIcon } from 'lucide-react';
+import 'zod';
+
+/**
+ * Everything a canvas holds, as operations on its Yjs document: nodes and edges, where things are on each level,
+ * comment threads, hotspots and the canvas's status. The same functions run in the browser (people, WebMCP) and on a
+ * server (MCP tools), so people and agents edit a canvas the same way.
+ */
+type Author = {
+    name: string;
+    color: string;
+    agent?: boolean;
+    /** A picture from their sign-in provider (SSO), shown over their initials */
+    picture?: string;
+};
+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 */
+type CommentAnchor = {
+    position: XYPosition;
+    nodeId?: string;
+    offset?: XYPosition;
+    level?: 1 | 2;
+};
+type Thread = CommentAnchor & {
+    id: string;
+    author: Author;
+    createdAt: number;
+    resolved: boolean;
+    messages: Message[];
+};
+type HotspotSeverity = "critical" | "warning" | "info";
+/** A hotspot: flagged on a node (shown on it, wherever it goes), or at a place on the canvas */
+type Hotspot = {
+    id: string;
+    severity: HotspotSeverity;
+    title: string;
+    description?: string;
+    nodeId?: string;
+    /** Where it is when it's not on a node */
+    position: XYPosition;
+    /** The level that place is on (L1 or L2: they're laid out on their own); none, L3 */
+    level?: 1 | 2;
+    author: Author;
+    createdAt: number;
+};
+/** Where a canvas's design is: being worked on, up for review, agreed, or decided against */
+declare const CANVAS_STATUSES: readonly ["draft", "proposed", "accepted", "rejected"];
+type CanvasStatus = (typeof CANVAS_STATUSES)[number];
+/** A canvas's status being changed: by whom, when, and why (e.g. "Agreed in the architecture review") */
+type StatusChange = {
+    status: CanvasStatus;
+    by: Author;
+    at: number;
+    note?: string;
+};
+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;
+    /** Locked (looked at, not changed), by whom: for everyone on it, in a live session too */
+    lockedBy?: string | null;
+    /** L1 and L2 as the diagram the canvas was opened from showed them (see DiagramLevels) */
+    diagramLevels?: DiagramLevels;
+};
+/** A level of detail as a diagram showed it: its nodes (laid out) and edges, by canvas node ids where they're the same */
+type DiagramLevel = {
+    nodes: Node[];
+    edges: Edge[];
+};
+/**
+ * L1 and L2 of the diagram a canvas was opened from (the visualiser's "Open in Studio"), shown as they were while the
+ * canvas's structure is what was opened (`structure`, from getStructureKey): moving nodes keeps them, changing what's
+ * on the canvas or how it's connected doesn't (the levels are then worked out from the canvas)
+ */
+type DiagramLevels = {
+    structure: string;
+    1?: DiagramLevel;
+    2?: DiagramLevel;
+    /** Levels the diagram doesn't have, and why (as the diagram says) */
+    unavailable?: {
+        1?: string;
+        2?: string;
+    };
+};
+/** Who locked the canvas, if it's locked */
+declare const getLock: (doc: Y.Doc) => string | null;
+/** Locks the canvas for everyone (by a name), or unlocks it (null); nothing written if it's already so */
+declare const setLock: (doc: Y.Doc, by: string | null) => void;
+declare const shortId: () => string;
+declare const getCanvasMaps: (doc: Y.Doc) => {
+    nodes: Y.Map<Node>;
+    edges: Y.Map<Edge>;
+    threads: Y.Map<Y.Map<unknown>>;
+    /** Each hotspot whole (edited by replacing it: they're short) */
+    hotspots: Y.Map<Hotspot>;
+    meta: Y.Map<unknown>;
+    /** Where things are on L1 and L2 (see LevelPlace), one entry per node and level (`1:<node id>`) */
+    levelLayouts: Y.Map<LevelPlace>;
+};
+/**
+ * Where a node is on L1 or L2, as people arranged it there (or as the diagram it was opened from had it): its
+ * top-left corner, relative to the container it's shown in on that level, and a container's size
+ */
+type LevelPlace = {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+};
+/** The places on a level, by node id */
+declare const readLevelLayout: (doc: Y.Doc, level: 1 | 2) => Map<string, LevelPlace>;
+/**
+ * Puts nodes where they go on a level (in one transaction). Places that haven't changed aren't written: everyone
+ * looking at the level works out the same places for what's new on it, and each write re-arranges the level for
+ * everyone else.
+ */
+declare const setLevelPlaces: (doc: Y.Doc, level: 1 | 2, places: ReadonlyMap<string, LevelPlace>) => void;
+declare const toSharedNode: ({ id, type, position, data, width, height, parentId, zIndex, }: Node) => Node;
+/** A new node of a type, centred on a canvas position */
+declare const buildNode: (type: string, data: Record<string, unknown>, center: XYPosition) => Node;
+declare const readMeta: (doc: Y.Doc) => CanvasMeta;
+declare const setMeta: (doc: Y.Doc, meta: Partial<CanvasMeta>) => void;
+declare const getCanvasStatus: (meta: CanvasMeta) => CanvasStatus;
+/** Changes a canvas's status (and records who did it). Returns false if it already had that status. */
+declare const setCanvasStatus: (doc: Y.Doc, status: CanvasStatus, by: Author, note?: string) => boolean;
+/** Accepted and rejected canvases are decided: changing what's on them makes them a draft again */
+declare const isDecided: (status: CanvasStatus) => status is "accepted" | "rejected";
+/** A decided canvas whose nodes or edges were changed goes back to draft, recorded as changed by `by` */
+declare const reopenIfDecided: (doc: Y.Doc, by: Author) => void;
+/**
+ * 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.
+ */
+declare const reopeningIfEdited: <T>(doc: Y.Doc, by: Author, fn: () => T) => T;
+/** Whether a transaction changed the canvas's nodes or edges (not just its comments or meta) */
+declare const changesNodesOrEdges: (transaction: Y.Transaction) => boolean;
+declare const addNodes: (doc: Y.Doc, nodes: Node[], edges?: Edge[]) => void;
+/**
+ * Moves a node, and resizes it if a size is given, in one write. Nodes are only written when they change: every
+ * write is sent to everyone, re-renders the node for them, and is kept in the document (and the undo stack), even
+ * when it writes what was already there.
+ */
+declare const placeNode: (doc: Y.Doc, id: string, position: XYPosition, size?: {
+    width: number;
+    height: number;
+}) => boolean;
+declare const moveNode: (doc: Y.Doc, id: string, position: XYPosition) => boolean;
+/** Resize a node: both sides, or just its width or height (e.g. text, whose height follows what's in it) */
+declare const resizeNode: (doc: Y.Doc, id: string, size: {
+    width: number;
+    height: number;
+}, attributes?: true | "width" | "height") => boolean;
+/** 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.
+ */
+type RenderedSizes = ReadonlyMap<string, {
+    width: number;
+    height: number;
+}>;
+declare const fitGroupToChildren: (doc: Y.Doc, groupId: string, sizes?: RenderedSizes) => void;
+/** The containers a node is in grow to fit it (innermost first), e.g. after it's added or resized */
+declare const fitContainersAround: (doc: Y.Doc, nodeId: string, sizes?: RenderedSizes) => void;
+/**
+ * A node moved into (or out of) a container: where it is on the canvas, or put at `at` (in its new parent), e.g. when
+ * it's moved on L1 or L2, where it was dropped isn't a place on the canvas
+ */
+declare const setNodeParent: (doc: Y.Doc, nodeId: string, parentId: string | undefined, sizes?: RenderedSizes, at?: XYPosition) => boolean;
+/**
+ * Nodes moved into (or out of) containers together, e.g. a selection dropped in one, as one change: each where it is
+ * on the canvas, or at its `at` (in its new parent). The containers they went in (and those around them) are fitted
+ * once they're all in, so one growing doesn't move where the next was put. Returns the ids of those moved.
+ */
+declare const setNodeParents: (doc: Y.Doc, moves: {
+    id: string;
+    parentId: string | undefined;
+    at?: XYPosition;
+}[], sizes?: RenderedSizes) => string[];
+declare const updateNodeData: (doc: Y.Doc, id: string, updater: (data: Record<string, unknown>) => Record<string, unknown>) => boolean;
+
+/** An edge's route, if it has one */
+declare const getEdgeRoute: (edge: Pick<Edge, "data">) => EdgeRoute | undefined;
+/** Routes connections (by edge id), in one transaction. Connections not in it lose any route they had. */
+declare const setEdgeRoutes: (doc: Y.Doc, routes: ReadonlyMap<string, EdgeRoute>) => void;
+/**
+ * What's on a canvas and how it's connected, not where: its nodes (not notes), what they're in and called, and its
+ * connections. The same for the same canvas wherever it's worked out (the server, any browser).
+ */
+declare const getStructureKey: (nodes: Node[], edges: Edge[]) => string;
+/** The diagram's L1 or L2 while the canvas still has the structure it was opened with (`structure`, its key now) */
+declare const getDiagramLevel: (levels: DiagramLevels | undefined, level: 1 | 2, structure: string) => DiagramLevel | undefined;
+/** Why the diagram doesn't have a level, while the canvas still has the structure it was opened with */
+declare const getDiagramLevelUnavailable: (levels: DiagramLevels | undefined, level: 1 | 2, structure: string) => string | undefined;
+/** What a new canvas starts with: its nodes, the connections between them (by node id) with their routes, and the
+ * levels of the diagram it's opened from */
+type CanvasContent = {
+    nodes: Node[];
+    connections: {
+        from: string;
+        to: string;
+        label?: string;
+        route?: Pick<EdgeRoute, "points" | "label">;
+    }[];
+    levels?: Pick<DiagramLevels, 1 | 2 | "unavailable">;
+};
+/**
+ * Puts a new canvas's content on it (in one transaction), with its containers fitted to what's in them. Routes
+ * are from where the nodes are put.
+ */
+declare const addCanvasContent: (doc: Y.Doc, { nodes, connections, levels }: CanvasContent) => void;
+declare const connectNodes: (doc: Y.Doc, connection: Pick<Connection, "source" | "target"> & Partial<Connection>, label?: string) => Edge | {
+    error: string;
+};
+/**
+ * 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.
+ */
+declare const reconnectEdge: (doc: Y.Doc, edgeId: string, connection: Connection) => Edge | {
+    error: string;
+};
+/**
+ * What a connection says: written by someone (kept as it's written, and in the model), or, with nothing written,
+ * EventCatalog's wording for what it joins again
+ */
+declare const setEdgeLabel: (doc: Y.Doc, edgeId: string, label: string | undefined) => boolean;
+declare const deleteEdges: (doc: Y.Doc, ids: string[]) => void;
+/** Delete nodes (containers with what's in them), the edges to them, and leave their comments where they were */
+declare const deleteNodes: (doc: Y.Doc, ids: string[]) => void;
+declare const readThreads: (doc: Y.Doc) => Thread[];
+/** Threads as they were (from a saved canvas: their ids, authors and messages kept) */
+declare const addThreads: (doc: Y.Doc, threads: Thread[]) => void;
+declare const createThread: (doc: Y.Doc, anchor: CommentAnchor, text: string, author: Author) => string;
+declare const replyToThread: (doc: Y.Doc, threadId: string, text: string, author: Author) => boolean;
+declare const setThreadResolved: (doc: Y.Doc, threadId: string, resolved: boolean) => boolean;
+/** Move a thread's pin, attaching it to a node (anchor.nodeId) or to the canvas */
+declare const moveThread: (doc: Y.Doc, threadId: string, anchor: CommentAnchor) => boolean;
+declare const deleteThread: (doc: Y.Doc, threadId: string) => boolean;
+/** Deletes comment threads in one change (one undo brings them all back) */
+declare const deleteThreads: (doc: Y.Doc, threadIds: string[]) => void;
+/** Moves comment threads in one change, e.g. ones that moved with what was dragged */
+declare const moveThreads: (doc: Y.Doc, moves: {
+    threadId: string;
+    anchor: CommentAnchor;
+}[]) => void;
+declare const readHotspots: (doc: Y.Doc) => Hotspot[];
+/** Hotspots as they were (from a saved canvas, or the agent's diagram) */
+declare const addHotspots: (doc: Y.Doc, hotspots: Hotspot[]) => void;
+declare const createHotspot: (doc: Y.Doc, hotspot: Omit<Hotspot, "id" | "createdAt">) => string;
+/** Change what a hotspot says (or where it is: on a node, or at a place) */
+declare const updateHotspot: (doc: Y.Doc, id: string, fields: Partial<Omit<Hotspot, "id" | "createdAt" | "author">>) => boolean;
+declare const deleteHotspot: (doc: Y.Doc, id: string) => boolean;
+declare const readCanvas: (doc: Y.Doc) => {
+    meta: CanvasMeta;
+    nodes: Node[];
+    edges: Edge[];
+    threads: Thread[];
+    hotspots: Hotspot[];
+};
+
+/**
+ * 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) */
+declare const CLIPBOARD_TYPE = "application/x-eventcatalog-studio+json";
+declare const MARKER = "eventcatalog-studio/nodes@1";
+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 */
+declare const copyNodes: (nodes: Node[], edges: Edge[], selectedIds: string[]) => ClipboardContent | null;
+/** Copied content read back from the clipboard, if it's Studio's */
+declare const readClipboard: (text: string | undefined) => ClipboardContent | 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.
+ */
+declare const pasteNodes: (content: ClipboardContent, existing: Node[], place: {
+    at: XYPosition;
+} | {
+    offset: XYPosition;
+}) => {
+    nodes: Node[];
+    edges: Edge[];
+};
+
+/** Connections on a canvas, labelled with EventCatalog's wording (e.g. "publishes event", "subscribed by") */
+/** Node types that are messages, and their catalog collection */
+declare const MESSAGE_COLLECTIONS: Record<string, string>;
+declare const EDGE_COLOR = "#6b7280";
+declare const EDGE_MARKER: EdgeMarker;
+declare const getEdgeLabel: (sourceType?: string, targetType?: string) => string;
+/** Message edges get the animated envelope edge from the visualiser, everything else a labelled smooth step edge */
+declare const createEdge: (connection: Connection, sourceType?: string, targetType?: string) => Edge;
+
+/**
+ * Where a connection joins an entity: a property's row (the visualiser's `<property>-target` on its left and
+ * `<property>-source` on its right), or the entity as a whole: its header (the visualiser's target there, and a
+ * source the canvas adds beside it).
+ */
+declare const ENTITY_SOURCE_HANDLE = "__entity-source";
+
+/**
+ * The design (nodes and edges) comes from the shared document; some state stays with each person: what they
+ * have selected, what they're dragging and resizing, and the sizes React Flow measured in their browser.
+ */
+declare const LOCAL_NODE_KEYS: readonly ["selected", "dragging", "resizing", "measured"];
+declare const LOCAL_EDGE_KEYS: readonly ["selected"];
+/** A shared item with the local-only state of the one already shown. Nothing else is kept from the local one. */
+declare const withLocalState: <T extends object>(shared: T, local: T | undefined, localKeys: readonly (keyof T)[]) => T;
+/**
+ * Applies changes to shared items (by id) to the items shown, keeping every unchanged item as the same object
+ * (so React Flow doesn't re-render it) and the order they were first seen in (new ones go at the end).
+ * `getShared` returns an item's shared value, or undefined if it was deleted. Returns `local` itself when
+ * nothing changed.
+ */
+declare const patchShared: <T extends {
+    id: string;
+}>(local: T[], changedIds: Iterable<string>, getShared: (id: string) => T | undefined, localKeys: readonly (keyof T)[]) => T[];
+/**
+ * Items worked out again (e.g. a level arranged again), keeping each one that hasn't changed as the object already
+ * shown (so React Flow doesn't re-render it), and the local-only state of the ones that have. Returns `previous`
+ * itself when nothing changed.
+ */
+declare const keepUnchanged: <T extends {
+    id: string;
+}>(previous: T[], next: T[], localKeys: readonly (keyof T)[]) => T[];
+/** Where nodes being dragged are, by id, until they're dropped (and saved) */
+type Moves = ReadonlyMap<string, XYPosition>;
+/**
+ * Nodes moved to the positions given (e.g. where someone else is dragging them), except ones being dragged
+ * here. Returns `nodes` itself when none move.
+ */
+declare const withPositions: (nodes: Node[], positions: Moves) => Node[];
+/**
+ * After shared changes are applied (`next`, from `previous`): nodes being dragged here stay where they're being
+ * dragged (when they're dropped, the drop is saved and wins). Returns `next` itself when none are.
+ */
+declare const keepDragged: (next: Node[], previous: Node[]) => Node[];
+
+/**
+ * Containers: domains and systems shown as boxes that other nodes sit in.
+ * A node inside one has its parentId, and its position is relative to the container.
+ */
+/** Room around what's in a container, and for its header */
+declare const GROUP_PADDING: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/** A node's size: as rendered (in the browser), as set (containers, notes), or what its type renders at */
+declare const sizeOf: (node: Node) => {
+    width: number;
+    height: number;
+};
+/** Nodes are positioned relative to their container, so walk up the chain to get the canvas position */
+declare const getAbsolutePosition: (node: Node, lookup: Map<string, Node>) => XYPosition;
+declare const getAbsoluteRect: (node: Node, lookup: Map<string, Node>) => Rect;
+/** React Flow needs containers before what's in them in the nodes array */
+declare const sortByHierarchy: (nodes: Node[]) => Node[];
+/** The innermost container under the centre of a node (never itself, or one of its own children) */
+declare const findDropTarget: (nodeId: string, nodes: Node[]) => Node | undefined;
+/**
+ * Where what's dragged goes when it's dropped: the containers it moves into (or out of, with no target), for the
+ * ones whose container changes. A selection follows the node held by the pointer: when that one goes into a
+ * container, or out of one, everything with it that can go there goes too (sticky notes and text never go in one).
+ * When it stays where it is, each one goes into the container under its middle, as one dragged alone does.
+ */
+declare const findDropTargets: (grabbedId: string, draggedIds: Iterable<string>, nodes: Node[]) => {
+    id: string;
+    target: Node | undefined;
+}[];
+/** The innermost container at a canvas point, for things dropped there (that can hold a kind of node, when given) */
+declare const findGroupAtPoint: (point: XYPosition, nodes: Node[], type?: string) => Node | undefined;
+/** The container something added goes in: the one asked for (by id), else the one it's dropped on */
+declare const containerFor: (point: XYPosition, nodes: Node[], inside?: string, type?: string) => Node | undefined;
+/** A node moved into (or out of, without a parentId) a container, staying in the same place on the canvas */
+declare const withParent: (node: Node, parentId: string | undefined, nodes: Node[]) => Node;
+/** The least room left between something dropped in a container and what's already in it */
+declare const DROP_GAP = 32;
+/**
+ * Where things dropped in containers go in them (relative to the container): where they were dropped when that's
+ * free and inside it, else the nearest free place, keeping inside the container (so it doesn't grow over what's around
+ * it) unless there's no room. What's dropped stays clear of what's in the container and of each other. `moves` are
+ * what `findDropTargets` returns; ones taken out of a container aren't placed (they stay where they were dropped).
+ * `nudged` when any had to move from where it was dropped (to show it gliding there).
+ */
+declare const placeDropped: (nodes: Node[], moves: {
+    id: string;
+    target: Node | undefined;
+}[], gap?: number) => {
+    places: Map<string, XYPosition>;
+    nudged: boolean;
+};
+/** A canvas point, relative to a container */
+declare const toRelativePosition: (point: XYPosition, parentId: string, nodes: Node[]) => XYPosition;
+/** Nodes and everything inside them (deleted with their container) */
+declare const withDescendants: (ids: string[], nodes: Node[]) => Set<string>;
+/**
+ * The size a container needs to fit what's inside it, never smaller than it is, and how far its children
+ * must shift when some sit above or left of its content area (so the header stays clear).
+ */
+declare const fitGroup: (groupId: string, nodes: Node[]) => {
+    shift: {
+        x: number;
+        y: number;
+    };
+    width: number;
+    height: number;
+} | undefined;
+/** How far a dragged node's middle can go past a container's edge and still be kept in it (growing it) */
+declare const KEEP_IN_CONTAINER_MARGIN = 160;
+/** A node's place and size as shown while something's dragged */
+type NodePreview = {
+    position: XYPosition;
+    width?: number;
+    height?: number;
+};
+/**
+ * Containers growing to fit what's being dragged in them, on every side, as a preview of where things will be.
+ * `containerIds` are the containers around what's dragged, innermost first. `start` is the canvas when the drag
+ * started, and `now` the canvas as shown (with the dragged nodes where they are now). A dragged node is kept in a
+ * container while its middle is within `KEEP_IN_CONTAINER_MARGIN` of where the container was, and dropping it
+ * further away takes it out, so the container goes back to its size. A container growing up or left moves, and
+ * what's in it moves the other way, so nothing moves on the canvas.
+ *
+ * Returns, by id, where containers and the nodes in them that aren't dragged go (positions relative to their
+ * containers), and their sizes for containers.
+ */
+declare const previewContainerGrowth: (containerIds: string[], draggedIds: ReadonlySet<string>, start: ReadonlyMap<string, Node>, now: ReadonlyMap<string, Node>) => Map<string, NodePreview>;
+
+/**
+ * Lays a canvas out with the same ELK layout as EventCatalog's visualiser (left to right, edges routed
+ * around nodes, containers laid out with what's in them and sized to fit). Nodes are sized as rendered when
+ * they have been (in the browser), or by their type.
+ */
+declare const layoutGraph: (nodes: Node[], edges: Edge[]) => Promise<LayoutGraph>;
+/** The layout sizes containers with style.width/height; the canvas sizes them with width/height */
+declare const withGroupSizes: (nodes: Node[]) => Node[];
+type LayoutResult = {
+    /** Where each node goes (relative to its container, if it's in one), and containers' new sizes */
+    nodes: Map<string, {
+        position: XYPosition;
+        size?: {
+            width: number;
+            height: number;
+        };
+    }>;
+    /** How each connection is drawn (around the nodes), by edge id */
+    routes: Map<string, EdgeRoute>;
+};
+/**
+ * The canvas laid out: new positions for its nodes, new sizes for containers, and routes for the connections
+ * (drawn like the visualiser's: around the nodes, following them when they're moved, and as a plain step once
+ * they've moved too far for it). Notes added on L1 or L2 aren't on this canvas, so they stay where they are.
+ */
+declare const getLayoutPositions: (nodes: Node[], edges: Edge[]) => Promise<LayoutResult>;
+
+/**
+ * L1 and L2 as people arrange them. A level's content comes from the canvas (see levels.ts), but where things are on
+ * it is its own: each level keeps a layout (a LevelPlace per node, in the canvas), so things stay where they're put.
+ * Nothing on a level moves when something's added: new things are placed next to what they connect to (like agents
+ * place what they add) and containers grow to fit.
+ */
+type Graph = {
+    nodes: Node[];
+    edges: Edge[];
+};
+/**
+ * The size something new of a type is shown at on L1 or L2: L1 shows domains and systems with nothing in them as
+ * cards, L2 as empty containers
+ */
+declare const getLevelNodeSize: (type: string | undefined, level: 1 | 2) => LayoutSize;
+/** A level's nodes where they are, by id (not its notes, which are kept on the canvas): what its layout keeps */
+declare const levelPlaces: (nodes: Node[]) => Map<string, LevelPlace>;
+/**
+ * A level arranged: each node where the level's layout has it, else where the diagram the canvas was opened from had
+ * it (`fallback`), and anything with neither placed next to what it connects to. Containers grow to fit what's in
+ * them. `placed` is where things the layout didn't have were put, and containers that grew (to keep, so they stay
+ * there). Undefined when nothing on the level has a place yet: it's laid out from scratch then.
+ */
+declare const arrangeLevel: (graph: Graph, layout: ReadonlyMap<string, LevelPlace>, fallback?: ReadonlyMap<string, LevelPlace>) => {
+    graph: Graph;
+    placed: Map<string, LevelPlace>;
+} | undefined;
+/**
+ * A level's edges drawn along the routes the diagram the canvas was opened from had for the same connections (between
+ * the same two nodes), once the level's worked out from the canvas: routes follow their nodes when they move, so
+ * connections the diagram had stay drawn around what's in their way
+ */
+declare const withDiagramRoutes: (edges: Edge[], diagramEdges?: Edge[]) => Edge[];
+
+/**
+ * Levels of detail, the same as EventCatalog's diagrams:
+ * - L1: domains, systems and how they relate (services folded into the system or domain that contains them)
+ * - L2: services and data stores, with messages, channels and agents hidden (the nodes either side connected directly)
+ * - L3: everything, including messages and channels (the canvas people edit)
+ *
+ * What a domain or system contains is what sits inside it (as a container), or what it's connected to with
+ * "contains" (as a card, which catalog domains and systems get when their services are on the canvas).
+ */
+type Level = 1 | 2 | 3;
+declare const LEVELS: {
+    level: Level;
+    description: string;
+}[];
+/**
+ * The graph for a level (not laid out: positions come from the layout). Notes aren't in it: the ones added on the
+ * level are shown where they were put, over its layout.
+ */
+declare const getLevelGraph: (nodes: Node[], edges: Edge[], level: Level) => {
+    edges: Edge[];
+    nodes: Node[];
+};
+/** Why a level can't be shown for this canvas, if it can't */
+declare const getLevelUnavailableReason: (nodes: Node[], level: Level) => string | undefined;
+
+/**
+ * What the others on a live canvas are doing that the canvas shows as they do it, whatever carries it between them
+ * (Yjs awareness, or an encrypted relay): what they're dragging, and the note or text they're changing. What they end
+ * up with arrives in the document.
+ */
+/**
+ * A node someone's dragging, where it is now (relative to its container, as nodes are), and on which level (L1 and L2
+ * are arranged on their own; none is the canvas itself, L3). A comment pin or hotspot marker has its `kind` (and its
+ * thread's or hotspot's id), where it is on the canvas.
+ */
+type Moving = {
+    id: string;
+    x: number;
+    y: number;
+    level?: 1 | 2;
+    kind?: "comment" | "hotspot";
+};
+/** A note or text being changed: what's written as they type, a text's size as they scale it, its angle as they turn it */
+type Editing = {
+    id: string;
+    text?: string;
+    fontSize?: number;
+    angle?: number;
+};
+/** Someone on the canvas, as far as what they move and change goes */
+type LivePeer = {
+    /** What they're dragging, while they drag (the drop itself arrives in the document) */
+    moving?: Moving[] | null;
+    editing?: Editing | null;
+};
+/**
+ * Everyone's presence, for what draws it: read now, and told on every change, outside React (it changes many times a
+ * second; in React state it would re-render the whole canvas on every move)
+ */
+type PresenceSource<P extends LivePeer = LivePeer> = {
+    current: () => ReadonlyMap<string, P>;
+    subscribe: (listener: (peers: ReadonlyMap<string, P>) => void) => () => void;
+};
+
+/**
+ * Comment pins and hotspot markers being dragged in a live room: what I drag goes out with my presence (`send`, and
+ * `null` once it's dropped: the drop goes in the document), and what the others drag comes from theirs (`source`).
+ * On the level shown, as their places are.
+ */
+type LiveMoves = {
+    send: (moving: Moving[] | null) => void;
+    source: PresenceSource;
+    level: 1 | 2 | 3;
+};
+/** Sends where something of this kind is now, as it's dragged (or `null`, dropped) */
+declare const sendMove: (live: LiveMoves | undefined, kind: NonNullable<Moving["kind"]>, id: string, at: XYPosition | null) => void | undefined;
+/**
+ * Where the others are dragging things of this kind on the level shown (by id), read from their presence. Changes
+ * (re-rendering only the layer using it) only while someone drags one.
+ */
+declare function useRemoteMoves(live: LiveMoves | undefined, kind: NonNullable<Moving["kind"]>): ReadonlyMap<string, XYPosition>;
+
+/**
+ * The kinds of node people (and agents) can put on a canvas, and what's in their data. Shared by the browser and
+ * the server, so it has no UI in it: the icons for each type are in components/icons.ts.
+ */
+type NodeCategory = "boundaries" | "people" | "messages" | "architecture" | "data" | "other";
+declare const NODE_CATEGORIES: {
+    id: NodeCategory;
+    label: string;
+}[];
+/** The catalog collections whose resources can go on a canvas */
+declare const CATALOG_COLLECTIONS: readonly ["domains", "systems", "services", "events", "commands", "queries", "channels", "containers"];
+type CatalogCollection = (typeof CATALOG_COLLECTIONS)[number];
+declare const isCatalogCollection: (collection: string) => collection is CatalogCollection;
+/** Domains and systems as containers: boxes other nodes sit in */
+declare const GROUP_TYPES: {
+    readonly domain: "domain-group";
+    readonly system: "system-group";
+};
+declare const isGroupType: (type?: string) => type is "domain-group" | "system-group";
+type NodeDefinition = {
+    /** React Flow node type, matches the visualiser node component keys */
+    type: string;
+    /** Its key in the components list when several share a node type (the kinds of data store); else its type */
+    id?: string;
+    label: string;
+    /** What it is, in a few words (beside its name in the components list) */
+    summary?: string;
+    category: NodeCategory;
+    /** Not in the components list (still drawn, for canvases that have them) */
+    unlisted?: boolean;
+    /** Where the resource lives inside node.data (e.g. `service` for data.service). Undefined = data root */
+    resourceKey?: string;
+    /** Nodes that are sized on the canvas (containers, notes, text) start at this size */
+    defaultSize?: {
+        width: number;
+        height: number;
+    };
+    /** Only its width is set: its height follows what's in it (notes) */
+    autoHeight?: boolean;
+    /** Neither is set: it's as big as what's in it (text, as Excalidraw's; defaultSize is only where it's put) */
+    autoSize?: boolean;
+    /**
+     * The first level of detail that shows it (it's on the more detailed ones too, see levels.ts): L1 domains, systems
+     * and actors, L2 services, data stores, text and the like, L3 messages and channels. Notes are on every level.
+     */
+    firstLevel: 1 | 2 | 3;
+    createData: () => Record<string, unknown>;
+};
+declare const nodeDefinitions: NodeDefinition[];
+/** A component's key in the components list (and what's dragged from it) */
+declare const componentKey: (definition: NodeDefinition) => string;
+/** The types people and agents can add (not the unlisted ones), each once (the kinds of data store are all `data`) */
+declare const COMPONENT_TYPES: [string, ...string[]];
+declare const getNodeDefinition: (type?: string) => NodeDefinition | undefined;
+declare const getNodeLabel: (type?: string) => string;
+declare const DEFAULT_NODE_SIZE: {
+    width: number;
+    height: number;
+};
+/** The size a new node of a type starts at (or, for cards, about the size it renders at) */
+declare const getNodeSize: (type?: string) => {
+    width: number;
+    height: number;
+};
+/** The resource object for a node (e.g. data.service), or the data itself for flat nodes */
+declare const getResource: (type: string | undefined, data: Record<string, unknown>) => Record<string, unknown>;
+/** Sticky notes sit on the canvas wherever they're put, never inside a container */
+declare const canGoInContainer: (type?: string) => boolean;
+/**
+ * Whether a container can hold a kind of node, as EventCatalog's domains and systems do: a domain holds anything
+ * (subdomains, systems, services...), a system anything but a domain
+ */
+declare const canHold: (containerType?: string, type?: string) => boolean;
+/**
+ * The level (L1, L2 or L3) a sticky note or text was written on: it's only shown there. Ones from before they had
+ * levels are on L3, the canvas people edit. Other nodes are on every level they fit in, so they have none.
+ */
+declare const getNoteLevel: (node: {
+    type?: string;
+    data: Record<string, unknown>;
+}) => 1 | 2 | 3 | undefined;
+/** Whether a node is on a level's canvas as itself: everything on L3, but notes and text only on their level */
+declare const isOnLevel: (node: {
+    type?: string;
+    data: Record<string, unknown>;
+}, level: 1 | 2 | 3) => boolean;
+/** Whether a level of detail shows a kind of node (so it can be added there, and stay there) */
+declare const isShownOnLevel: (type: string | undefined, level: 1 | 2 | 3) => boolean;
+/** Whether a node's resource has a version (actors, notes and text don't) */
+declare const isVersioned: (type?: string) => boolean;
+/** Notes and text: written on the canvas itself (their text is their data, not a resource with a name) */
+declare const isWrittenOnCanvas: (type?: string) => type is "note" | "text";
+/** Returns new node data with fields of the resource changed */
+declare const updateResource: (type: string | undefined, data: Record<string, unknown>, fields: Record<string, unknown>) => {
+    [x: string]: unknown;
+};
+/** A node's name, as people and agents see it */
+declare const getNodeName: (type: string | undefined, data: Record<string, unknown>, fallback?: string) => string;
+
+/**
+ * Where agents put what they add without a position, the way an architect would: next to what it connects to,
+ * following the flow left to right (what sends to it on its left, what it sends to on its right), lined up with
+ * it, and stacked around it when several things connect to the same node. Nothing already on the canvas moves.
+ * Things connected to nothing go in a row below what's there. Containers are filled first, so what goes around them
+ * leaves room for what they grow to hold.
+ */
+/** A connection between two nodes, from the one that sends to the one that receives */
+type Link = {
+    source: string;
+    target: string;
+};
+/**
+ * Where the nodes to place go on the canvas (not relative to their containers: containers that grow to fit them
+ * move what's in them, but nothing moves on the canvas). They're among `nodes`, with their containers set.
+ * Everything else in `nodes` stays where it is.
+ */
+declare const placeNodes: (nodes: Node[], toPlace: string[], links: Link[]) => Map<string, XYPosition>;
+
+/**
+ * Smooths what the others in a live room are moving. Their positions arrive about 30 times a second (and unevenly,
+ * as the network goes), while the screen draws 60 to 120 times a second: shown as they arrive, what they drag steps
+ * along and stutters. Here each one glides to where it was last said to be, a step every frame, easing in about
+ * EASE_MS (a little behind them, smoothly). Frames only run while something's still gliding.
+ */
+type XY = {
+    x: number;
+    y: number;
+};
+type Smoother = {
+    /** Where each thing (by id) is now, as the others say; anything left out stops being shown straight away */
+    set: (targets: ReadonlyMap<string, XY>) => void;
+    stop: () => void;
+};
+declare function createSmoother(apply: (shown: ReadonlyMap<string, XY>) => void): Smoother;
+
+/** 1 / zoom, for things drawn in the canvas's coordinates that stay the same size on screen (`scale(var(...))`) */
+declare const COUNTER_SCALE = "--studio-counter-scale";
+/**
+ * Keeps COUNTER_SCALE on an element as the canvas zooms, outside React: what's counter-scaled with it (e.g. comment
+ * pins) stays the same size on screen without re-rendering on every frame of a zoom
+ */
+declare function useCounterScale(ref: RefObject<HTMLElement | null>): void;
+
+/** Instead of React Flow's `EdgeLabelRenderer`: HTML drawn over the edges, in the canvas's coordinates */
+declare function EdgeLabelPortal({ children }: {
+    children: ReactNode;
+}): react.ReactPortal | null;
+/** Instead of React Flow's `ViewportPortal`: drawn above the nodes, in the canvas's coordinates */
+declare function CanvasPortal({ children }: {
+    children: ReactNode;
+}): react.ReactPortal | null;
+
+/**
+ * The model (what agents send, links carry and files keep) as Studio's canvas (React Flow nodes and edges, as
+ * Studio's canvas-doc keeps them), and back. Each resource is a node with the resource's id, so what's arranged,
+ * linked and saved lines up with the agent's ids. Relations are edges (what each edge stands for is kept on it);
+ * notes are sticky note and text nodes, on their level; where things are goes in the model's layout.
+ */
+
+declare const resourceTypeOf: (nodeType?: string) => "system" | "actor" | "domain" | "service" | "agent" | "event" | "query" | "command" | "channel" | "view" | "team" | "entity" | "container" | "external-system";
+type ModelCanvasContent = {
+    nodes: Node[];
+    edges: Edge[];
+    levelLayouts: Record<1 | 2, Map<string, LevelPlace>>;
+    /** Comment threads people left on it */
+    threads?: Thread[];
+    /** What's flagged on it (by people, or the agent) */
+    hotspots?: Hotspot[];
+    /** A live room's document as this browser kept it: the canvas starts from that instead (see local-canvas.ts) */
+    doc?: Uint8Array;
+};
+/** A resource's node data, as Studio's components for its type create it (and the resource itself, to keep what the canvas doesn't show) */
+declare function resourceNodeData(resource: Resource): Record<string, unknown>;
+declare function modelToCanvas(model: Model, seed?: {
+    nodes: Node[];
+}): Promise<ModelCanvasContent>;
+/** The canvas as the model: its resources, relations and notes (through what's still on it), and where things are */
+declare function canvasToModel(nodes: Node[], edges: Edge[], levelLayouts: Record<1 | 2, ReadonlyMap<string, LevelPlace>>, base: Model, threads?: Thread[], hotspots?: Hotspot[]): Model;
+
+/**
+ * "Save to file" and "Open": a diagram as a .eventcatalog file (JSON: the model, with its notes, comments and
+ * hotspots, and where it was focused), as drawing tools save theirs. The same file in Studio on the web and in
+ * EventCatalog's Studio, so a diagram moves between them.
+ */
+
+declare const DIAGRAM_FILE_EXTENSION = ".eventcatalog";
+declare const fileNameFor: (title: string, extension: string) => string;
+declare function toDiagramFile(model: Model, { focus, level }?: {
+    focus?: string;
+    level?: Level$1;
+}): string;
+/** The diagram in a .eventcatalog file (or a bare model, as the agent writes them), or why it can't be opened */
+declare function readDiagramFile(file: File): Promise<Pick<ArchitecturePayload, "model" | "focus" | "level"> | {
+    error: string;
+}>;
+/** Downloads a file (text, or base64 for binary files such as images) */
+declare function downloadFile({ name, mimeType, text, base64, }: {
+    name: string;
+    mimeType: string;
+    text?: string;
+    base64?: string;
+}): boolean;
+/** A name typed for the file, made safe to save, with the extension on the end */
+declare function cleanFileName(name: string, extension: string): string;
+type WritableFile = {
+    createWritable: () => Promise<{
+        write: (data: string) => Promise<void>;
+        close: () => Promise<void>;
+    }>;
+    name: string;
+};
+type SavedFileHandle = WritableFile;
+declare const canPickWhereToSave: () => boolean;
+/** Writes to a file picked (or picked before): the handle, undefined when they cancelled */
+declare function saveToPickedFile(text: string, { suggestedName, handle, }: {
+    suggestedName: string;
+    handle?: SavedFileHandle;
+}): Promise<WritableFile | undefined>;
+/** Asks for a .eventcatalog file to open */
+declare function pickDiagramFile(): Promise<File | undefined>;
+
+/** The canvas in `container` as a PNG (a data URL), or undefined when there's nothing on it */
+declare function canvasImage(container: HTMLElement): Promise<string | undefined>;
+
+/** How the canvas draws each kind of node: the visualiser's nodes, notes and text written on the canvas, and resizable containers */
+type UpdateNodeData = (id: string, updater: (data: Record<string, unknown>) => Record<string, unknown>) => void;
+declare const UpdateNodeDataContext: react.Context<UpdateNodeData>;
+/** Tells a live room what's being changed on a note or text as it changes (nothing: done) */
+declare const EditingContext: react.Context<(editing: Editing | null) => void>;
+declare const DropTargetContext: react.Context<string | null>;
+declare const StartWritingContext: react.Context<string | null>;
+declare const LockedContext: react.Context<boolean>;
+/**
+ * Text written straight on the canvas (titles, labels, notes to self), as Excalidraw's: as big as what's written,
+ * in a box with corners to scale it (its font grows with it) and a handle above to turn it. Double click it to write.
+ */
+/** Text's size when it's first written */
+declare const TEXT_FONT_SIZE = 22;
+declare const nodeTypes: NodeTypes;
+
+declare const timeAgo: (timestamp: number) => string;
+/** Where a pin sits on the canvas: on its node (so it moves with it), or where it was dropped */
+declare const getAnchorPosition: (anchor: CommentAnchor, nodesById: Map<string, Node>) => XYPosition;
+/** Pinned to a node, a comment keeps its offset from the node so it moves with it */
+declare const anchorAt: (position: XYPosition, node?: Node, nodesById?: Map<string, Node>) => CommentAnchor;
+/**
+ * Comment pins (and the open thread) on the canvas, in its own coordinates (React Flow's viewport portal) so
+ * they move with it without re-rendering, counter-scaled to stay the same size on screen. Each pin follows
+ * only its own node, so other nodes moving don't re-render them.
+ */
+declare const CommentLayer: react.NamedExoticComponent<{
+    threads: Thread[];
+    author: Author;
+    openThreadId: string | null;
+    /** Threads that are part of what's selected */
+    selectedIds: ReadonlySet<string>;
+    /** How far what's selected has been dragged: selected pins not on a node move with it */
+    selectionOffset: XYPosition | null;
+    draft: CommentAnchor | null;
+    showResolved: boolean;
+    onOpen: (threadId: string | null) => void;
+    onCreate: (text: string) => void;
+    onCancelDraft: () => void;
+    onReply: (threadId: string, text: string) => void;
+    onResolve: (threadId: string, resolved: boolean) => void;
+    onDelete: (threadId: string) => void;
+    onMove: (threadId: string, anchor: CommentAnchor) => void;
+    onMoveDraft: (anchor: CommentAnchor) => void;
+    /** In a live room: pins the others are dragging move here as they drag, and mine move for them */
+    live?: LiveMoves;
+}>;
+/** All threads, for the left panel. Clicking one opens it on the canvas. */
+declare function CommentList({ threads, showResolved, onToggleResolved, onOpen, }: {
+    threads: Thread[];
+    showResolved: boolean;
+    onToggleResolved: () => void;
+    onOpen: (thread: Thread) => void;
+}): react_jsx_runtime.JSX.Element;
+
+type ContextMenuState = {
+    x: number;
+    y: number;
+    flowPosition: XYPosition;
+    node?: Node;
+} | null;
+/** Something to ask the agent about the node right clicked */
+type MenuQuestion = {
+    label: string;
+    onSelect: () => void;
+};
+declare const ContextMenu: react.NamedExoticComponent<{
+    menu: ContextMenuState;
+    /** For the node right clicked */
+    questions?: MenuQuestion[];
+    onCopy: () => void;
+    onDuplicate: () => void;
+    /** Paste what was last copied where the menu was opened, if anything was */
+    onPaste?: () => void;
+    /** A sticky note where the menu was opened (on the canvas), or beside the node */
+    onAddNote: () => void;
+    /** A comment pinned where the menu was opened (on the canvas or the node), on L3 */
+    onAddComment?: () => void;
+    /** A hotspot on the node right clicked (or where the menu was opened), on L3 */
+    onAddHotspot?: () => void;
+    /** Opens the node's details (not for notes and text, which are written on the canvas) */
+    onEditDetails?: () => void;
+    /** Lays the level shown out again (the visualiser's layout), from the canvas's menu */
+    onReorder?: () => void;
+    onDeleteNode: () => void;
+    onClose: () => void;
+}>;
+
+/**
+ * Dragging something from the left panel onto the canvas shows the node it becomes, under the pointer, at the
+ * canvas's zoom and where it will land (centred on the pointer, as it's dropped). Drawn here rather than as the
+ * browser's drag image, which browsers shrink, fade and put a backing behind.
+ */
+/** What's dragged: the node it becomes */
+type DragPreview = {
+    type: string;
+    data: Record<string, unknown>;
+};
+/** Starts dragging `value` as `dragType`, showing `preview` as what's dragged */
+type StartDrag = (dragType: string, value: string, preview: DragPreview) => (event: DragEvent) => void;
+/** The ghost of what's being dragged, and how to start dragging something with one */
+declare function useDragGhost(): {
+    startDrag: StartDrag;
+    ghost: react_jsx_runtime.JSX.Element | null;
+};
+
+declare const SEVERITIES: Record<HotspotSeverity, {
+    label: string;
+    color: string;
+    icon: LucideIcon;
+    rank: number;
+}>;
+/** Most important first (then oldest first) */
+declare const bySeverity: (a: Hotspot, b: Hotspot) => number;
+declare const topSeverity: (hotspots: Hotspot[]) => HotspotSeverity;
+/** Hotspots shown together: on a node (its own, or on L1 and L2 also the ones inside it), or one at a place */
+type HotspotSpot = {
+    key: string;
+    nodeId?: string;
+    position?: XYPosition;
+    hotspots: Hotspot[];
+    inside?: boolean;
+};
+/** A hotspot being added: on a node, or at a place */
+type HotspotDraft = {
+    nodeId?: string;
+    position: XYPosition;
+    level?: 1 | 2;
+};
+type HotspotFields = {
+    severity: HotspotSeverity;
+    title: string;
+    description?: string;
+};
+/** Where a hotspot is put: on a node (it moves with it), or at a place */
+type HotspotPlace = {
+    nodeId?: string;
+    position: XYPosition;
+};
+declare const HotspotLayer: react.NamedExoticComponent<{
+    spots: HotspotSpot[];
+    openKey: string | null;
+    draft: HotspotDraft | null;
+    locked: boolean;
+    /** Markers can be dragged to another node, or a place (on the canvas itself, L3) */
+    movable: boolean;
+    /** Hotspots that are part of what's selected (after selecting everything) */
+    selectedIds: ReadonlySet<string> | null;
+    /** Moved: the hotspots at a marker, onto a node or to a place */
+    onMove: (ids: string[], to: HotspotPlace) => void;
+    /** The node a marker being dragged would go on (and its colour), to light it up; none when it's dropped */
+    onDropTarget: (target: {
+        nodeId: string;
+        severity: HotspotSeverity;
+    } | null) => void;
+    onOpen: (key: string | null) => void;
+    onCreate: (fields: HotspotFields) => void;
+    onCancelDraft: () => void;
+    onUpdate: (id: string, fields: HotspotFields) => void;
+    onDelete: (id: string) => void;
+    onGo: (hotspot: Hotspot) => void;
+    /** In a live room: markers the others are dragging move here as they drag, and mine move for them */
+    live?: LiveMoves;
+}>;
+/** All of them, most important first, for the panel at the bottom left: clicking one goes to it */
+declare function HotspotList({ hotspots, nameOf, onOpen, }: {
+    hotspots: Hotspot[];
+    nameOf: (nodeId: string) => string | undefined;
+    onOpen: (hotspot: Hotspot) => void;
+}): react_jsx_runtime.JSX.Element;
+
+/** How each kind of node, and each catalog collection, looks in the canvas's lists (the colours are each kind's own) */
+type NodeIcon = {
+    icon: LucideIcon;
+    className: string;
+};
+declare const NODE_ICONS: Record<string, NodeIcon>;
+/** The catalog's collections, in the order the catalog list shows them, with the icon of the node each becomes */
+declare const CATALOG_GROUPS: ({
+    collection: string;
+    label: string;
+} & NodeIcon)[];
+
+/**
+ * Status and destructive colours for the canvas, from the theme's badge colours (EventCatalog has no status
+ * variables), so they follow light, dark and custom themes. Kept here rather than repeated in each component.
+ */
+declare const STATUS: {
+    readonly success: {
+        readonly text: "text-[rgb(var(--ec-badge-color-green-text))]";
+        readonly dot: "bg-[rgb(var(--ec-badge-color-green-text))]";
+    };
+    readonly warning: {
+        readonly text: "text-[rgb(var(--ec-badge-color-yellow-text))]";
+        readonly dot: "bg-[rgb(var(--ec-badge-color-yellow-text))]";
+    };
+    readonly danger: {
+        readonly text: "text-[rgb(var(--ec-badge-color-red-text))]";
+        readonly dot: "bg-[rgb(var(--ec-badge-color-red-text))]";
+        readonly hover: "hover:bg-[rgb(var(--ec-badge-color-red-background))]";
+        /** A button that deletes something */
+        readonly button: "bg-[rgb(var(--ec-badge-color-red-text))] text-white hover:bg-[rgb(var(--ec-badge-color-red-text)/0.85)]";
+    };
+};
+/** How each canvas status looks and what it means (from the theme's badge colours) */
+declare const CANVAS_STATUS_LOOK: Record<CanvasStatus, {
+    label: string;
+    description: string;
+    pill: string;
+    dot: string;
+}>;
+
+declare const FIT_VIEW_OPTIONS: {
+    readonly padding: {
+        readonly top: "100px";
+        readonly right: "60px";
+        readonly bottom: "80px";
+        readonly left: "60px";
+    };
+    readonly maxZoom: 1;
+};
+declare const _default$1: react.NamedExoticComponent<{
+    level: Level;
+    onLevelChange: (level: Level) => void;
+    /** Levels this canvas can't show, and why (greyed out, with the reason) */
+    unavailableLevels?: Partial<Record<Level, string | undefined>>;
+    /** L3, the canvas itself (comments are there; L1 and L2 are arranged on their own) */
+    editable: boolean;
+    /** Nothing on the canvas can be changed (until it's unlocked) */
+    locked: boolean;
+    onToggleLock: () => void;
+    /** Who locked it (it's locked for everyone on it) */
+    lockedBy?: string | null;
+    /** Selecting and moving what's on the canvas (no tool picked) */
+    selectMode: boolean;
+    onSelectMode: () => void;
+    /** The hand: dragging moves around the canvas (nothing on it is picked up) */
+    handMode: boolean;
+    onHandMode: () => void;
+    /** The sticky note tool, on: a click on the canvas puts a note there */
+    noteMode: boolean;
+    onToggleNoteMode: () => void;
+    /** The comment tool, on: a click on the canvas (or a node) pins a comment there */
+    commentMode: boolean;
+    onToggleCommentMode: () => void;
+    /** The hotspot tool, on: a click on a node (or the canvas) flags a hotspot there */
+    hotspotMode: boolean;
+    onToggleHotspotMode: () => void;
+    /** The text tool, on: a click on the canvas writes there */
+    textMode: boolean;
+    onToggleTextMode: () => void;
+    /** More buttons at the end of the bar (e.g. replaying the agent's walkthrough) */
+    extras?: ReactNode;
+}>;
+
+/** The bottom-left controls, as Excalidraw's: zooming, undo and redo, then fitting it to the view and laying it out again */
+declare const ViewControls: react.NamedExoticComponent<{
+    canUndo: boolean;
+    canRedo: boolean;
+    onUndo: () => void;
+    onRedo: () => void;
+    /** Lays it out again with the visualiser's layout */
+    onReorder: () => void;
+    reorderLabel: string;
+    locked: boolean;
+    /** How the canvas is fitted to the view (clear of what's over it, e.g. the palette) */
+    fitOptions?: FitViewOptions;
+    /** The comments: how many are open, and showing them all */
+    comments?: {
+        open: number;
+        active: boolean;
+        onToggle: () => void;
+    };
+    /** The hotspots: how many, the most important's severity, and listing them all */
+    hotspots?: {
+        count: number;
+        severity?: HotspotSeverity;
+        active: boolean;
+        onToggle: () => void;
+    };
+}>;
+
+/**
+ * Asked when a domain or system is put on the canvas: is it a card (connected to what it contains), or a container
+ * that what it contains sits inside? Styled like the visualiser's group-by picker (boxes or lanes). One from a catalog
+ * can bring what it contains in the catalog inside it (`contents`).
+ */
+type ContainerChoice = {
+    as: "card";
+} | {
+    as: "container";
+    withContents?: boolean;
+};
+declare const CardPreview: () => react_jsx_runtime.JSX.Element;
+declare function ContainerChooser({ kind, name, contents, position, onChoose, onCancel, }: {
+    kind: "domain" | "system";
+    /** Its name, when it has one already (e.g. from a catalog) */
+    name?: string;
+    /** What it contains in the catalog that isn't on the canvas yet (offered to bring inside it, as a container) */
+    contents?: {
+        systems: number;
+        services: number;
+    };
+    /** Where to show it (screen coordinates) */
+    position: {
+        x: number;
+        y: number;
+    };
+    onChoose: (choice: ContainerChoice) => void;
+    onCancel: () => void;
+}): react_jsx_runtime.JSX.Element;
+
+declare const _default: react.NamedExoticComponent<{
+    nodeId: string;
+    locked: boolean;
+    onClick: () => void;
+}>;
+
+/** What's dragged from the palette onto the canvas: a component's key (its type, or its kind of data store) */
+declare const COMPONENT_DRAG_TYPE = "application/eventcatalog-studio";
+/**
+ * A tile in the palette: its icon, its name and what it is, picked up and dragged onto the canvas (or clicked, to
+ * add it). Greyed out (`usable` false) where it can't be added, still saying why.
+ */
+declare function PaletteItem({ icon: Icon, iconClassName, label, description, usable, onDragStart, onClick, title, trailing, }: {
+    icon: LucideIcon;
+    iconClassName?: string;
+    label: string;
+    description?: ReactNode;
+    usable?: boolean;
+    onDragStart?: (event: DragEvent) => void;
+    onClick?: () => void;
+    title?: string;
+    /** At the end instead of the drag handle (e.g. "on the canvas") */
+    trailing?: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/** A section of tiles, under a small heading */
+declare function PaletteSection({ title, divided, children, }: {
+    title: ReactNode;
+    /** A line above it (e.g. what this level doesn't show, at the bottom) */
+    divided?: boolean;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/** A tab an app adds beside the components: what it lists, given how to start dragging something onto the canvas */
+type PaletteTab = {
+    id: string;
+    label: string;
+    /** A count beside its name (e.g. open comments) */
+    badge?: number;
+    render: (startDrag: StartDrag) => ReactNode;
+};
+declare const Palette: react.NamedExoticComponent<{
+    /** The level shown: only what it shows is listed */
+    level: Level;
+    onAddComponent: (key: string) => void;
+    /** At the bottom, under the list (e.g. taking the diagram to EventCatalog) */
+    footer?: ReactNode;
+    /** More tabs beside the components (the components are the first) */
+    tabs?: PaletteTab[];
+    /** The tab shown, when the app chooses it (it opens the palette if it's folded away) */
+    tab?: string;
+    onTabChange?: (tab: string) => void;
+    /** Starts folded away, whatever this browser remembers (and doesn't remember it), e.g. in a chat's small view */
+    startCollapsed?: boolean;
+}>;
+
+/**
+ * Help: the keyboard shortcuts, as drawing tools list them, in two columns where there's room. Each app shows them in
+ * its own dialog, leaving out what it doesn't have (by label).
+ */
+declare const SHORTCUTS: {
+    group: string;
+    items: [string, string[]][];
+}[];
+declare function ShortcutsList({ omit }: {
+    omit?: string[];
+}): react_jsx_runtime.JSX.Element;
+
+type LogoProps = SVGProps<SVGSVGElement>;
+declare const ClaudeLogo: (props: LogoProps) => react_jsx_runtime.JSX.Element;
+declare const ClaudeCodeLogo: (props: LogoProps) => react_jsx_runtime.JSX.Element;
+declare const OpenAILogo: (props: LogoProps) => react_jsx_runtime.JSX.Element;
+declare const CursorLogo: (props: LogoProps) => react_jsx_runtime.JSX.Element;
+/**
+ * The logo of the company behind an agent, from the name it joined with (agentName on the MCP tools, e.g. "Claude
+ * Code", "Codex", "Cursor"), when it's one we know: shown instead of a robot on its avatar, pointer and comments
+ */
+declare const agentLogoFor: (name?: string) => ((props: LogoProps) => react_jsx_runtime.JSX.Element) | undefined;
+/** An agent's mark: its company's logo when it's one we know (agentLogoFor), else a robot */
+declare function AgentMark({ name, size, }: {
+    name?: string;
+    size?: number;
+}): react_jsx_runtime.JSX.Element;
+
+type EmptyCanvasProps = {
+    /** Opening a .eventcatalog file (not offered when not given, e.g. inside a chat) */
+    onOpen?: () => void;
+    onHelp: () => void;
+    /** How to connect an AI agent to this server (when there's one to connect to) */
+    onConnect?: () => void;
+    /** The resources panel is on the left, to point to */
+    palette?: boolean;
+    /** Live sessions can be started (from Share, top right), to point to */
+    live?: boolean;
+    /** The welcome in the middle (the brand, what it's for, Open, Connect, Help); without it, just the hints */
+    welcome?: boolean;
+};
+declare function EmptyCanvas({ welcome, onOpen, onHelp, onConnect, palette, live, }: EmptyCanvasProps): react_jsx_runtime.JSX.Element | null;
+
+/** pointsAt: how far down the node's middle is (for an arrow from the modal to it), when the modal is beside it */
+type Anchor = {
+    top: number;
+    left: number;
+    side: "right" | "left";
+    pointsAt?: number;
+};
+/**
+ * Where to show the modal: next to the node (on its right, or its left when there is no room),
+ * kept inside the diagram and following the node as the diagram is panned or zoomed.
+ */
+declare function useNodeAnchor(nodeId: string, containerRef: RefObject<HTMLElement | null>, modalRef: RefObject<HTMLElement | null>, bottomInset?: number): Anchor | null;
+/** "Saved", for a moment after a change is: what an edit form says under its fields */
+declare function useSavedFlash(): {
+    saved: boolean;
+    showSaved: () => void;
+};
+/** Under an edit form's fields: that changes save as they're typed, or that one just was */
+declare function EditStatus({ saved }: {
+    saved: boolean;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * The card: next to the node (pointing at it), its header (the kicker, e.g. the node's type, with a close button,
+ * and what's under it, e.g. its edit form) and its body. Pressing anything outside it, or Escape, closes it, saving
+ * what's being typed first.
+ */
+declare function NodeCard({ nodeId, containerRef, label, kicker, header, children, width, bottomInset, onClose, }: {
+    nodeId: string;
+    /** The canvas the node is on, to place the card next to it */
+    containerRef: RefObject<HTMLElement | null>;
+    /** What the card is about, for screen readers */
+    label: string;
+    /** The top line, e.g. the node's type and where it is */
+    kicker: ReactNode;
+    /** The rest of the header, e.g. the node's name and summary, or the form to edit them */
+    header: ReactNode;
+    /** Under the header, e.g. what it's connected to */
+    children?: ReactNode;
+    width?: number;
+    /** Room to keep clear at the bottom of the canvas (e.g. its controls) */
+    bottomInset?: number;
+    onClose: () => void;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * A field of the resource's, saved as it's typed (and when it's left, or the card closes): there's nothing to press
+ * to keep a change. Escape puts it back as it was when it was clicked into.
+ */
+declare function EditableText({ value, onSave, multiline, placeholder, className, label, required, onSaved, }: {
+    value: string;
+    onSave: (value: string) => void;
+    multiline?: boolean;
+    placeholder?: string;
+    className?: string;
+    label: string;
+    required?: boolean;
+    /** Something was saved (to say so) */
+    onSaved?: () => void;
+}): react_jsx_runtime.JSX.Element;
+/** A field with its name above it */
+declare function Field({ label, children, className, }: {
+    label: string;
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Someone's picture from their sign-in provider (SSO), loaded from there. By default it covers their avatar's
+ * initials, which show again if it doesn't load (blocked, expired, or no longer there).
+ */
+declare function Picture({ src, className, }: {
+    src?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element | null;
+
+declare const TeamNode: react.NamedExoticComponent<NodeProps>;
+
+export { AgentMark, type Author, CANVAS_STATUSES, CANVAS_STATUS_LOOK, CATALOG_COLLECTIONS, CATALOG_GROUPS, CLIPBOARD_TYPE, COMPONENT_DRAG_TYPE, COMPONENT_TYPES, COUNTER_SCALE, type CanvasContent, _default$1 as CanvasControls, type CanvasMeta, CanvasPortal, type CanvasStatus, CardPreview, type CatalogCollection, ClaudeCodeLogo, ClaudeLogo, type ClipboardContent, type CommentAnchor, CommentLayer, CommentList, type ContainerChoice, ContainerChooser, ContextMenu, type ContextMenuState, CursorLogo, DEFAULT_NODE_SIZE, DIAGRAM_FILE_EXTENSION, DROP_GAP, type DiagramLevel, type DiagramLevels, type DragPreview, DropTargetContext, EDGE_COLOR, EDGE_MARKER, ENTITY_SOURCE_HANDLE, EdgeLabelPortal, EdgeRoute, _default as EditButton, EditStatus, EditableText, type Editing, EditingContext, EmptyCanvas, FIT_VIEW_OPTIONS, Field, GROUP_PADDING, GROUP_TYPES, type Hotspot, type HotspotDraft, type HotspotFields, HotspotLayer, HotspotList, type HotspotPlace, type HotspotSeverity, type HotspotSpot, KEEP_IN_CONTAINER_MARGIN, LEVELS, LOCAL_EDGE_KEYS, LOCAL_NODE_KEYS, type LayoutResult, type Level, type LevelPlace, type Link, type LiveMoves, type LivePeer, LockedContext, MESSAGE_COLLECTIONS, type MenuQuestion, type Message, type ModelCanvasContent, type Moves, type Moving, NODE_CATEGORIES, NODE_ICONS, NodeCard, type NodeCategory, type NodeDefinition, type NodeIcon, type NodePreview, OpenAILogo, Palette, PaletteItem, PaletteSection, type PaletteTab, Picture, type PresenceSource, type RenderedSizes, SEVERITIES, SHORTCUTS, STATUS, type SavedFileHandle, ShortcutsList, type Smoother, type StartDrag, StartWritingContext, type StatusChange, TEXT_FONT_SIZE, TeamNode, type Thread, type UpdateNodeData, UpdateNodeDataContext, ViewControls, addCanvasContent, addHotspots, addNodes, addThreads, agentLogoFor, anchorAt, arrangeLevel, buildNode, bySeverity, canGoInContainer, canHold, canPickWhereToSave, canvasImage, canvasToModel, changesNodesOrEdges, cleanFileName, componentKey, connectNodes, containerFor, copyNodes, createEdge, createHotspot, createSmoother, createThread, deleteEdges, deleteHotspot, deleteNodes, deleteThread, deleteThreads, downloadFile, fileNameFor, findDropTarget, findDropTargets, findGroupAtPoint, fitContainersAround, fitGroup, fitGroupToChildren, getAbsolutePosition, getAbsoluteRect, getAnchorPosition, getCanvasMaps, getCanvasStatus, getDiagramLevel, getDiagramLevelUnavailable, getEdgeLabel, getEdgeRoute, getLayoutPositions, getLevelGraph, getLevelNodeSize, getLevelUnavailableReason, getLock, getNodeDefinition, getNodeLabel, getNodeName, getNodeSize, getNoteLevel, getResource, getStructureKey, isCatalogCollection, isDecided, isGroupType, isOnLevel, isShownOnLevel, isVersioned, isWrittenOnCanvas, keepDragged, keepUnchanged, layoutGraph, levelPlaces, modelToCanvas, moveNode, moveThread, moveThreads, nodeDefinitions, nodeTypes, pasteNodes, patchShared, pickDiagramFile, placeDropped, placeNode, placeNodes, previewContainerGrowth, readCanvas, readClipboard, readDiagramFile, readHotspots, readLevelLayout, readMeta, readThreads, reconnectEdge, reopenIfDecided, reopeningIfEdited, replyToThread, resizeNode, resourceNodeData, resourceTypeOf, saveToPickedFile, sendMove, setCanvasStatus, setEdgeLabel, setEdgeRoutes, setLevelPlaces, setLock, setMeta, setNodeParent, setNodeParents, setThreadResolved, shortId, sizeOf, sortByHierarchy, timeAgo, toDiagramFile, toRelativePosition, toSharedNode, topSeverity, updateHotspot, updateNodeData, updateResource, useCounterScale, useDragGhost, useNodeAnchor, useRemoteMoves, useSavedFlash, withDescendants, withDiagramRoutes, withGroupSizes, withLocalState, withParent, withPositions };