@pixerate/editor-react 0.51.0 → 0.52.0

package/dist/canvas/index.d.cts

@@ -1,9 +1,10 @@
 import * as React$1 from 'react';
-import React__default from 'react';
+import React__default, { RefObject } 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, DiagramScene, DiagramLayoutOptions, DiagramSceneTheme, MermaidFlowNode, MermaidFlowEdge, DiagramLayout, DiagramSvgOptions } 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, CanvasCaptureToolProviderOptions, FreehandTool, FreehandStrokeStyle, FreehandStroke, FreehandDrawOptions, ShapeDescription, AutoLayoutMeasure, CanvasTokenOptions, AnimationHistoryTarget, Clock, AnimationLoopMode, AnimatableProperty, CanvasComponentSyncOptions, CanvasComponentsController, DiagramScene, DiagramLayoutOptions, DiagramSceneTheme, MermaidFlowNode, MermaidFlowEdge, DiagramLayout, DiagramSvgOptions } 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 { AgentToolProvider } from '@pixerate/editor/tools';
 import { TokenState, TokenStore, TokenModeContext } from '@pixerate/editor/tokens';
 import { DiagramControllerOptions, DiagramController, DiagramState, MermaidDocument, EditOp, DiagramActionResult, DiagramPlacement, PresenceClock, PresenceStore, DiagramDirector, PresenceState } from '@pixerate/editor/diagram';
 
@@ -284,6 +285,24 @@ declare function useCanvasScenes(options?: UseCanvasScenesOptions): {
 };
 type CanvasScenes = ReturnType<typeof useCanvasScenes>;
 
