@pixerate/editor-react 0.39.0 → 0.41.0

package/dist/canvas/index.d.cts

@@ -2,10 +2,10 @@ import * as React$1 from 'react';
 import React__default from 'react';
 import { AgentPresence } from '@pixerate/editor/agent';
 import * as _pixerate_editor_canvas from '@pixerate/editor/canvas';
-import { CanvasNode, CanvasEdge, IncrementalLayoutOptions, XYPosition, GraphDifferences, Rect, CanvasLayoutOptions, Side, PlaceBesideOptions, getCenteredNodePosition, CanvasDockingCallbacks, DockStrategy, ExplodeNodeOptions, CollapseNodeOptions, ExplosionSnapshot, ArrangeHistoryTarget, SnapGuidesOptions, NodeRectOptions, AutoLayoutOptions, GuideLine, CanvasArrangeAction, ArrangeShortcutBinding, CanvasScenesOptions, CanvasViewport, CanvasScenesStore, CanvasScene, FitViewportOptions, FreehandTool, FreehandStrokeStyle, FreehandStroke, FreehandDrawOptions, ShapeDescription, AutoLayoutMeasure, CanvasTokenOptions, AnimationHistoryTarget, Clock, AnimationLoopMode, AnimatableProperty, CanvasComponentSyncOptions, CanvasComponentsController } from '@pixerate/editor/canvas';
+import { CanvasNode, CanvasEdge, IncrementalLayoutOptions, XYPosition, GraphDifferences, Rect, CanvasLayoutOptions, Side, PlaceBesideOptions, getCenteredNodePosition, CanvasDockingCallbacks, DockStrategy, ExplodeNodeOptions, CollapseNodeOptions, ExplosionSnapshot, ArrangeHistoryTarget, SnapGuidesOptions, NodeRectOptions, AutoLayoutOptions, GuideLine, CanvasArrangeAction, ArrangeShortcutBinding, CanvasScenesOptions, CanvasViewport, CanvasScenesStore, CanvasScene, FitViewportOptions, FreehandTool, FreehandStrokeStyle, FreehandStroke, FreehandDrawOptions, ShapeDescription, AutoLayoutMeasure, CanvasTokenOptions, AnimationHistoryTarget, Clock, AnimationLoopMode, AnimatableProperty, CanvasComponentSyncOptions, CanvasComponentsController, DiagramLayoutOptions, MermaidFlowNode, MermaidFlowEdge, DiagramLayout } from '@pixerate/editor/canvas';
 export { ANIMATABLE_PROPERTIES, ANIMATION_DATA_KEY, ANIMATION_EASING_LABELS, ANIMATION_EASING_PRESETS, ANIMATION_TIME_EPSILON, AUTO_LAYOUT_DATA_KEY, AddCanvasVariantOptions, AlignEdge, AnimatableProperty, AnimateNodeOptions, AnimationDocument, AnimationEasing, AnimationEasingPreset, AnimationEditError, AnimationEditErrorCode, AnimationFrame, AnimationHistoryTarget, AnimationKeyframe, AnimationKeyframeClipboard, AnimationLoopMode, AnimationMotionPath, AnimationOverrides, AnimationPlayer, AnimationPlayerOptions, AnimationPlayerState, AnimationTrack, AnimationValue, AnimationValueType, ArrangeShortcutBinding, AutoLayout, AutoLayoutAlignContent, AutoLayoutAlignCross, AutoLayoutAlignMain, AutoLayoutCellAlign, AutoLayoutChild, AutoLayoutConstraints, AutoLayoutGrid, AutoLayoutGridArea, AutoLayoutGridCell, AutoLayoutGridGeometry, AutoLayoutGridTrack, AutoLayoutHorizontalConstraint, AutoLayoutInsertTarget, AutoLayoutMeasure, AutoLayoutMode, AutoLayoutOptions, AutoLayoutPadding, AutoLayoutSize, AutoLayoutSizing, AutoLayoutSizingPair, AutoLayoutVerticalConstraint, BezierCommand, BezierPath, BezierPathInput, CANVAS_COMPONENT_DRAG_TYPE, CANVAS_GRADIENT_PRESETS, CANVAS_TOKEN_PROPERTIES, CHILD_LAYOUT_DATA_KEY, CONNECTION_LINE_TYPES, CSS_ANIMATION_PROPERTIES, CUBIC_BEZIER_PRESETS, CanvasAnimationController, CanvasAnimationControllerOptions, CanvasAnimationState, CanvasArrangeAction, CanvasAutoLayoutController, CanvasAutoLayoutControllerOptions, CanvasClipboardPayload, CanvasComponentInfo, CanvasComponentPropertyDef, CanvasComponentPropertyField, CanvasComponentResult, CanvasComponentSetInfo, CanvasComponentSyncOptions, CanvasComponentsController, CanvasComponentsControllerOptions, CanvasConnectionLineType, CanvasDockingCallbacks, CanvasDrawControllerOptions, CanvasEdge, CanvasGradientDef, CanvasHeightOptions, CanvasInstanceInfo, CanvasLayoutOptions, CanvasLinearGradient, CanvasNode, CanvasNodeUpdate, CanvasRadialGradient, CanvasScene, CanvasScenesState, CanvasScenesStore, CanvasTokenBindingInfo, CanvasTokenOptions, CanvasTokenProperty, CanvasViewport, Clock, CollapseNodeOptions, CombineShapeNodesOptions, CombineShapeNodesRefusal, CombineShapeNodesResult, ConnectorSnap, ConnectorSnapTarget, CssAnimationExport, CssExportOptions, CubicBezierEasing, CubicSegment, DEFAULT_ARRANGE_SHORTCUTS, DirectionalDisplacementOptions, DisplacementDirection, DistributeAxis, DistributeMode, DividePathsResult, DockStrategy, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, FreehandStroke, FreehandStrokeStyle, FreehandTool, GradientStop, GraphDifferences, GuideIndex, GuideLine, IncrementalLayoutOptions, KeyframeDragState, KeyframePatch, KeyframeRef, KeyframeSnap, MAX_KEYFRAME_REFS, ManualClock, MeasureGuide, MeasureSelectionOptions, MeasureSelectionResult, MultiPolygon, NodeAnimation, NodeTransition, OffsetPathOptions, OffsetShapeNodesOptions, OklabColor, OutlineShapeStrokesOptions, OutlineStrokeOptions, PathBooleanResult, PathCommand, PathOperand, PathOperandInput, PathOpsOptions, PathShape, PlaceBesideOptions, Point, PolygonBooleanOperation, PolygonBooleanOptions, PolygonFillRule, PolygonInput, PolygonOperand, PolygonPiece, PolygonRing, PolygonToPathOptions, PolygonWithHoles, Position, RESIZE_HANDLES, Rect, RectShape, ReflowDisplacementOptions, RegularPolygonShape, ResizeHandle, SHAPE_DATA_KEY, SHAPE_KINDS, SHAPE_NODE_TYPE, SHAPE_OPERATIONS, SetCanvasVariantPropertiesOptions, ShapeDescription, ShapeKind, ShapeNodePolygonOptions, ShapeOperation, ShapePaint, ShapePathEditOperation, ShapePathEditRefusal, ShapePathEditResult, ShapeRenderData, ShapeSize, Side, SizeDimension, SnapGuidesOptions, SnapNodeResizeOptions, SnapNodeResizeResult, SnapResizeOptions, SnapResizeResult, SnapResult, SpringEasing, StarShape, StrokeCap, StrokeJoin, StrokeToShapeNodeOptions, SvgGradientDef, SvgGradientStop, TOKEN_BINDINGS_DATA_KEY, TOKEN_MODES_DATA_KEY, TimelineKeyframe, TimelineRow, TrajectoryFunction, TrajectoryPoint, WebAnimationSpec, XYPosition, ZOrderOperation, addCanvasVariant, addKeyframesAtTime, alignNodes, angleToSvgLinearCoords, animateNode, applyAnimation, applyAnimationOverrides, applyConstraints, applyNodeUpdates, applyShapeCombination, applyShapeReplacement, bezierPathArea, bezierPathBounds, bezierPathLength, bezierPathPointAtLength, bezierPathSignedArea, bezierPathToSvg, bindCanvasComponentProperty, bindCanvasToken, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canCombineShapeNodes, canOffsetShapeNodes, canOutlineShapeNodeStrokes, canvasHeight, centerNodes, centre, clampAnimationValue, clampLayoutSize, combineCanvasComponentsAsVariants, combineShapeNodes, computeNodesBoundingBox, computeSnapGuides, connectedOnly, copyKeyframes, countPathSegments, createAnimationPlayer, createBezierTrajectory, createCanvasAnimationController, createCanvasAutoLayoutController, createCanvasComponent, createCanvasComponentsController, createCanvasDrawController, createCanvasInstance, createCanvasScenesStore, createDefaultStrokeStyle, createFanOutTrajectory, createGuideIndex, createNodeGuideIndex, cubicBezierAt, cubicPointAt, cubicsToPathData, dashContours, defaultEasing, deleteKeyframes, detachCanvasInstance, detachTokenBindings, distanceToBezierPath, distributeNodes, dividePaths, dividePolygons, easingFromInfluence, easingLabel, easingToCss, ensureLayout, estimateCanvasHeight, estimateNodeSize, evaluateAnimation, evaluateEasing, evaluateTrack, excludePaths, exportCssAnimation, findConnectorSnap, findStrokesAtPoint, fitCubicRun, fitCubics, fitFreehandPath, fitPathData, fitViewportToNodes, fitViewportToRect, flattenSvgPath, flowSide, formatAnimationTime, formatOklab, getAbsolutePosition, getAnimatableProperty, getAnimatedProperties, getAnimatedValue, getAnimationDuration, getAnimationTrack, getAutoLayout, getAutoLayoutGrid, getAutoLayoutInsertTarget, getBindableTokenProperties, getCanvasComponentDragId, getCanvasTokenProperty, getCenteredNodePosition, getChildLayout, getComponentSourceId, getCssPropertyAnimations, getEffectiveTokenModes, getFlowChildren, getInstanceData, getInstanceStatus, getKeyframeTimes, getLayoutParent, getLayoutSizing, getLayoutedNodes, getNextVariantValues, getNodeAnimation, getNodeOverrides, getNodeRect, getNodeShape, getNodeSize, getNodeTokenBindings, getNodeTokenModes, getResizingNodeRect, getShapeRenderData, getShapeSvg, getTimelineRows, getTimelineTicks, getTokenPropertyScope, getTokensForProperty, gradientToSvgDef, handlePoint, hasVisibleStroke, inferResizeHandle, inspectCanvasInstance, inspectNodeTokens, interpolateAnimationValue, intersectPaths, intersectPolygons, invertNodeUpdates, isAnimationEasing, isAnimationKeyframe, isAutoLayoutFrame, isCanvasComponent, isCanvasComponentSet, isCanvasGradient, isCanvasInstance, isCssExportExact, isEventFromTextInput, isKeyframeSelected, isLocked, isMeasureModifierHeld, isNodeAnimated, isShapeDescription, isShapeNode, isStraightCubic, isValidCanvasNode, isValidUrl, layoutAll, layoutBounds, layoutFrame, layoutUp, layoutUpMany, linearPositionTrajectory, linearTrajectory, listCanvasComponents, lockNodes, makeSizingCoherent, matchArrangeShortcut, matchSize, measureBetween, measureLabel, measureSelection, measureToLine, mergeNodeUpdates, mixColorsOklab, moveKeyframes, moveLayoutChild, multiPolygonArea, multiPolygonBounds, nearestHandlePositions, normalizeBezierPath, normalizeKeyframes, offsetPath, offsetShapeNodes, oklabToRgb, oppositePosition, outlineShapeNodeStrokes, outlineStroke, overlaps, parseCanvasClipboardData, parseCanvasScenes, parseCssEasing, parseCssGradient, parseKeyframeClipboard, parseOklab, parseSvgPath, pasteKeyframes, pathBoolean, placeBeside, playWebAnimations, pointInBezierPath, pointInMultiPolygon, pointInRings, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, pruneCanvasTokenModes, pushCanvasInstanceOverrides, readAnimatableValue, readNodeStyleProperty, readStyleSize, realClock, recordAnimationChanges, relayoutUpdates, remapPastedNodes, removeCanvasVariant, removeTrack, renameCanvasVariantProperty, renameCanvasVariantValue, reorderNodes, repositionNodesTo, resetCanvasInstanceOverrides, resizeHandleAxes, resolveCanvasGradient, resolveCanvasTokens, resolveEasing, resolvePadding, restoreCanvasMainComponent, revertShapeCombination, rgbToOklab, ringSignedArea, runMultiNodeTransition, sampleAnimationFrames, scaleKeyframes, serializeCanvasNodes, setCanvasComponentProperty, setCanvasInstanceProperties, setCanvasTokenMode, setCanvasVariantProperties, setKeyframe, setKeyframeEasing, setMotionPath, setTrackEnabled, shapeNodeToBezierPath, shapeNodeToPolygon, shapeToBezierPath, shapeToPolygon, sideToPosition, simplifyRing, snapKeyframeDelta, snapNodeDrag, snapNodeResize, snapResize, snapTimeToFrame, snapToGrid, springAt, streamlinePoints, strokeOutlineRings, strokePointsToPathData, strokeToShapeNode, subtractPaths, subtractPolygons, swapCanvasInstance, syncAllCanvasInstances, syncCanvasComponents, syncCanvasInstance, timeToX, toBezierPath, toWebAnimations, toggleLockNodes, transformBezierPath, unionPolygons, unitePaths, unlockNodes, updateKeyframe, withNodeAnimation, withStyleSize, wouldCreateComponentCycle, wrapAnimationTime, writeNodeStyleProperty, xToTime, xorPolygons } from '@pixerate/editor/canvas';
 import { TokenState, TokenStore, TokenModeContext } from '@pixerate/editor/tokens';
