@eventcatalog/visualiser 5.2.0 → 5.2.2

package/dist/studio.css

@@ -239,12 +239,12 @@ html .studio-drag-preview.eventcatalog-visualizer .react-flow {
 }
 
 /* A sticky note: about square like a post-it, taller if more is written on it (dark text: the paper is light in
-   every theme) */
+   every theme). Written from its top left, in proportion with the cards around it. */
 .studio-note {
   position: relative;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   min-height: 176px;
   height: 100%;
   padding: 20px 18px 30px;
@@ -259,9 +259,9 @@ html .studio-drag-preview.eventcatalog-visualizer .react-flow {
   margin: 0;
   /* Handwritten, as Excalidraw's notes are (Excalifont, bundled in view.css) */
   font-family: 'Excalifont', 'Inter', ui-sans-serif, system-ui, sans-serif;
-  font-size: 22px;
-  line-height: 1.3;
-  text-align: center;
+  font-size: 16px;
+  line-height: 1.35;
+  text-align: left;
   color: inherit;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
@@ -320,6 +320,11 @@ html .studio-drag-preview.eventcatalog-visualizer .react-flow {
 /* The text tool: click anywhere on the canvas to write there */
 .studio-canvas.is-placing .react-flow__pane,
 .studio-canvas.is-placing .react-flow__node { cursor: crosshair !important; }
+/* The hotspot tool: the pointer is a faded marker (a warning's, as one starts), centred where the marker will go */
+.studio-canvas.is-placing-hotspot .react-flow__pane,
+.studio-canvas.is-placing-hotspot .react-flow__node {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg opacity='0.75'%3E%3Ccircle cx='14' cy='14' r='12.5' fill='%23d97706' stroke='white' stroke-width='2'/%3E%3Cg transform='translate(7.5 7.5) scale(0.5417)' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 14 14, crosshair !important;
+}
 /* Text being written has no box around it, like Excalidraw's */
 .studio-text textarea.studio-text-body { display: block; width: 100%; border: 0; outline: none; padding: 0; resize: none; overflow: hidden; background: transparent; }
 
@@ -430,11 +435,10 @@ html .studio-drag-preview.eventcatalog-visualizer .react-flow {
   transition: transform 120ms;
 }
 .studio-hotspot-marker:hover { transform: scale(1.05); }
-/* Zoomed well out: just each marker's icon (its title is in the list, and on hover) */
-.is-icons-only .studio-hotspot-label { display: none; }
-.is-icons-only .studio-hotspot-marker { padding-right: 4px; }
-/* An open marker's panel (or the form adding one): its full size on screen however far out the canvas is */
-.studio-hotspot-panel { transform: scale(var(--studio-hotspot-panel-scale, 1)); transform-origin: 0 -34px; }
+/* An open marker's panel (or the form adding one), beside it: its full size on screen however far out the canvas is.
+   Scaled from the middle of the marker's right edge (12px to the panel's left, 22px down it, where its arrow is), which
+   shrinks with the canvas, so the panel stays the same distance from the marker with its arrow pointing at it */
+.studio-hotspot-panel { transform: scale(var(--studio-hotspot-panel-scale, 1)); transform-origin: -12px 22px; }
 
 /* A hotspot being dragged over a node: the node lights up in its colour, to show it'll go on it when dropped */
 .studio-canvas .react-flow__node.studio-hotspot-drop { --studio-hotspot-drop: 217 119 6; border-radius: 14px; }

package/dist/studio.d.mts

@@ -935,7 +935,14 @@ declare const UpdateNodeDataContext: react.Context<UpdateNodeData>;
 declare const EditingContext: react.Context<(editing: Editing | null) => void>;
 declare const DropTargetContext: react.Context<string | null>;
 declare const StartWritingContext: react.Context<string | null>;
+/** Starts writing on the note or text with this id */
+declare const startWriting: (id: string) => boolean;
 declare const LockedContext: react.Context<boolean>;
+/** A sticky note's colours: soft paper colours, readable in light and dark themes (the names are the visualiser's) */
+declare const NOTE_COLORS: Record<string, {
+    fill: string;
+    border: string;
+}>;
 /**
  * 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.
@@ -999,6 +1006,8 @@ declare const ContextMenu: react.NamedExoticComponent<{
     /** For the node right clicked */
     questions?: MenuQuestion[];
     onCopy: () => void;
+    /** Copies, then deletes, as ⌘X does (only where that works: not offered when not given) */
+    onCut?: () => void;
     onDuplicate: () => void;
     /** Paste what was last copied where the menu was opened, if anything was */
     onPaste?: () => void;
@@ -1089,14 +1098,18 @@ declare const HotspotLayer: react.NamedExoticComponent<{
     onUpdate: (id: string, fields: HotspotFields) => void;
     onDelete: (id: string) => void;
     onGo: (hotspot: Hotspot) => void;
+    /** The hotspot being added, dragged onto a node or to a place (its form stays open, with what's written in it) */
+    onMoveDraft?: (to: HotspotPlace) => 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, }: {
+/** All of them, most important first, for the panel at the bottom left: clicking one goes to it (and opens it) */
+declare function HotspotList({ hotspots, nameOf, onOpen, goOnHover, }: {
     hotspots: Hotspot[];
     nameOf: (nodeId: string) => string | undefined;
     onOpen: (hotspot: Hotspot) => void;
+    /** Resting the pointer on one goes to it (off while one's being added: going there would throw it away) */
+    goOnHover?: boolean;
 }): 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) */
@@ -1275,6 +1288,8 @@ declare const _default: react.NamedExoticComponent<{
 
 /** 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";
+/** Whether the palette is folded away (false when there's none) */
+declare const usePaletteCollapsed: () => boolean;
 /**
  * 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.
@@ -1455,4 +1470,4 @@ declare function Picture({ src, className, }: {
 
 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, CONNECT_MIN_DISTANCE, CONNECT_PLACEHOLDER, CONNECT_PLACEHOLDER_EDGE, CONNECT_PLACEHOLDER_SIZE, COUNTER_SCALE, type CanvasContent, _default$1 as CanvasControls, type CanvasMeta, CanvasPortal, type CanvasStatus, CardPreview, type CatalogCollection, ClaudeCodeLogo, ClaudeLogo, type ClipboardContent, type CommentAnchor, CommentLayer, CommentList, ConnectChooser, type ConnectOption, type ConnectPlaceholderData, ConnectPlaceholderNode, 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, type NewLink, NodeCard, type NodeCategory, type NodeDefinition, type NodeIcon, type NodePreview, OpenAILogo, Palette, PaletteItem, PaletteSection, type PaletteTab, Picture, type PresenceSource, RemeasureHandles, 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, centreBeyond, changesNodesOrEdges, cleanFileName, componentKey, connectNodes, connectedType, containerFor, copyNodes, createEdge, createHotspot, createSmoother, createThread, deleteEdges, deleteHotspot, deleteNodes, deleteThread, deleteThreads, downloadFile, fileNameFor, filterConnectOptions, findDropTarget, findDropTargets, findGroupAtPoint, fitContainersAround, fitGroup, fitGroupToChildren, getAbsolutePosition, getAbsoluteRect, getAnchorPosition, getCanvasMaps, getCanvasStatus, getConnectOptions, getDiagramLevel, getDiagramLevelUnavailable, getEdgeLabel, getEdgeRoute, getLayoutPositions, getLevelGraph, getLevelNodeSize, getLevelUnavailableReason, getLock, getNodeDefinition, getNodeLabel, getNodeName, getNodeSize, getNoteLevel, getResource, getStructureKey, isAwayFrom, isCardType, isCatalogCollection, isDecided, isEmptyCanvasAt, isGroupType, isOnLevel, isShownOnLevel, isVersioned, isWrittenOnCanvas, keepDragged, keepUnchanged, layoutGraph, levelPlaces, linkConnection, modelToCanvas, moveNode, moveThread, moveThreads, newCardData, nodeDefinitions, nodeTypes, notPlaceholder, 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, useConnectNew, useCounterScale, useDragGhost, useNodeAnchor, useRemoteMoves, useSavedFlash, withDescendants, withDiagramRoutes, withGroupSizes, withLocalState, withParent, withPositions };
+export { AgentMark, type Author, CANVAS_STATUSES, CANVAS_STATUS_LOOK, CATALOG_COLLECTIONS, CATALOG_GROUPS, CLIPBOARD_TYPE, COMPONENT_DRAG_TYPE, COMPONENT_TYPES, CONNECT_MIN_DISTANCE, CONNECT_PLACEHOLDER, CONNECT_PLACEHOLDER_EDGE, CONNECT_PLACEHOLDER_SIZE, COUNTER_SCALE, type CanvasContent, _default$1 as CanvasControls, type CanvasMeta, CanvasPortal, type CanvasStatus, CardPreview, type CatalogCollection, ClaudeCodeLogo, ClaudeLogo, type ClipboardContent, type CommentAnchor, CommentLayer, CommentList, ConnectChooser, type ConnectOption, type ConnectPlaceholderData, ConnectPlaceholderNode, 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, NOTE_COLORS, type NewLink, NodeCard, type NodeCategory, type NodeDefinition, type NodeIcon, type NodePreview, OpenAILogo, Palette, PaletteItem, PaletteSection, type PaletteTab, Picture, type PresenceSource, RemeasureHandles, 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, centreBeyond, changesNodesOrEdges, cleanFileName, componentKey, connectNodes, connectedType, containerFor, copyNodes, createEdge, createHotspot, createSmoother, createThread, deleteEdges, deleteHotspot, deleteNodes, deleteThread, deleteThreads, downloadFile, fileNameFor, filterConnectOptions, findDropTarget, findDropTargets, findGroupAtPoint, fitContainersAround, fitGroup, fitGroupToChildren, getAbsolutePosition, getAbsoluteRect, getAnchorPosition, getCanvasMaps, getCanvasStatus, getConnectOptions, getDiagramLevel, getDiagramLevelUnavailable, getEdgeLabel, getEdgeRoute, getLayoutPositions, getLevelGraph, getLevelNodeSize, getLevelUnavailableReason, getLock, getNodeDefinition, getNodeLabel, getNodeName, getNodeSize, getNoteLevel, getResource, getStructureKey, isAwayFrom, isCardType, isCatalogCollection, isDecided, isEmptyCanvasAt, isGroupType, isOnLevel, isShownOnLevel, isVersioned, isWrittenOnCanvas, keepDragged, keepUnchanged, layoutGraph, levelPlaces, linkConnection, modelToCanvas, moveNode, moveThread, moveThreads, newCardData, nodeDefinitions, nodeTypes, notPlaceholder, 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, startWriting, timeAgo, toDiagramFile, toRelativePosition, toSharedNode, topSeverity, updateHotspot, updateNodeData, updateResource, useConnectNew, useCounterScale, useDragGhost, useNodeAnchor, usePaletteCollapsed, useRemoteMoves, useSavedFlash, withDescendants, withDiagramRoutes, withGroupSizes, withLocalState, withParent, withPositions };