+interface UseCanvasCaptureOptions<TNode extends CanvasNode = CanvasNode> extends Omit<CanvasCaptureToolProviderOptions<TNode>, 'element'> {
+    /** The flow's root element (`.react-flow`): a ref, the element, or a getter. */
+    element: RefObject<HTMLElement | null> | HTMLElement | null | undefined | (() => HTMLElement | null | undefined);
+}
+/**
+ * The `capture_view` agent tool for a React Flow canvas: screenshots of the viewport, all
+ * content, the selection, nodes by id or a rect in canvas units. Register the result with
+ * `useAgentToolProvider`. The provider stays the same object across renders (it reads the
+ * latest options on each call) and changes only with `id` / `namespace`.
+ *
+ * ```tsx
+ * const flow = useReactFlow();
+ * const capture = useCanvasCapture({ element: paneRef, getViewport: flow.getViewport, getNodes: flow.getNodes, namespace: 'canvas' });
+ * useAgentToolProvider(registry, capture);
+ * ```
+ */
+declare function useCanvasCapture<TNode extends CanvasNode = CanvasNode>(options: UseCanvasCaptureOptions<TNode>): AgentToolProvider;
+
 interface CanvasGuidesLayerProps {
     /** Guide segments in flow coordinates (e.g. `arrange.guides`). */
     guides: GuideLine[];
@@ -955,4 +974,4 @@ interface DiagramPresenceLayerProps {
 /** 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, MermaidFamilyScene, type MermaidFamilySceneProps, MermaidThumbnail, type MermaidThumbnailProps, 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 };
+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, MermaidFamilyScene, type MermaidFamilySceneProps, MermaidThumbnail, type MermaidThumbnailProps, ShapeNode, type ShapeNodeProps, TokenBindingPicker, type TokenBindingPickerProps, TokenModeSwitcher, type TokenModeSwitcherProps, type UseCanvasAnimationOptions, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasCaptureOptions, 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, useCanvasCapture, useCanvasClipboard, useCanvasComponents, useCanvasDocking, useCanvasDraw, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useCanvasTokens, useDiagramDirector, useDiagramState, useMermaidDiagram, useMermaidStream, usePresenceState, useStreamingCanvas };

package/dist/canvas/index.d.ts

@@ -1,9 +1,10 @@
 import * as React$1 from 'react';
-import React__default from 'react';
+import React__default, { RefObject } 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, DiagramScene, DiagramLayoutOptions, DiagramSceneTheme, MermaidFlowNode, MermaidFlowEdge, DiagramLayout, DiagramSvgOptions } 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, CanvasCaptureToolProviderOptions, FreehandTool, FreehandStrokeStyle, FreehandStroke, FreehandDrawOptions, ShapeDescription, AutoLayoutMeasure, CanvasTokenOptions, AnimationHistoryTarget, Clock, AnimationLoopMode, AnimatableProperty, CanvasComponentSyncOptions, CanvasComponentsController, DiagramScene, DiagramLayoutOptions, DiagramSceneTheme, MermaidFlowNode, MermaidFlowEdge, DiagramLayout, DiagramSvgOptions } 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 { AgentToolProvider } from '@pixerate/editor/tools';
 import { TokenState, TokenStore, TokenModeContext } from '@pixerate/editor/tokens';
 import { DiagramControllerOptions, DiagramController, DiagramState, MermaidDocument, EditOp, DiagramActionResult, DiagramPlacement, PresenceClock, PresenceStore, DiagramDirector, PresenceState } from '@pixerate/editor/diagram';
 
@@ -284,6 +285,24 @@ declare function useCanvasScenes(options?: UseCanvasScenesOptions): {
 };
 type CanvasScenes = ReturnType<typeof useCanvasScenes>;
 
+interface UseCanvasCaptureOptions<TNode extends CanvasNode = CanvasNode> extends Omit<CanvasCaptureToolProviderOptions<TNode>, 'element'> {
+    /** The flow's root element (`.react-flow`): a ref, the element, or a getter. */
+    element: RefObject<HTMLElement | null> | HTMLElement | null | undefined | (() => HTMLElement | null | undefined);
+}
+/**
+ * The `capture_view` agent tool for a React Flow canvas: screenshots of the viewport, all
+ * content, the selection, nodes by id or a rect in canvas units. Register the result with
+ * `useAgentToolProvider`. The provider stays the same object across renders (it reads the
+ * latest options on each call) and changes only with `id` / `namespace`.
+ *
+ * ```tsx
+ * const flow = useReactFlow();
+ * const capture = useCanvasCapture({ element: paneRef, getViewport: flow.getViewport, getNodes: flow.getNodes, namespace: 'canvas' });
+ * useAgentToolProvider(registry, capture);
+ * ```
+ */
+declare function useCanvasCapture<TNode extends CanvasNode = CanvasNode>(options: UseCanvasCaptureOptions<TNode>): AgentToolProvider;
+
 interface CanvasGuidesLayerProps {
     /** Guide segments in flow coordinates (e.g. `arrange.guides`). */
     guides: GuideLine[];
@@ -955,4 +974,4 @@ interface DiagramPresenceLayerProps {
 /** 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, MermaidFamilyScene, type MermaidFamilySceneProps, MermaidThumbnail, type MermaidThumbnailProps, 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 };
+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, MermaidFamilyScene, type MermaidFamilySceneProps, MermaidThumbnail, type MermaidThumbnailProps, ShapeNode, type ShapeNodeProps, TokenBindingPicker, type TokenBindingPickerProps, TokenModeSwitcher, type TokenModeSwitcherProps, type UseCanvasAnimationOptions, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasCaptureOptions, 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, useCanvasCapture, useCanvasClipboard, useCanvasComponents, useCanvasDocking, useCanvasDraw, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useCanvasTokens, useDiagramDirector, useDiagramState, useMermaidDiagram, useMermaidStream, usePresenceState, useStreamingCanvas };

package/dist/canvas/index.js

@@ -893,6 +893,34 @@ function useCanvasScenes(options = {}) {
   };
 }
 
+// src/canvas/useCanvasCapture.ts
+import { useMemo as useMemo3, useRef as useRef7 } from "react";
+import {
+  canvasNodeCaptureRect,
+  createCanvasCaptureToolProvider
+} from "@pixerate/editor/canvas";
+import { rasterizeElement } from "@pixerate/editor/tools";
+function useCanvasCapture(options) {
+  const optionsRef = useRef7(options);
+  optionsRef.current = options;
+  return useMemo3(() => {
+    const latest = () => optionsRef.current;
+    return createCanvasCaptureToolProvider({
+      ...options,
+      element: () => {
+        const el = latest().element;
+        if (typeof el === "function") return el();
+        if (el && "current" in el) return el.current;
+        return el;
+      },
+      getViewport: () => latest().getViewport(),
+      getNodes: () => latest().getNodes(),
+      getNodeRect: (node, nodes) => (latest().getNodeRect ?? canvasNodeCaptureRect)(node, nodes),
+      rasterize: (element, raster) => (latest().rasterize ?? rasterizeElement)(element, raster)
+    });
+  }, [options.id, options.namespace]);
+}
+
 // src/canvas/CanvasGuidesLayer.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var DEFAULT_VIEWPORT = { x: 0, y: 0, zoom: 1 };
@@ -977,18 +1005,18 @@ function CanvasGuidesLayer({
 }
 
 // src/canvas/useCanvasDraw.ts
-import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef7, useState as useState3 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo4, useRef as useRef8, useState as useState3 } from "react";
 import {
   createCanvasDrawController
 } from "@pixerate/editor/canvas";
 function useCanvasDraw(options) {
-  const nodesRef = useRef7(options.nodes);
+  const nodesRef = useRef8(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = useRef7(options);
+  const optionsRef = useRef8(options);
   optionsRef.current = options;
   const [tool, setToolState] = useState3(options.initialTool ?? "select");
   const [activeStroke, setActiveStroke] = useState3(null);
-  const controller = useMemo3(
+  const controller = useMemo4(
     () => createCanvasDrawController({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
@@ -1016,7 +1044,7 @@ function useCanvasDraw(options) {
       controller.setTool(options.initialTool);
     }
   }, [options.initialTool, controller]);
-  return useMemo3(
+  return useMemo4(
     () => ({
       tool,
       style,
@@ -1035,7 +1063,7 @@ function useCanvasDraw(options) {
 }
 
 // src/canvas/CanvasDrawLayer.tsx
-import { useCallback as useCallback7, useEffect as useEffect5, useRef as useRef8, useState as useState4 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect5, useRef as useRef9, useState as useState4 } from "react";
 import {
   strokePointsToPathData,
   resolveCanvasGradient,
@@ -1051,7 +1079,7 @@ function CanvasDrawLayer({
   cursor,
   eraserRadius = 12
 }) {
-  const svgRef = useRef8(null);
+  const svgRef = useRef9(null);
   const [spaceHeld, setSpaceHeld] = useState4(false);
   const [eraserPos, setEraserPos] = useState4(null);
   useEffect5(() => {
@@ -1189,7 +1217,7 @@ function CanvasDrawLayer({
 }
 
 // src/canvas/useCanvasMeasure.ts
-import { useCallback as useCallback8, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef9, useState as useState5 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef10, useState as useState5 } from "react";
 import {
   isMeasureModifierHeld,
   measureSelection
@@ -1199,7 +1227,7 @@ function useCanvasMeasure(options) {
   const { nodes, enabled = true, requireModifier = true, targetElement, rectOptions } = options;
   const [hoveredId, setHoveredId] = useState5(null);
   const [modifier, setModifier] = useState5(false);
-  const optionsRef = useRef9(options);
+  const optionsRef = useRef10(options);
   optionsRef.current = options;
   useEffect6(() => {
     if (!enabled) return;
@@ -1218,7 +1246,7 @@ function useCanvasMeasure(options) {
     };
   }, [enabled, targetElement]);
   const active = enabled && (!requireModifier || modifier);
-  const result = useMemo4(() => {
+  const result = useMemo5(() => {
     if (!active) return EMPTY;
     const ids = optionsRef.current.getSelectedIds?.() ?? nodes.filter((n) => n.selected).map((n) => n.id);
     return measureSelection(nodes, ids, hoveredId, rectOptions);
@@ -1486,17 +1514,17 @@ import {
 } from "@pixerate/editor/canvas";
 
 // src/canvas/useCanvasAutoLayout.ts
-import { useLayoutEffect, useMemo as useMemo5, useRef as useRef10, useState as useState6 } from "react";
+import { useLayoutEffect, useMemo as useMemo6, useRef as useRef11, useState as useState6 } from "react";
 import {
   createCanvasAutoLayoutController
 } from "@pixerate/editor/canvas";
 function useCanvasAutoLayout(options) {
   const [guides, setGuides] = useState6([]);
-  const nodesRef = useRef10(options.nodes);
+  const nodesRef = useRef11(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = useRef10(options);
+  const optionsRef = useRef11(options);
   optionsRef.current = options;
-  const controller = useMemo5(
+  const controller = useMemo6(
     () => createCanvasAutoLayoutController({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
@@ -1525,7 +1553,7 @@ function useCanvasAutoLayout(options) {
   useLayoutEffect(() => {
     if (controller.hasPending) controller.flush();
   }, [options.nodes, controller]);
-  return useMemo5(
+  return useMemo6(
     () => ({
       ...controller,
       /** Drop marker of the active reorder drag (flow coordinates). */
@@ -1539,7 +1567,7 @@ function useCanvasAutoLayout(options) {
 }
 
 // src/canvas/useCanvasTokens.ts
-import { useCallback as useCallback9, useEffect as useEffect7, useRef as useRef11, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect7, useRef as useRef12, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import {
   bindCanvasToken,
   detachTokenBindings,
@@ -1550,7 +1578,7 @@ import {
 function useCanvasTokens(options) {
   const { store, nodes, setNodes, modes, properties } = options;
   const state = useSyncExternalStore2(store.subscribe, store.getState, store.getState);
-  const latest = useRef11({ nodes, setNodes, modes, properties });
+  const latest = useRef12({ nodes, setNodes, modes, properties });
   latest.current = { nodes, setNodes, modes, properties };
   const opts = () => ({ modes: latest.current.modes, properties: latest.current.properties });
   useEffect7(
@@ -1733,16 +1761,16 @@ import {
 } from "@pixerate/editor/canvas";
 
 // src/canvas/useCanvasAnimation.ts
-import { useEffect as useEffect8, useMemo as useMemo6, useRef as useRef12, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo7, useRef as useRef13, useSyncExternalStore as useSyncExternalStore3 } from "react";
 import {
   createCanvasAnimationController
 } from "@pixerate/editor/canvas";
 function useCanvasAnimation(options) {
-  const nodesRef = useRef12(options.nodes);
+  const nodesRef = useRef13(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = useRef12(options);
+  const optionsRef = useRef13(options);
   optionsRef.current = options;
-  const controller = useMemo6(
+  const controller = useMemo7(
     () => createCanvasAnimationController({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
@@ -1787,8 +1815,8 @@ function useCanvasAnimation(options) {
   useEffect8(() => {
     controller.refresh();
   }, [controller, options.nodes]);
-  const displayNodes = useMemo6(() => controller.display(options.nodes), [controller, options.nodes, state.time]);
-  return useMemo6(
+  const displayNodes = useMemo7(() => controller.display(options.nodes), [controller, options.nodes, state.time]);
+  return useMemo7(
     () => ({
       ...controller,
       state,
@@ -1809,7 +1837,7 @@ function useCanvasAnimation(options) {
 }
 
 // src/canvas/AnimationTimeline.tsx
-import { useEffect as useEffect9, useRef as useRef13 } from "react";
+import { useEffect as useEffect9, useRef as useRef14 } from "react";
 import {
   ANIMATION_EASING_LABELS,
   ANIMATION_EASING_PRESETS,
@@ -1832,7 +1860,7 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
     for (const row of rows) for (const k of row.keyframes) if (k.selected && k.ref.property === first.property && k.ref.nodeId === first.nodeId) return easingValue(k.easing);
     return "";
   })();
-  const dragRef = useRef13(null);
+  const dragRef = useRef14(null);
   useEffect9(() => {
     const onKey = (event) => {
       if (event.key === "Escape" && dragRef.current) {
@@ -2071,16 +2099,16 @@ import {
 } from "@pixerate/editor/canvas";
 
 // src/canvas/useCanvasComponents.ts
-import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo7, useRef as useRef14 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo8, useRef as useRef15 } from "react";
 import {
   createCanvasComponentsController
 } from "@pixerate/editor/canvas";
 function useCanvasComponents(options) {
-  const nodesRef = useRef14(options.nodes);
+  const nodesRef = useRef15(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = useRef14(options);
+  const optionsRef = useRef15(options);
   optionsRef.current = options;
-  const controller = useMemo7(
+  const controller = useMemo8(
     () => createCanvasComponentsController({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
@@ -2663,7 +2691,7 @@ function MermaidFamilyScene({
 }
 
 // src/canvas/useMermaidDiagram.ts
-import { useEffect as useEffect10, useMemo as useMemo8, useRef as useRef15, useState as useState8, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo9, useRef as useRef16, useState as useState8, useSyncExternalStore as useSyncExternalStore4 } from "react";
 import {
   DiagramController
 } from "@pixerate/editor/diagram";
@@ -2681,7 +2709,7 @@ function useDiagramState(controller) {
   return useSyncExternalStore4(controller.subscribe, controller.getState, controller.getState);
 }
 function useMermaidDiagram(controllerOrOptions = {}, view = {}) {
-  const own = useRef15(null);
+  const own = useRef16(null);
   let controller;
   if (controllerOrOptions instanceof DiagramController) controller = controllerOrOptions;
   else {
@@ -2691,19 +2719,19 @@ function useMermaidDiagram(controllerOrOptions = {}, view = {}) {
   const layoutOptions = (controllerOrOptions instanceof DiagramController ? void 0 : controllerOrOptions.layoutOptions) ?? view.layoutOptions;
   const sceneTheme = (controllerOrOptions instanceof DiagramController ? void 0 : controllerOrOptions.sceneTheme) ?? view.sceneTheme;
   const state = useDiagramState(controller);
-  const canvas = useMemo8(
+  const canvas = useMemo9(
     () => mermaidToCanvas(state.document, { ...layoutOptions, editable: state.editable }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.document, state.editable]
   );
-  const scene = useMemo8(
+  const scene = useMemo9(
     () => state.document.tier === "editable" ? familySceneFromLayout(state.document.family, state.document.graph, canvas.layout, { theme: { ...CSS_VARIABLE_DIAGRAM_SCENE_THEME, ...sceneTheme }, selection: state.selection }) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.document, canvas.layout, state.selection]
   );
-  const layoutRef = useRef15(canvas.layout);
+  const layoutRef = useRef16(canvas.layout);
   layoutRef.current = canvas.layout;
-  const actions = useMemo8(
+  const actions = useMemo9(
     () => ({
       apply: (ops, label) => controller.apply(ops, label),
       load: (source, options) => controller.load(source, options),
@@ -2740,11 +2768,11 @@ function useMermaidDiagram(controllerOrOptions = {}, view = {}) {
 }
 function useMermaidStream(source, options = {}) {
   const { complete = false, duration = 300, ...layoutOptions } = options;
-  const stream = useRef15(null);
+  const stream = useRef16(null);
   if (!stream.current) stream.current = new DiagramStream(layoutOptions);
-  const result = useMemo8(() => stream.current.update(source, complete), [source, complete]);
+  const result = useMemo9(() => stream.current.update(source, complete), [source, complete]);
   const [shown, setShown] = useState8({ layout: result.layout, settled: true });
-  const shownRef = useRef15(shown.layout);
+  const shownRef = useRef16(shown.layout);
   shownRef.current = shown.layout;
   useEffect10(() => {
     const target = result.layout;
@@ -2763,7 +2791,7 @@ function useMermaidStream(source, options = {}) {
     return () => cancelAnimationFrame(frame);
   }, [result.layout, duration]);
   const doc = result.document.tier === "editable" ? result.document : null;
-  const canvas = useMemo8(() => {
+  const canvas = useMemo9(() => {
     if (!doc || !shown.layout) return { nodes: [], edges: [] };
     const placed = new Set(Object.keys(shown.layout.positions));
     const graph = {
@@ -2839,14 +2867,14 @@ function MermaidDiagramGroup({ data, selected, className = "", children }) {
 }
 
 // src/canvas/MermaidThumbnail.tsx
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo10 } from "react";
 import { parseMermaid } from "@pixerate/editor/diagram";
 import { mermaidThumbnailSvg } from "@pixerate/editor/canvas";
 import { Fragment as Fragment2, jsx as jsx10 } from "react/jsx-runtime";
 function MermaidThumbnail({ source, className = "", fallback = null, ...options }) {
-  const doc = useMemo9(() => typeof source === "string" ? parseMermaid(source) : source, [source]);
+  const doc = useMemo10(() => typeof source === "string" ? parseMermaid(source) : source, [source]);
   const key = JSON.stringify(options);
-  const drawn = useMemo9(
+  const drawn = useMemo10(
     () => doc.tier === "editable" && doc.graph.nodes.length ? mermaidThumbnailSvg(doc, options) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [doc, key]
@@ -2856,12 +2884,12 @@ function MermaidThumbnail({ source, className = "", fallback = null, ...options
 }
 
 // src/canvas/useDiagramDirector.ts
-import { useRef as useRef16, useSyncExternalStore as useSyncExternalStore5 } from "react";
+import { useRef as useRef17, useSyncExternalStore as useSyncExternalStore5 } from "react";
 import { DiagramDirector, PresenceStore } from "@pixerate/editor/diagram";
 function useDiagramDirector(controller, options) {
-  const placement = useRef16(options.placement);
+  const placement = useRef17(options.placement);
   placement.current = options.placement;
-  const ref = useRef16(null);
+  const ref = useRef17(null);
   if (!ref.current) {
     const presence = new PresenceStore();
     ref.current = {
@@ -3203,6 +3231,7 @@ export {
   useCanvasArrange,
   useCanvasArrangeShortcuts,
   useCanvasAutoLayout,
+  useCanvasCapture,
   useCanvasClipboard,
   useCanvasComponents,
   useCanvasDocking,