-import * as _pixerate_editor_animation from '@pixerate/editor/animation';
+import { DiagramControllerOptions, DiagramController, DiagramState, MermaidDocument, EditOp, DiagramActionResult, DiagramPlacement, PresenceClock, PresenceStore, DiagramDirector, PresenceState } from '@pixerate/editor/diagram';
 
 interface AgentPresenceLayerProps {
     presences: AgentPresence[];
@@ -572,7 +572,7 @@ declare function useCanvasAnimation<TNode extends CanvasNode = CanvasNode>(optio
     /** The nodes evaluated at the playhead; render these. */
     displayNodes: TNode[];
     clipboard: _pixerate_editor_canvas.AnimationKeyframeClipboard | null;
-    player: _pixerate_editor_animation.AnimationPlayer;
+    player: _pixerate_editor_canvas.AnimationPlayer;
     getState: () => _pixerate_editor_canvas.CanvasAnimationState;
     subscribe(listener: (state: _pixerate_editor_canvas.CanvasAnimationState) => void): () => void;
     refresh(): void;
@@ -594,10 +594,10 @@ declare function useCanvasAnimation<TNode extends CanvasNode = CanvasNode>(optio
     display: (nodes?: readonly TNode[] | undefined) => TNode[];
     applyDisplayChanges(next: TNode[]): _pixerate_editor_canvas.KeyframeRef[];
     addKeyframe(ids?: Iterable<string>, keys?: readonly string[], time?: number): _pixerate_editor_canvas.KeyframeRef[];
-    setKeyframe(nodeId: string, property: string, value: _pixerate_editor_animation.AnimationValue, time?: number, easing?: _pixerate_editor_animation.AnimationEasing | string): void;
+    setKeyframe(nodeId: string, property: string, value: _pixerate_editor_canvas.AnimationValue, time?: number, easing?: _pixerate_editor_canvas.AnimationEasing | string): void;
     updateKeyframe(ref: _pixerate_editor_canvas.KeyframeRef, patch: _pixerate_editor_canvas.KeyframePatch): void;
     deleteKeyframes(refs?: readonly _pixerate_editor_canvas.KeyframeRef[]): boolean;
-    setEasing(easing: _pixerate_editor_animation.AnimationEasing | string | null, refs?: readonly _pixerate_editor_canvas.KeyframeRef[]): boolean;
+    setEasing(easing: _pixerate_editor_canvas.AnimationEasing | string | null, refs?: readonly _pixerate_editor_canvas.KeyframeRef[]): boolean;
     setTrackEnabled(nodeId: string, property: string, enabled: boolean): void;
     removeTrack(nodeId: string, property: string): void;
     setMotionPath(nodeId: string, motionPath: {
@@ -766,4 +766,140 @@ interface CanvasInstanceInspectorProps<TNode extends CanvasNode = CanvasNode> {
  */
 declare function CanvasInstanceInspector<TNode extends CanvasNode = CanvasNode>({ nodes, nodeId, components, onError, className }: CanvasInstanceInspectorProps<TNode>): React__default.JSX.Element | null;
 
-export { AgentPresenceLayer, type AgentPresenceLayerProps, AnimationTimeline, type AnimationTimelineProps, type CanvasAnimation, type CanvasArrange, type CanvasAutoLayout, type CanvasComponents, CanvasComponentsPanel, type CanvasComponentsPanelActions, type CanvasComponentsPanelProps, type CanvasDraw, type CanvasDrawActions, CanvasDrawLayer, type CanvasDrawLayerProps, type CanvasDrawState, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, CanvasInstanceInspector, type CanvasInstanceInspectorActions, type CanvasInstanceInspectorProps, type CanvasMeasure, type CanvasScenes, type CanvasTokens, ShapeNode, type ShapeNodeProps, TokenBindingPicker, type TokenBindingPickerProps, TokenModeSwitcher, type TokenModeSwitcherProps, type UseCanvasAnimationOptions, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasClipboardOptions, type UseCanvasComponentsOptions, type UseCanvasDockingOptions, type UseCanvasDrawOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseCanvasTokensOptions, type UseStreamingCanvasOptions, useCanvasAnimation, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasAutoLayout, useCanvasClipboard, useCanvasComponents, useCanvasDocking, useCanvasDraw, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useCanvasTokens, useStreamingCanvas };
+interface UseMermaidDiagramOptions extends DiagramControllerOptions {
+    /** Layout spacing and node measuring for new nodes (stored positions always win). */
+    layoutOptions?: DiagramLayoutOptions;
+}
+type Placed = {
+    id: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    parentId?: string;
+};
+interface UseMermaidDiagramResult {
+    controller: DiagramController;
+    state: DiagramState;
+    document: MermaidDocument;
+    /** The Mermaid text (with the `%% @pixerate` layout comment). */
+    source: string;
+    /** Canvas nodes (groups first, children relative to their group) and edges. */
+    nodes: MermaidFlowNode[];
+    edges: MermaidFlowEdge[];
+    layout: DiagramLayout;
+    apply: (ops: EditOp | EditOp[], label?: string) => DiagramActionResult;
+    /** Replaces the source; `clearHistory` when opening a different diagram. */
+    load: (source: string, options?: {
+        clearHistory?: boolean;
+    }) => DiagramActionResult;
+    /** Stores where dragged nodes ended up (pass every canvas node as `all` so groups carry their contents). */
+    moveNodes: (moved: readonly Placed[], all?: readonly Placed[]) => DiagramActionResult | null;
+    connect: (source: string, target: string, label?: string) => DiagramActionResult;
+    /** Removes nodes / groups (with their edges) and edges by id, as one undo step. */
+    remove: (ids: readonly string[]) => DiagramActionResult;
+    rename: (id: string, label: string) => DiagramActionResult;
+    select: (ids: readonly string[]) => void;
+    undo: () => void;
+    redo: () => void;
+}
+/** The controller's state (re-renders on every change). */
+declare function useDiagramState(controller: DiagramController): DiagramState;
+/**
+ * A Mermaid diagram on a React Flow canvas: subscribes to a `DiagramController` (or creates
+ * one from options), lays it out and returns canvas nodes and edges with bound edits. Every
+ * edit rewrites only the statements it touches; positions go into `%% @pixerate`.
+ */
+declare function useMermaidDiagram(controllerOrOptions?: DiagramController | UseMermaidDiagramOptions): UseMermaidDiagramResult;
+interface UseMermaidStreamOptions extends DiagramLayoutOptions {
+    /** True once the whole source has arrived (unconnected nodes are shown then). */
+    complete?: boolean;
+    /** Glide duration between layouts in ms (default 300; 0 jumps). */
+    duration?: number;
+}
+interface UseMermaidStreamResult {
+    document: MermaidDocument | null;
+    nodes: MermaidFlowNode[];
+    edges: MermaidFlowEdge[];
+    /** The layout being shown (mid-glide while `settled` is false). */
+    layout: DiagramLayout | null;
+    settled: boolean;
+}
+/**
+ * Draws Mermaid that is still being written (e.g. a model's reply): nodes appear once an
+ * edge places them and glide to their new places as the layout grows. Read-only.
+ */
+declare function useMermaidStream(source: string, options?: UseMermaidStreamOptions): UseMermaidStreamResult;
+
+/** Node data as `mermaidToCanvas` produces it. */
+interface MermaidDiagramNodeData {
+    node?: {
+        id: string;
+        label: string;
+        shape: string;
+        data?: Record<string, unknown>;
+    };
+    group?: {
+        id: string;
+        label: string;
+    };
+    resolvedStyles?: Record<string, string>;
+    [key: string]: unknown;
+}
+interface MermaidDiagramNodeProps {
+    id?: string;
+    data: MermaidDiagramNodeData;
+    width?: number;
+    height?: number;
+    selected?: boolean;
+    className?: string;
+    /** Rendered over the node, e.g. React Flow `<Handle>`s. */
+    children?: React__default.ReactNode;
+    [key: string]: unknown;
+}
+/** Mermaid `style` / `classDef` declarations as the CSS the node paints with. */
+declare function mermaidNodeStyle(styles?: Record<string, string>, selected?: boolean): React__default.CSSProperties;
+/**
+ * Headless Mermaid node: draws the node's shape (flowchart, state, class, ER) as SVG with
+ * its label, painted from its Mermaid styles. Register it as the `mermaid-node` React Flow
+ * node type and pass `<Handle>`s as children.
+ */
+declare function MermaidDiagramNode({ data, width, height, selected, className, children }: MermaidDiagramNodeProps): React__default.JSX.Element | null;
+/** Headless Mermaid group (subgraph, composite state, namespace): a titled frame. Register as `mermaid-group`. */
+declare function MermaidDiagramGroup({ data, selected, className, children }: MermaidDiagramNodeProps): React__default.JSX.Element | null;
+
+interface UseDiagramDirectorOptions {
+    /** Where nodes are drawn now, e.g. `() => diagram.layout` from `useMermaidDiagram`. */
+    placement: () => DiagramPlacement;
+    /** 1 = natural speed; 2 = twice as fast. */
+    speed?: number;
+    clock?: PresenceClock;
+    /** Hide a cursor this long after its last call (ms, default 1500). */
+    linger?: number;
+}
+/**
+ * A `PresenceStore` and `DiagramDirector` for a diagram, created once: pass `director` to
+ * `createDiagramToolProvider` so agent edits are acted out by a cursor, and `presence` to
+ * `<DiagramPresenceLayer>` to draw it.
+ */
+declare function useDiagramDirector(controller: DiagramController, options: UseDiagramDirectorOptions): {
+    presence: PresenceStore;
+    director: DiagramDirector;
+};
+/** The presence store's state (re-renders on every cursor move). */
+declare function usePresenceState(presence: PresenceStore): PresenceState;
+
+interface DiagramPresenceLayerProps {
+    presence: PresenceStore;
+    /** The canvas viewport (React Flow's `useViewport()`), to place cursors given in canvas coordinates. */
+    viewport: {
+        x: number;
+        y: number;
+        zoom: number;
+    };
+    className?: string;
+}
+/** Agent cursors and their notes over a canvas, from a `PresenceStore` (see `DiagramDirector`). */
+declare function DiagramPresenceLayer({ presence, viewport, className }: DiagramPresenceLayerProps): React__default.JSX.Element | null;
+
+export { AgentPresenceLayer, type AgentPresenceLayerProps, AnimationTimeline, type AnimationTimelineProps, type CanvasAnimation, type CanvasArrange, type CanvasAutoLayout, type CanvasComponents, CanvasComponentsPanel, type CanvasComponentsPanelActions, type CanvasComponentsPanelProps, type CanvasDraw, type CanvasDrawActions, CanvasDrawLayer, type CanvasDrawLayerProps, type CanvasDrawState, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, CanvasInstanceInspector, type CanvasInstanceInspectorActions, type CanvasInstanceInspectorProps, type CanvasMeasure, type CanvasScenes, type CanvasTokens, DiagramPresenceLayer, type DiagramPresenceLayerProps, MermaidDiagramGroup, MermaidDiagramNode, type MermaidDiagramNodeData, type MermaidDiagramNodeProps, ShapeNode, type ShapeNodeProps, TokenBindingPicker, type TokenBindingPickerProps, TokenModeSwitcher, type TokenModeSwitcherProps, type UseCanvasAnimationOptions, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasClipboardOptions, type UseCanvasComponentsOptions, type UseCanvasDockingOptions, type UseCanvasDrawOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseCanvasTokensOptions, type UseDiagramDirectorOptions, type UseMermaidDiagramOptions, type UseMermaidDiagramResult, type UseMermaidStreamOptions, type UseMermaidStreamResult, type UseStreamingCanvasOptions, mermaidNodeStyle, useCanvasAnimation, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasAutoLayout, useCanvasClipboard, useCanvasComponents, useCanvasDocking, useCanvasDraw, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useCanvasTokens, useDiagramDirector, useDiagramState, useMermaidDiagram, useMermaidStream, usePresenceState, useStreamingCanvas };

package/dist/canvas/index.d.ts

@@ -2,10 +2,10 @@ import * as React$1 from 'react';
 import React__default from 'react';
 import { AgentPresence } from '@pixerate/editor/agent';
 import * as _pixerate_editor_canvas from '@pixerate/editor/canvas';
-import { CanvasNode, CanvasEdge, IncrementalLayoutOptions, XYPosition, GraphDifferences, Rect, CanvasLayoutOptions, Side, PlaceBesideOptions, getCenteredNodePosition, CanvasDockingCallbacks, DockStrategy, ExplodeNodeOptions, CollapseNodeOptions, ExplosionSnapshot, ArrangeHistoryTarget, SnapGuidesOptions, NodeRectOptions, AutoLayoutOptions, GuideLine, CanvasArrangeAction, ArrangeShortcutBinding, CanvasScenesOptions, CanvasViewport, CanvasScenesStore, CanvasScene, FitViewportOptions, FreehandTool, FreehandStrokeStyle, FreehandStroke, FreehandDrawOptions, ShapeDescription, AutoLayoutMeasure, CanvasTokenOptions, AnimationHistoryTarget, Clock, AnimationLoopMode, AnimatableProperty, CanvasComponentSyncOptions, CanvasComponentsController } from '@pixerate/editor/canvas';
+import { CanvasNode, CanvasEdge, IncrementalLayoutOptions, XYPosition, GraphDifferences, Rect, CanvasLayoutOptions, Side, PlaceBesideOptions, getCenteredNodePosition, CanvasDockingCallbacks, DockStrategy, ExplodeNodeOptions, CollapseNodeOptions, ExplosionSnapshot, ArrangeHistoryTarget, SnapGuidesOptions, NodeRectOptions, AutoLayoutOptions, GuideLine, CanvasArrangeAction, ArrangeShortcutBinding, CanvasScenesOptions, CanvasViewport, CanvasScenesStore, CanvasScene, FitViewportOptions, FreehandTool, FreehandStrokeStyle, FreehandStroke, FreehandDrawOptions, ShapeDescription, AutoLayoutMeasure, CanvasTokenOptions, AnimationHistoryTarget, Clock, AnimationLoopMode, AnimatableProperty, CanvasComponentSyncOptions, CanvasComponentsController, DiagramLayoutOptions, MermaidFlowNode, MermaidFlowEdge, DiagramLayout } from '@pixerate/editor/canvas';
 export { ANIMATABLE_PROPERTIES, ANIMATION_DATA_KEY, ANIMATION_EASING_LABELS, ANIMATION_EASING_PRESETS, ANIMATION_TIME_EPSILON, AUTO_LAYOUT_DATA_KEY, AddCanvasVariantOptions, AlignEdge, AnimatableProperty, AnimateNodeOptions, AnimationDocument, AnimationEasing, AnimationEasingPreset, AnimationEditError, AnimationEditErrorCode, AnimationFrame, AnimationHistoryTarget, AnimationKeyframe, AnimationKeyframeClipboard, AnimationLoopMode, AnimationMotionPath, AnimationOverrides, AnimationPlayer, AnimationPlayerOptions, AnimationPlayerState, AnimationTrack, AnimationValue, AnimationValueType, ArrangeShortcutBinding, AutoLayout, AutoLayoutAlignContent, AutoLayoutAlignCross, AutoLayoutAlignMain, AutoLayoutCellAlign, AutoLayoutChild, AutoLayoutConstraints, AutoLayoutGrid, AutoLayoutGridArea, AutoLayoutGridCell, AutoLayoutGridGeometry, AutoLayoutGridTrack, AutoLayoutHorizontalConstraint, AutoLayoutInsertTarget, AutoLayoutMeasure, AutoLayoutMode, AutoLayoutOptions, AutoLayoutPadding, AutoLayoutSize, AutoLayoutSizing, AutoLayoutSizingPair, AutoLayoutVerticalConstraint, BezierCommand, BezierPath, BezierPathInput, CANVAS_COMPONENT_DRAG_TYPE, CANVAS_GRADIENT_PRESETS, CANVAS_TOKEN_PROPERTIES, CHILD_LAYOUT_DATA_KEY, CONNECTION_LINE_TYPES, CSS_ANIMATION_PROPERTIES, CUBIC_BEZIER_PRESETS, CanvasAnimationController, CanvasAnimationControllerOptions, CanvasAnimationState, CanvasArrangeAction, CanvasAutoLayoutController, CanvasAutoLayoutControllerOptions, CanvasClipboardPayload, CanvasComponentInfo, CanvasComponentPropertyDef, CanvasComponentPropertyField, CanvasComponentResult, CanvasComponentSetInfo, CanvasComponentSyncOptions, CanvasComponentsController, CanvasComponentsControllerOptions, CanvasConnectionLineType, CanvasDockingCallbacks, CanvasDrawControllerOptions, CanvasEdge, CanvasGradientDef, CanvasHeightOptions, CanvasInstanceInfo, CanvasLayoutOptions, CanvasLinearGradient, CanvasNode, CanvasNodeUpdate, CanvasRadialGradient, CanvasScene, CanvasScenesState, CanvasScenesStore, CanvasTokenBindingInfo, CanvasTokenOptions, CanvasTokenProperty, CanvasViewport, Clock, CollapseNodeOptions, CombineShapeNodesOptions, CombineShapeNodesRefusal, CombineShapeNodesResult, ConnectorSnap, ConnectorSnapTarget, CssAnimationExport, CssExportOptions, CubicBezierEasing, CubicSegment, DEFAULT_ARRANGE_SHORTCUTS, DirectionalDisplacementOptions, DisplacementDirection, DistributeAxis, DistributeMode, DividePathsResult, DockStrategy, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, FreehandStroke, FreehandStrokeStyle, FreehandTool, GradientStop, GraphDifferences, GuideIndex, GuideLine, IncrementalLayoutOptions, KeyframeDragState, KeyframePatch, KeyframeRef, KeyframeSnap, MAX_KEYFRAME_REFS, ManualClock, MeasureGuide, MeasureSelectionOptions, MeasureSelectionResult, MultiPolygon, NodeAnimation, NodeTransition, OffsetPathOptions, OffsetShapeNodesOptions, OklabColor, OutlineShapeStrokesOptions, OutlineStrokeOptions, PathBooleanResult, PathCommand, PathOperand, PathOperandInput, PathOpsOptions, PathShape, PlaceBesideOptions, Point, PolygonBooleanOperation, PolygonBooleanOptions, PolygonFillRule, PolygonInput, PolygonOperand, PolygonPiece, PolygonRing, PolygonToPathOptions, PolygonWithHoles, Position, RESIZE_HANDLES, Rect, RectShape, ReflowDisplacementOptions, RegularPolygonShape, ResizeHandle, SHAPE_DATA_KEY, SHAPE_KINDS, SHAPE_NODE_TYPE, SHAPE_OPERATIONS, SetCanvasVariantPropertiesOptions, ShapeDescription, ShapeKind, ShapeNodePolygonOptions, ShapeOperation, ShapePaint, ShapePathEditOperation, ShapePathEditRefusal, ShapePathEditResult, ShapeRenderData, ShapeSize, Side, SizeDimension, SnapGuidesOptions, SnapNodeResizeOptions, SnapNodeResizeResult, SnapResizeOptions, SnapResizeResult, SnapResult, SpringEasing, StarShape, StrokeCap, StrokeJoin, StrokeToShapeNodeOptions, SvgGradientDef, SvgGradientStop, TOKEN_BINDINGS_DATA_KEY, TOKEN_MODES_DATA_KEY, TimelineKeyframe, TimelineRow, TrajectoryFunction, TrajectoryPoint, WebAnimationSpec, XYPosition, ZOrderOperation, addCanvasVariant, addKeyframesAtTime, alignNodes, angleToSvgLinearCoords, animateNode, applyAnimation, applyAnimationOverrides, applyConstraints, applyNodeUpdates, applyShapeCombination, applyShapeReplacement, bezierPathArea, bezierPathBounds, bezierPathLength, bezierPathPointAtLength, bezierPathSignedArea, bezierPathToSvg, bindCanvasComponentProperty, bindCanvasToken, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canCombineShapeNodes, canOffsetShapeNodes, canOutlineShapeNodeStrokes, canvasHeight, centerNodes, centre, clampAnimationValue, clampLayoutSize, combineCanvasComponentsAsVariants, combineShapeNodes, computeNodesBoundingBox, computeSnapGuides, connectedOnly, copyKeyframes, countPathSegments, createAnimationPlayer, createBezierTrajectory, createCanvasAnimationController, createCanvasAutoLayoutController, createCanvasComponent, createCanvasComponentsController, createCanvasDrawController, createCanvasInstance, createCanvasScenesStore, createDefaultStrokeStyle, createFanOutTrajectory, createGuideIndex, createNodeGuideIndex, cubicBezierAt, cubicPointAt, cubicsToPathData, dashContours, defaultEasing, deleteKeyframes, detachCanvasInstance, detachTokenBindings, distanceToBezierPath, distributeNodes, dividePaths, dividePolygons, easingFromInfluence, easingLabel, easingToCss, ensureLayout, estimateCanvasHeight, estimateNodeSize, evaluateAnimation, evaluateEasing, evaluateTrack, excludePaths, exportCssAnimation, findConnectorSnap, findStrokesAtPoint, fitCubicRun, fitCubics, fitFreehandPath, fitPathData, fitViewportToNodes, fitViewportToRect, flattenSvgPath, flowSide, formatAnimationTime, formatOklab, getAbsolutePosition, getAnimatableProperty, getAnimatedProperties, getAnimatedValue, getAnimationDuration, getAnimationTrack, getAutoLayout, getAutoLayoutGrid, getAutoLayoutInsertTarget, getBindableTokenProperties, getCanvasComponentDragId, getCanvasTokenProperty, getCenteredNodePosition, getChildLayout, getComponentSourceId, getCssPropertyAnimations, getEffectiveTokenModes, getFlowChildren, getInstanceData, getInstanceStatus, getKeyframeTimes, getLayoutParent, getLayoutSizing, getLayoutedNodes, getNextVariantValues, getNodeAnimation, getNodeOverrides, getNodeRect, getNodeShape, getNodeSize, getNodeTokenBindings, getNodeTokenModes, getResizingNodeRect, getShapeRenderData, getShapeSvg, getTimelineRows, getTimelineTicks, getTokenPropertyScope, getTokensForProperty, gradientToSvgDef, handlePoint, hasVisibleStroke, inferResizeHandle, inspectCanvasInstance, inspectNodeTokens, interpolateAnimationValue, intersectPaths, intersectPolygons, invertNodeUpdates, isAnimationEasing, isAnimationKeyframe, isAutoLayoutFrame, isCanvasComponent, isCanvasComponentSet, isCanvasGradient, isCanvasInstance, isCssExportExact, isEventFromTextInput, isKeyframeSelected, isLocked, isMeasureModifierHeld, isNodeAnimated, isShapeDescription, isShapeNode, isStraightCubic, isValidCanvasNode, isValidUrl, layoutAll, layoutBounds, layoutFrame, layoutUp, layoutUpMany, linearPositionTrajectory, linearTrajectory, listCanvasComponents, lockNodes, makeSizingCoherent, matchArrangeShortcut, matchSize, measureBetween, measureLabel, measureSelection, measureToLine, mergeNodeUpdates, mixColorsOklab, moveKeyframes, moveLayoutChild, multiPolygonArea, multiPolygonBounds, nearestHandlePositions, normalizeBezierPath, normalizeKeyframes, offsetPath, offsetShapeNodes, oklabToRgb, oppositePosition, outlineShapeNodeStrokes, outlineStroke, overlaps, parseCanvasClipboardData, parseCanvasScenes, parseCssEasing, parseCssGradient, parseKeyframeClipboard, parseOklab, parseSvgPath, pasteKeyframes, pathBoolean, placeBeside, playWebAnimations, pointInBezierPath, pointInMultiPolygon, pointInRings, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, pruneCanvasTokenModes, pushCanvasInstanceOverrides, readAnimatableValue, readNodeStyleProperty, readStyleSize, realClock, recordAnimationChanges, relayoutUpdates, remapPastedNodes, removeCanvasVariant, removeTrack, renameCanvasVariantProperty, renameCanvasVariantValue, reorderNodes, repositionNodesTo, resetCanvasInstanceOverrides, resizeHandleAxes, resolveCanvasGradient, resolveCanvasTokens, resolveEasing, resolvePadding, restoreCanvasMainComponent, revertShapeCombination, rgbToOklab, ringSignedArea, runMultiNodeTransition, sampleAnimationFrames, scaleKeyframes, serializeCanvasNodes, setCanvasComponentProperty, setCanvasInstanceProperties, setCanvasTokenMode, setCanvasVariantProperties, setKeyframe, setKeyframeEasing, setMotionPath, setTrackEnabled, shapeNodeToBezierPath, shapeNodeToPolygon, shapeToBezierPath, shapeToPolygon, sideToPosition, simplifyRing, snapKeyframeDelta, snapNodeDrag, snapNodeResize, snapResize, snapTimeToFrame, snapToGrid, springAt, streamlinePoints, strokeOutlineRings, strokePointsToPathData, strokeToShapeNode, subtractPaths, subtractPolygons, swapCanvasInstance, syncAllCanvasInstances, syncCanvasComponents, syncCanvasInstance, timeToX, toBezierPath, toWebAnimations, toggleLockNodes, transformBezierPath, unionPolygons, unitePaths, unlockNodes, updateKeyframe, withNodeAnimation, withStyleSize, wouldCreateComponentCycle, wrapAnimationTime, writeNodeStyleProperty, xToTime, xorPolygons } from '@pixerate/editor/canvas';
 import { TokenState, TokenStore, TokenModeContext } from '@pixerate/editor/tokens';
-import * as _pixerate_editor_animation from '@pixerate/editor/animation';
+import { DiagramControllerOptions, DiagramController, DiagramState, MermaidDocument, EditOp, DiagramActionResult, DiagramPlacement, PresenceClock, PresenceStore, DiagramDirector, PresenceState } from '@pixerate/editor/diagram';
 
 interface AgentPresenceLayerProps {
     presences: AgentPresence[];
@@ -572,7 +572,7 @@ declare function useCanvasAnimation<TNode extends CanvasNode = CanvasNode>(optio
     /** The nodes evaluated at the playhead; render these. */
     displayNodes: TNode[];
     clipboard: _pixerate_editor_canvas.AnimationKeyframeClipboard | null;
-    player: _pixerate_editor_animation.AnimationPlayer;
+    player: _pixerate_editor_canvas.AnimationPlayer;
     getState: () => _pixerate_editor_canvas.CanvasAnimationState;
     subscribe(listener: (state: _pixerate_editor_canvas.CanvasAnimationState) => void): () => void;
     refresh(): void;
@@ -594,10 +594,10 @@ declare function useCanvasAnimation<TNode extends CanvasNode = CanvasNode>(optio
     display: (nodes?: readonly TNode[] | undefined) => TNode[];
     applyDisplayChanges(next: TNode[]): _pixerate_editor_canvas.KeyframeRef[];
     addKeyframe(ids?: Iterable<string>, keys?: readonly string[], time?: number): _pixerate_editor_canvas.KeyframeRef[];
-    setKeyframe(nodeId: string, property: string, value: _pixerate_editor_animation.AnimationValue, time?: number, easing?: _pixerate_editor_animation.AnimationEasing | string): void;
+    setKeyframe(nodeId: string, property: string, value: _pixerate_editor_canvas.AnimationValue, time?: number, easing?: _pixerate_editor_canvas.AnimationEasing | string): void;
     updateKeyframe(ref: _pixerate_editor_canvas.KeyframeRef, patch: _pixerate_editor_canvas.KeyframePatch): void;
     deleteKeyframes(refs?: readonly _pixerate_editor_canvas.KeyframeRef[]): boolean;
-    setEasing(easing: _pixerate_editor_animation.AnimationEasing | string | null, refs?: readonly _pixerate_editor_canvas.KeyframeRef[]): boolean;
+    setEasing(easing: _pixerate_editor_canvas.AnimationEasing | string | null, refs?: readonly _pixerate_editor_canvas.KeyframeRef[]): boolean;
     setTrackEnabled(nodeId: string, property: string, enabled: boolean): void;
     removeTrack(nodeId: string, property: string): void;
     setMotionPath(nodeId: string, motionPath: {
@@ -766,4 +766,140 @@ interface CanvasInstanceInspectorProps<TNode extends CanvasNode = CanvasNode> {
  */
 declare function CanvasInstanceInspector<TNode extends CanvasNode = CanvasNode>({ nodes, nodeId, components, onError, className }: CanvasInstanceInspectorProps<TNode>): React__default.JSX.Element | null;
 
-export { AgentPresenceLayer, type AgentPresenceLayerProps, AnimationTimeline, type AnimationTimelineProps, type CanvasAnimation, type CanvasArrange, type CanvasAutoLayout, type CanvasComponents, CanvasComponentsPanel, type CanvasComponentsPanelActions, type CanvasComponentsPanelProps, type CanvasDraw, type CanvasDrawActions, CanvasDrawLayer, type CanvasDrawLayerProps, type CanvasDrawState, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, CanvasInstanceInspector, type CanvasInstanceInspectorActions, type CanvasInstanceInspectorProps, type CanvasMeasure, type CanvasScenes, type CanvasTokens, ShapeNode, type ShapeNodeProps, TokenBindingPicker, type TokenBindingPickerProps, TokenModeSwitcher, type TokenModeSwitcherProps, type UseCanvasAnimationOptions, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasClipboardOptions, type UseCanvasComponentsOptions, type UseCanvasDockingOptions, type UseCanvasDrawOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseCanvasTokensOptions, type UseStreamingCanvasOptions, useCanvasAnimation, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasAutoLayout, useCanvasClipboard, useCanvasComponents, useCanvasDocking, useCanvasDraw, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useCanvasTokens, useStreamingCanvas };
+interface UseMermaidDiagramOptions extends DiagramControllerOptions {
+    /** Layout spacing and node measuring for new nodes (stored positions always win). */
+    layoutOptions?: DiagramLayoutOptions;
+}
+type Placed = {
+    id: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    parentId?: string;
+};
+interface UseMermaidDiagramResult {
+    controller: DiagramController;
+    state: DiagramState;
+    document: MermaidDocument;
+    /** The Mermaid text (with the `%% @pixerate` layout comment). */
+    source: string;
+    /** Canvas nodes (groups first, children relative to their group) and edges. */
+    nodes: MermaidFlowNode[];
+    edges: MermaidFlowEdge[];
+    layout: DiagramLayout;
+    apply: (ops: EditOp | EditOp[], label?: string) => DiagramActionResult;
+    /** Replaces the source; `clearHistory` when opening a different diagram. */
+    load: (source: string, options?: {
+        clearHistory?: boolean;
+    }) => DiagramActionResult;
+    /** Stores where dragged nodes ended up (pass every canvas node as `all` so groups carry their contents). */
+    moveNodes: (moved: readonly Placed[], all?: readonly Placed[]) => DiagramActionResult | null;
+    connect: (source: string, target: string, label?: string) => DiagramActionResult;
+    /** Removes nodes / groups (with their edges) and edges by id, as one undo step. */
+    remove: (ids: readonly string[]) => DiagramActionResult;
+    rename: (id: string, label: string) => DiagramActionResult;
+    select: (ids: readonly string[]) => void;
+    undo: () => void;
+    redo: () => void;
+}
+/** The controller's state (re-renders on every change). */
+declare function useDiagramState(controller: DiagramController): DiagramState;
+/**
+ * A Mermaid diagram on a React Flow canvas: subscribes to a `DiagramController` (or creates
+ * one from options), lays it out and returns canvas nodes and edges with bound edits. Every
+ * edit rewrites only the statements it touches; positions go into `%% @pixerate`.
+ */
+declare function useMermaidDiagram(controllerOrOptions?: DiagramController | UseMermaidDiagramOptions): UseMermaidDiagramResult;
+interface UseMermaidStreamOptions extends DiagramLayoutOptions {
+    /** True once the whole source has arrived (unconnected nodes are shown then). */
+    complete?: boolean;
+    /** Glide duration between layouts in ms (default 300; 0 jumps). */
+    duration?: number;
+}
+interface UseMermaidStreamResult {
+    document: MermaidDocument | null;
+    nodes: MermaidFlowNode[];
+    edges: MermaidFlowEdge[];
+    /** The layout being shown (mid-glide while `settled` is false). */
+    layout: DiagramLayout | null;
+    settled: boolean;
+}
+/**
+ * Draws Mermaid that is still being written (e.g. a model's reply): nodes appear once an
+ * edge places them and glide to their new places as the layout grows. Read-only.
+ */
+declare function useMermaidStream(source: string, options?: UseMermaidStreamOptions): UseMermaidStreamResult;
+
+/** Node data as `mermaidToCanvas` produces it. */
+interface MermaidDiagramNodeData {
+    node?: {
+        id: string;
+        label: string;
+        shape: string;
+        data?: Record<string, unknown>;
+    };
+    group?: {
+        id: string;
+        label: string;
+    };
+    resolvedStyles?: Record<string, string>;
+    [key: string]: unknown;
+}
+interface MermaidDiagramNodeProps {
+    id?: string;
+    data: MermaidDiagramNodeData;
+    width?: number;
+    height?: number;
+    selected?: boolean;
+    className?: string;
+    /** Rendered over the node, e.g. React Flow `<Handle>`s. */
+    children?: React__default.ReactNode;
+    [key: string]: unknown;
+}
+/** Mermaid `style` / `classDef` declarations as the CSS the node paints with. */
+declare function mermaidNodeStyle(styles?: Record<string, string>, selected?: boolean): React__default.CSSProperties;
+/**
+ * Headless Mermaid node: draws the node's shape (flowchart, state, class, ER) as SVG with
+ * its label, painted from its Mermaid styles. Register it as the `mermaid-node` React Flow
+ * node type and pass `<Handle>`s as children.
+ */
+declare function MermaidDiagramNode({ data, width, height, selected, className, children }: MermaidDiagramNodeProps): React__default.JSX.Element | null;
+/** Headless Mermaid group (subgraph, composite state, namespace): a titled frame. Register as `mermaid-group`. */
+declare function MermaidDiagramGroup({ data, selected, className, children }: MermaidDiagramNodeProps): React__default.JSX.Element | null;
+
+interface UseDiagramDirectorOptions {
+    /** Where nodes are drawn now, e.g. `() => diagram.layout` from `useMermaidDiagram`. */
+    placement: () => DiagramPlacement;
+    /** 1 = natural speed; 2 = twice as fast. */
+    speed?: number;
+    clock?: PresenceClock;
+    /** Hide a cursor this long after its last call (ms, default 1500). */
+    linger?: number;
+}
+/**
+ * A `PresenceStore` and `DiagramDirector` for a diagram, created once: pass `director` to
+ * `createDiagramToolProvider` so agent edits are acted out by a cursor, and `presence` to
+ * `<DiagramPresenceLayer>` to draw it.
+ */
+declare function useDiagramDirector(controller: DiagramController, options: UseDiagramDirectorOptions): {
+    presence: PresenceStore;
+    director: DiagramDirector;
+};
+/** The presence store's state (re-renders on every cursor move). */
+declare function usePresenceState(presence: PresenceStore): PresenceState;
+
+interface DiagramPresenceLayerProps {
+    presence: PresenceStore;
+    /** The canvas viewport (React Flow's `useViewport()`), to place cursors given in canvas coordinates. */
+    viewport: {
+        x: number;
+        y: number;
+        zoom: number;
+    };
+    className?: string;
+}
+/** Agent cursors and their notes over a canvas, from a `PresenceStore` (see `DiagramDirector`). */
+declare function DiagramPresenceLayer({ presence, viewport, className }: DiagramPresenceLayerProps): React__default.JSX.Element | null;
+
+export { AgentPresenceLayer, type AgentPresenceLayerProps, AnimationTimeline, type AnimationTimelineProps, type CanvasAnimation, type CanvasArrange, type CanvasAutoLayout, type CanvasComponents, CanvasComponentsPanel, type CanvasComponentsPanelActions, type CanvasComponentsPanelProps, type CanvasDraw, type CanvasDrawActions, CanvasDrawLayer, type CanvasDrawLayerProps, type CanvasDrawState, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, CanvasInstanceInspector, type CanvasInstanceInspectorActions, type CanvasInstanceInspectorProps, type CanvasMeasure, type CanvasScenes, type CanvasTokens, DiagramPresenceLayer, type DiagramPresenceLayerProps, MermaidDiagramGroup, MermaidDiagramNode, type MermaidDiagramNodeData, type MermaidDiagramNodeProps, ShapeNode, type ShapeNodeProps, TokenBindingPicker, type TokenBindingPickerProps, TokenModeSwitcher, type TokenModeSwitcherProps, type UseCanvasAnimationOptions, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasClipboardOptions, type UseCanvasComponentsOptions, type UseCanvasDockingOptions, type UseCanvasDrawOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseCanvasTokensOptions, type UseDiagramDirectorOptions, type UseMermaidDiagramOptions, type UseMermaidDiagramResult, type UseMermaidStreamOptions, type UseMermaidStreamResult, type UseStreamingCanvasOptions, mermaidNodeStyle, useCanvasAnimation, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasAutoLayout, useCanvasClipboard, useCanvasComponents, useCanvasDocking, useCanvasDraw, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useCanvasTokens, useDiagramDirector, useDiagramState, useMermaidDiagram, useMermaidStream, usePresenceState, useStreamingCanvas };

package/dist/canvas/index.js

@@ -2532,6 +2532,200 @@ import {
   angleToSvgLinearCoords,
   gradientToSvgDef as gradientToSvgDef2
 } from "@pixerate/editor/canvas";
+
+// src/canvas/useMermaidDiagram.ts
+import { useEffect as useEffect10, useMemo as useMemo8, useRef as useRef15, useState as useState8, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import {
+  DiagramController
+} from "@pixerate/editor/diagram";
+import {
+  DiagramStream,
+  blendDiagramLayout,
+  easeDiagramTween,
+  mermaidMovesFromCanvas,
+  mermaidToCanvas
+} from "@pixerate/editor/canvas";
+function useDiagramState(controller) {
+  return useSyncExternalStore4(controller.subscribe, controller.getState, controller.getState);
+}
+function useMermaidDiagram(controllerOrOptions = {}) {
+  const own = useRef15(null);
+  let controller;
+  if (controllerOrOptions instanceof DiagramController) controller = controllerOrOptions;
+  else {
+    if (!own.current) own.current = new DiagramController(controllerOrOptions);
+    controller = own.current;
+  }
+  const layoutOptions = controllerOrOptions instanceof DiagramController ? void 0 : controllerOrOptions.layoutOptions;
+  const state = useDiagramState(controller);
+  const canvas = useMemo8(
+    () => mermaidToCanvas(state.document, { ...layoutOptions, editable: state.editable }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.document, state.editable]
+  );
+  const layoutRef = useRef15(canvas.layout);
+  layoutRef.current = canvas.layout;
+  const actions = useMemo8(
+    () => ({
+      apply: (ops, label) => controller.apply(ops, label),
+      load: (source, options) => controller.load(source, options),
+      moveNodes: (moved, all = moved) => {
+        const op = mermaidMovesFromCanvas(layoutRef.current, moved, all, { stored: controller.getDocument().meta.layout ?? {} });
+        return op ? controller.apply(op, "Move") : null;
+      },
+      connect: (source, target, label) => controller.apply({ type: "addEdge", edge: { source, target, ...label ? { label } : {} } }, "Connect"),
+      remove: (ids) => {
+        const graph = controller.getDocument().graph;
+        const edgeIds = new Set(graph.edges.map((e) => e.id));
+        const edges = ids.filter((id) => edgeIds.has(id));
+        const nodes = ids.filter((id) => !edgeIds.has(id));
+        const ops = [];
+        if (edges.length) ops.push({ type: "removeEdges", ids: edges });
+        if (nodes.length) ops.push({ type: "removeNodes", ids: nodes });
+        return controller.apply(ops, "Delete");
+      },
+      rename: (id, label) => controller.apply(
+        controller.getDocument().graph.groups.some((g) => g.id === id) ? { type: "renameGroup", id, label } : { type: "renameNode", id, label },
+        "Rename"
+      ),
+      select: (ids) => controller.select(ids),
+      undo: () => void controller.undo(),
+      redo: () => void controller.redo()
+    }),
+    [controller]
+  );
+  return { controller, state, document: state.document, source: state.source, ...canvas, ...actions };
+}
+function useMermaidStream(source, options = {}) {
+  const { complete = false, duration = 300, ...layoutOptions } = options;
+  const stream = useRef15(null);
+  if (!stream.current) stream.current = new DiagramStream(layoutOptions);
+  const result = useMemo8(() => stream.current.update(source, complete), [source, complete]);
+  const [shown, setShown] = useState8({ layout: result.layout, settled: true });
+  const shownRef = useRef15(shown.layout);
+  shownRef.current = shown.layout;
+  useEffect10(() => {
+    const target = result.layout;
+    if (!target) return setShown({ layout: null, settled: true });
+    const from = shownRef.current;
+    if (!from || duration <= 0 || typeof requestAnimationFrame !== "function") return setShown({ layout: target, settled: true });
+    if (from === target) return;
+    let frame = 0;
+    const start = performance.now();
+    const step = () => {
+      const t = Math.min(1, (performance.now() - start) / duration);
+      setShown({ layout: blendDiagramLayout(from, target, easeDiagramTween(t)), settled: t >= 1 });
+      if (t < 1) frame = requestAnimationFrame(step);
+    };
+    frame = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(frame);
+  }, [result.layout, duration]);
+  const doc = result.document.tier === "editable" ? result.document : null;
+  const canvas = useMemo8(() => {
+    if (!doc || !shown.layout) return { nodes: [], edges: [] };
+    const placed = new Set(Object.keys(shown.layout.positions));
+    const graph = {
+      ...doc.graph,
+      nodes: doc.graph.nodes.filter((n) => placed.has(n.id)),
+      groups: doc.graph.groups.filter((g) => placed.has(g.id)),
+      edges: doc.graph.edges.filter((e) => placed.has(e.source) && placed.has(e.target))
+    };
+    return mermaidToCanvas({ ...doc, graph }, { layout: shown.layout });
+  }, [doc, shown.layout]);
+  return { document: doc, ...canvas, layout: shown.layout, settled: shown.settled };
+}
+
+// src/canvas/MermaidDiagramNode.tsx
+import { MERMAID_SHAPE_PAINT, mermaidLabelLines, mermaidNodeMembers, mermaidNodePaint, mermaidShapePaths } from "@pixerate/editor/canvas";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function mermaidNodeStyle(styles = {}, selected = false) {
+  const paint = mermaidNodePaint(styles, selected);
+  const { color, "stroke-width": strokeWidth, "stroke-dasharray": strokeDasharray, ...vars } = paint;
+  return { ...vars, color, strokeWidth, strokeDasharray };
+}
+function MermaidDiagramNode({ data, width = 160, height = 56, selected, className = "", children }) {
+  const node = data.node;
+  if (!node) return null;
+  const members = mermaidNodeMembers(node.data);
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: `pixerate-diagram-node ${className}`.trim(),
+      "data-shape": node.shape,
+      "data-selected": selected ? "true" : void 0,
+      style: { position: "relative", width: "100%", height: "100%", ...mermaidNodeStyle(data.resolvedStyles, selected) },
+      children: [
+        /* @__PURE__ */ jsx8("svg", { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", width: "100%", height: "100%", style: { position: "absolute", inset: 0, overflow: "visible" }, "aria-hidden": "true", children: mermaidShapePaths(node.shape, width, height).map((path, i) => /* @__PURE__ */ jsx8("path", { d: path.d, style: { ...MERMAID_SHAPE_PAINT[path.paint], vectorEffect: "non-scaling-stroke" } }, i)) }),
+        /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            style: { position: "relative", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: members.length ? "flex-start" : "center", height: "100%", padding: "6px 10px", boxSizing: "border-box", fontSize: 13, lineHeight: 1.3, textAlign: "center", pointerEvents: "none" },
+            children: [
+              mermaidLabelLines(node.label).map((line, i) => /* @__PURE__ */ jsx8("span", { style: { fontWeight: members.length ? 600 : void 0 }, children: line }, i)),
+              members.length > 0 && /* @__PURE__ */ jsx8("div", { style: { alignSelf: "stretch", marginTop: 4, paddingTop: 4, borderTop: "1px solid var(--pixerate-diagram-node-border)", textAlign: "left", fontSize: 12 }, children: members.map((m, i) => /* @__PURE__ */ jsx8("div", { children: m }, i)) })
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function MermaidDiagramGroup({ data, selected, className = "", children }) {
+  const group = data.group;
+  if (!group) return null;
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: `pixerate-diagram-group ${className}`.trim(),
+      "data-selected": selected ? "true" : void 0,
+      style: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        borderRadius: 8,
+        border: `1px ${selected ? "solid" : "dashed"} ${selected ? "var(--primary, #2563eb)" : data.resolvedStyles?.stroke ?? "var(--border, #cbd5e1)"}`,
+        background: data.resolvedStyles?.fill ?? "var(--muted, rgba(148, 163, 184, 0.08))",
+        color: data.resolvedStyles?.color ?? "var(--muted-foreground, #475569)"
+      },
+      children: [
+        /* @__PURE__ */ jsx8("div", { style: { padding: "6px 10px", fontSize: 12, fontWeight: 600 }, children: mermaidLabelLines(group.label).join(" ") }),
+        children
+      ]
+    }
+  );
+}
+
+// src/canvas/useDiagramDirector.ts
+import { useRef as useRef16, useSyncExternalStore as useSyncExternalStore5 } from "react";
+import { DiagramDirector, PresenceStore } from "@pixerate/editor/diagram";
+function useDiagramDirector(controller, options) {
+  const placement = useRef16(options.placement);
+  placement.current = options.placement;
+  const ref = useRef16(null);
+  if (!ref.current) {
+    const presence = new PresenceStore();
+    ref.current = {
+      presence,
+      director: new DiagramDirector(controller, presence, { placement: () => placement.current(), speed: options.speed, clock: options.clock, linger: options.linger })
+    };
+  }
+  return ref.current;
+}
+function usePresenceState(presence) {
+  return useSyncExternalStore5(presence.subscribe, presence.getState, presence.getState);
+}
+
+// src/canvas/DiagramPresenceLayer.tsx
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function DiagramPresenceLayer({ presence, viewport, className = "" }) {
+  const { actors } = usePresenceState(presence);
+  if (!actors.length) return null;
+  return /* @__PURE__ */ jsx9("div", { className: `pixerate-diagram-presence ${className}`.trim(), "aria-hidden": "true", style: { position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden", zIndex: 50 }, children: actors.map((a) => /* @__PURE__ */ jsxs9("div", { "data-actor": a.id, style: { position: "absolute", left: 0, top: 0, transform: `translate(${a.x * viewport.zoom + viewport.x}px, ${a.y * viewport.zoom + viewport.y}px)` }, children: [
+    /* @__PURE__ */ jsx9("svg", { width: "18", height: "20", viewBox: "0 0 12 18", style: { display: "block", transform: a.pressed ? "scale(0.85)" : void 0, transformOrigin: "0 0" }, children: /* @__PURE__ */ jsx9("path", { d: "M0,0 L0,14 L4,10.5 L7,17 L9.5,16 L6.5,9.5 L11.5,9.5 Z", style: { fill: a.color, stroke: "#ffffff", strokeWidth: 1 } }) }),
+    /* @__PURE__ */ jsx9("span", { style: { position: "absolute", left: 14, top: 16, whiteSpace: "nowrap", borderRadius: 4, padding: "1px 6px", fontSize: 11, fontWeight: 600, color: "#ffffff", background: a.color }, children: a.message ?? a.name })
+  ] }, a.id)) });
+}
 export {
   ANIMATABLE_PROPERTIES,
   ANIMATION_DATA_KEY,
@@ -2556,8 +2750,11 @@ export {
   CanvasInstanceInspector,
   CanvasScenesStore2 as CanvasScenesStore,
   DEFAULT_ARRANGE_SHORTCUTS,
+  DiagramPresenceLayer,
   MAX_KEYFRAME_REFS,
   ManualClock,
+  MermaidDiagramGroup,
+  MermaidDiagramNode,
   RESIZE_HANDLES,
   SHAPE_DATA_KEY,
   SHAPE_KINDS,
@@ -2738,6 +2935,7 @@ export {
   measureSelection2 as measureSelection,
   measureToLine,
   mergeNodeUpdates,
+  mermaidNodeStyle,
   mixColorsOklab,
   moveKeyframes,
   moveLayoutChild,
@@ -2855,6 +3053,11 @@ export {
   useCanvasScenes,
   useCanvasShortcuts,
   useCanvasTokens,
+  useDiagramDirector,
+  useDiagramState,
+  useMermaidDiagram,
+  useMermaidStream,
+  usePresenceState,
   useStreamingCanvas,
   withNodeAnimation,
   withStyleSize,