@pixerate/editor-react 0.87.0 → 0.89.0

package/dist/canvas/index.d.cts

@@ -2,8 +2,8 @@ import * as React$1 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, CanvasCaptureToolProviderOptions, FreehandTool, FreehandStrokeStyle, FreehandStroke, FreehandPenSample, DrawStrokeInput, DrawStrokeResult, CanvasBrushPreset, FreehandDrawOptions, ShapeDescription, CanvasBrushstrokeImage, AutoLayoutMeasure, CanvasTokenOptions, AnimationHistoryTarget, Clock, AnimationLoopMode, AnimatableProperty, CanvasComponentSyncOptions, CanvasComponentsController, DiagramScene, DiagramLayoutOptions, DiagramSceneTheme, MermaidFlowNode, MermaidFlowEdge, DiagramLayout, DiagramSvgOptions, CanvasEffectsController, CanvasShapeEffect, CanvasEffectsControllerOptions, CanvasEffectsToolProviderOptions } 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, BrushedPathShape, 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, CanvasBrush, CanvasBrushPaint, CanvasBrushPaintMapping, CanvasBrushPaintStop, CanvasBrushPreset, CanvasBrushSettings, CanvasBrushstroke, CanvasBrushstrokeImage, 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, DrawStrokeInput, DrawStrokeResult, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, FreehandPenSample, FreehandPointerLike, 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, RenderShapeBrushstrokeOptions, 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, brushstrokeScaleBucket, 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, freehandBrushstroke, getAbsolutePosition, getAnimatableProperty, getAnimatedProperties, getAnimatedValue, getAnimationDuration, getAnimationTrack, getAutoLayout, getAutoLayoutGrid, getAutoLayoutInsertTarget, getBindableTokenProperties, getBrushedShapeSvg, 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, isBrushedShape, isCanvasComponent, isCanvasComponentSet, isCanvasGradient, isCanvasInstance, isCssExportExact, isEventFromTextInput, isKeyframeSelected, isLocked, isMeasureModifierHeld, isNodeAnimated, isShapeDescription, isShapeNode, isStraightCubic, isValidCanvasNode, isValidUrl, layoutAll, layoutBounds, layoutFrame, layoutUp, layoutUpMany, linearPositionTrajectory, linearTrajectory, listCanvasBrushes, listCanvasComponents, loadCanvasBrushstrokeRenderer, 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, pathDataToPolyline, placeBeside, playWebAnimations, pointInBezierPath, pointInMultiPolygon, pointInRings, pointerPenSample, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, profileAlongPolyline, pruneCanvasTokenModes, pushCanvasInstanceOverrides, readAnimatableValue, readNodeStyleProperty, readStyleSize, realClock, recordAnimationChanges, relayoutUpdates, remapPastedNodes, removeCanvasVariant, removeTrack, renameCanvasVariantProperty, renameCanvasVariantValue, renderShapeBrushstroke, 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, validateCanvasBrush, validateCanvasBrushPaint, withNodeAnimation, withStyleSize, wouldCreateComponentCycle, wrapAnimationTime, writeNodeStyleProperty, xToTime, xorPolygons } 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, FreehandPenSample, DrawStrokeInput, DrawStrokeResult, CanvasBrushPreset, FreehandDrawOptions, ShapeDescription, CanvasBrushSwatchOptions, CanvasBrushstrokeImage, AutoLayoutMeasure, CanvasTokenOptions, AnimationHistoryTarget, Clock, AnimationLoopMode, AnimatableProperty, CanvasComponentSyncOptions, CanvasComponentsController, DiagramScene, DiagramLayoutOptions, DiagramSceneTheme, MermaidFlowNode, MermaidFlowEdge, DiagramLayout, DiagramSvgOptions, CanvasEffectsController, CanvasShapeEffect, CanvasEffectsControllerOptions, CanvasEffectsToolProviderOptions } 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, BrushedPathShape, 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, CanvasBrush, CanvasBrushPaint, CanvasBrushPaintMapping, CanvasBrushPaintStop, CanvasBrushPaper, CanvasBrushPreset, CanvasBrushSettings, CanvasBrushSwatchOptions, CanvasBrushstroke, CanvasBrushstrokeImage, 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, DrawStrokeInput, DrawStrokeResult, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, FreehandPenSample, FreehandPointerLike, 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, RenderShapeBrushstrokeOptions, 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, brushstrokeScaleBucket, brushstrokeSeed, 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, freehandBrushstroke, getAbsolutePosition, getAnimatableProperty, getAnimatedProperties, getAnimatedValue, getAnimationDuration, getAnimationTrack, getAutoLayout, getAutoLayoutGrid, getAutoLayoutInsertTarget, getBindableTokenProperties, getBrushedShapeSvg, 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, isBrushedShape, isCanvasComponent, isCanvasComponentSet, isCanvasGradient, isCanvasInstance, isCssExportExact, isEventFromTextInput, isKeyframeSelected, isLocked, isMeasureModifierHeld, isNodeAnimated, isShapeDescription, isShapeNode, isStraightCubic, isValidCanvasNode, isValidUrl, layoutAll, layoutBounds, layoutFrame, layoutUp, layoutUpMany, linearPositionTrajectory, linearTrajectory, listCanvasBrushes, listCanvasComponents, loadCanvasBrushstrokeRenderer, 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, pathDataToPolyline, placeBeside, playWebAnimations, pointInBezierPath, pointInMultiPolygon, pointInRings, pointerPenSample, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, profileAlongPolyline, pruneCanvasTokenModes, pushCanvasInstanceOverrides, readAnimatableValue, readNodeStyleProperty, readStyleSize, realClock, recordAnimationChanges, relayoutUpdates, remapPastedNodes, removeCanvasVariant, removeTrack, renameCanvasVariantProperty, renameCanvasVariantValue, renderCanvasBrushSwatch, renderShapeBrushstroke, 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, validateCanvasBrush, validateCanvasBrushPaint, withNodeAnimation, withStyleSize, wouldCreateComponentCycle, wrapAnimationTime, writeNodeStyleProperty, xToTime, xorPolygons } from '@pixerate/editor/canvas';
 import { EffectProvider } from '@pixerate/editor/effects';
 import { AgentToolProvider, ToolRegistry } from '@pixerate/editor/tools';
 import { TokenState, TokenStore, TokenModeContext } from '@pixerate/editor/tokens';
@@ -441,6 +441,9 @@ interface ShapeNodeProps {
     width?: number;
     height?: number;
     selected?: boolean;
+    /** Absolute canvas position (React Flow passes it): brushed strokes sample the paper grain there. */
+    positionAbsoluteX?: number;
+    positionAbsoluteY?: number;
     className?: string;
     /** Rendered over the shape, e.g. React Flow `<Handle>`s or a label. */
     children?: React__default.ReactNode;
@@ -456,7 +459,7 @@ interface ShapeNodeProps {
  * effect (`shape.effect`) is drawn inside the shape or over it when a `<CanvasEffectsProvider>`
  * gives a provider.
  */
-declare function ShapeNode({ id, data, width, height, selected, className, children }: ShapeNodeProps): React__default.JSX.Element | null;
+declare function ShapeNode({ id, data, width, height, selected, className, children, positionAbsoluteX, positionAbsoluteY }: ShapeNodeProps): React__default.JSX.Element | null;
 
 /** The canvas zoom bucket brushed shape nodes render at (1 without a provider). */
 declare const ShapeNodeZoomContext: React__default.Context<number>;
@@ -472,12 +475,24 @@ declare function ShapeNodeZoomProvider({ zoom, children }: {
 /**
  * The image of a brushed shape (`data.shape.brush`) for a node of `width` × `height`, or null
  * while it renders, for unbrushed shapes, and when the brush cannot render (it then logs why).
- * The paint engine loads on the first brushed shape.
+ * The paint engine loads on the first brushed shape. `position` is the node's absolute canvas
+ * position (React Flow's `positionAbsoluteX` / `positionAbsoluteY`): the paper grain is sampled
+ * there, so neighbouring strokes share one sheet of paper.
  */
-declare function useShapeBrushstroke(shape: ShapeDescription | null | undefined, width?: number, height?: number): CanvasBrushstrokeImage | null;
-/** The dry paint presets a freehand stroke can be brushed with (loads the paint engine on mount). */
-declare function useCanvasBrushes(): {
-    brushes: CanvasBrushPreset[];
+declare function useShapeBrushstroke(shape: ShapeDescription | null | undefined, width?: number, height?: number, position?: {
+    x: number;
+    y: number;
+}): CanvasBrushstrokeImage | null;
+/**
+ * The dry paint presets a freehand stroke can be brushed with (loads the paint engine on mount);
+ * with `swatches`, each with a preview image (`renderCanvasBrushSwatch`) for a brush menu.
+ */
+declare function useCanvasBrushes(options?: {
+    swatches?: CanvasBrushSwatchOptions;
+}): {
+    brushes: Array<CanvasBrushPreset & {
+        swatch?: string;
+    }>;
     loading: boolean;
     error: string | null;
 };

package/dist/canvas/index.d.ts

@@ -2,8 +2,8 @@ import * as React$1 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, CanvasCaptureToolProviderOptions, FreehandTool, FreehandStrokeStyle, FreehandStroke, FreehandPenSample, DrawStrokeInput, DrawStrokeResult, CanvasBrushPreset, FreehandDrawOptions, ShapeDescription, CanvasBrushstrokeImage, AutoLayoutMeasure, CanvasTokenOptions, AnimationHistoryTarget, Clock, AnimationLoopMode, AnimatableProperty, CanvasComponentSyncOptions, CanvasComponentsController, DiagramScene, DiagramLayoutOptions, DiagramSceneTheme, MermaidFlowNode, MermaidFlowEdge, DiagramLayout, DiagramSvgOptions, CanvasEffectsController, CanvasShapeEffect, CanvasEffectsControllerOptions, CanvasEffectsToolProviderOptions } 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, BrushedPathShape, 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, CanvasBrush, CanvasBrushPaint, CanvasBrushPaintMapping, CanvasBrushPaintStop, CanvasBrushPreset, CanvasBrushSettings, CanvasBrushstroke, CanvasBrushstrokeImage, 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, DrawStrokeInput, DrawStrokeResult, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, FreehandPenSample, FreehandPointerLike, 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, RenderShapeBrushstrokeOptions, 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, brushstrokeScaleBucket, 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, freehandBrushstroke, getAbsolutePosition, getAnimatableProperty, getAnimatedProperties, getAnimatedValue, getAnimationDuration, getAnimationTrack, getAutoLayout, getAutoLayoutGrid, getAutoLayoutInsertTarget, getBindableTokenProperties, getBrushedShapeSvg, 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, isBrushedShape, isCanvasComponent, isCanvasComponentSet, isCanvasGradient, isCanvasInstance, isCssExportExact, isEventFromTextInput, isKeyframeSelected, isLocked, isMeasureModifierHeld, isNodeAnimated, isShapeDescription, isShapeNode, isStraightCubic, isValidCanvasNode, isValidUrl, layoutAll, layoutBounds, layoutFrame, layoutUp, layoutUpMany, linearPositionTrajectory, linearTrajectory, listCanvasBrushes, listCanvasComponents, loadCanvasBrushstrokeRenderer, 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, pathDataToPolyline, placeBeside, playWebAnimations, pointInBezierPath, pointInMultiPolygon, pointInRings, pointerPenSample, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, profileAlongPolyline, pruneCanvasTokenModes, pushCanvasInstanceOverrides, readAnimatableValue, readNodeStyleProperty, readStyleSize, realClock, recordAnimationChanges, relayoutUpdates, remapPastedNodes, removeCanvasVariant, removeTrack, renameCanvasVariantProperty, renameCanvasVariantValue, renderShapeBrushstroke, 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, validateCanvasBrush, validateCanvasBrushPaint, withNodeAnimation, withStyleSize, wouldCreateComponentCycle, wrapAnimationTime, writeNodeStyleProperty, xToTime, xorPolygons } 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, FreehandPenSample, DrawStrokeInput, DrawStrokeResult, CanvasBrushPreset, FreehandDrawOptions, ShapeDescription, CanvasBrushSwatchOptions, CanvasBrushstrokeImage, AutoLayoutMeasure, CanvasTokenOptions, AnimationHistoryTarget, Clock, AnimationLoopMode, AnimatableProperty, CanvasComponentSyncOptions, CanvasComponentsController, DiagramScene, DiagramLayoutOptions, DiagramSceneTheme, MermaidFlowNode, MermaidFlowEdge, DiagramLayout, DiagramSvgOptions, CanvasEffectsController, CanvasShapeEffect, CanvasEffectsControllerOptions, CanvasEffectsToolProviderOptions } 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, BrushedPathShape, 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, CanvasBrush, CanvasBrushPaint, CanvasBrushPaintMapping, CanvasBrushPaintStop, CanvasBrushPaper, CanvasBrushPreset, CanvasBrushSettings, CanvasBrushSwatchOptions, CanvasBrushstroke, CanvasBrushstrokeImage, 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, DrawStrokeInput, DrawStrokeResult, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, FreehandPenSample, FreehandPointerLike, 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, RenderShapeBrushstrokeOptions, 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, brushstrokeScaleBucket, brushstrokeSeed, 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, freehandBrushstroke, getAbsolutePosition, getAnimatableProperty, getAnimatedProperties, getAnimatedValue, getAnimationDuration, getAnimationTrack, getAutoLayout, getAutoLayoutGrid, getAutoLayoutInsertTarget, getBindableTokenProperties, getBrushedShapeSvg, 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, isBrushedShape, isCanvasComponent, isCanvasComponentSet, isCanvasGradient, isCanvasInstance, isCssExportExact, isEventFromTextInput, isKeyframeSelected, isLocked, isMeasureModifierHeld, isNodeAnimated, isShapeDescription, isShapeNode, isStraightCubic, isValidCanvasNode, isValidUrl, layoutAll, layoutBounds, layoutFrame, layoutUp, layoutUpMany, linearPositionTrajectory, linearTrajectory, listCanvasBrushes, listCanvasComponents, loadCanvasBrushstrokeRenderer, 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, pathDataToPolyline, placeBeside, playWebAnimations, pointInBezierPath, pointInMultiPolygon, pointInRings, pointerPenSample, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, profileAlongPolyline, pruneCanvasTokenModes, pushCanvasInstanceOverrides, readAnimatableValue, readNodeStyleProperty, readStyleSize, realClock, recordAnimationChanges, relayoutUpdates, remapPastedNodes, removeCanvasVariant, removeTrack, renameCanvasVariantProperty, renameCanvasVariantValue, renderCanvasBrushSwatch, renderShapeBrushstroke, 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, validateCanvasBrush, validateCanvasBrushPaint, withNodeAnimation, withStyleSize, wouldCreateComponentCycle, wrapAnimationTime, writeNodeStyleProperty, xToTime, xorPolygons } from '@pixerate/editor/canvas';
 import { EffectProvider } from '@pixerate/editor/effects';
 import { AgentToolProvider, ToolRegistry } from '@pixerate/editor/tools';
 import { TokenState, TokenStore, TokenModeContext } from '@pixerate/editor/tokens';
@@ -441,6 +441,9 @@ interface ShapeNodeProps {
     width?: number;
     height?: number;
     selected?: boolean;
+    /** Absolute canvas position (React Flow passes it): brushed strokes sample the paper grain there. */
+    positionAbsoluteX?: number;
+    positionAbsoluteY?: number;
     className?: string;
     /** Rendered over the shape, e.g. React Flow `<Handle>`s or a label. */
     children?: React__default.ReactNode;
@@ -456,7 +459,7 @@ interface ShapeNodeProps {
  * effect (`shape.effect`) is drawn inside the shape or over it when a `<CanvasEffectsProvider>`
  * gives a provider.
  */
-declare function ShapeNode({ id, data, width, height, selected, className, children }: ShapeNodeProps): React__default.JSX.Element | null;
+declare function ShapeNode({ id, data, width, height, selected, className, children, positionAbsoluteX, positionAbsoluteY }: ShapeNodeProps): React__default.JSX.Element | null;
 
 /** The canvas zoom bucket brushed shape nodes render at (1 without a provider). */
 declare const ShapeNodeZoomContext: React__default.Context<number>;
@@ -472,12 +475,24 @@ declare function ShapeNodeZoomProvider({ zoom, children }: {
 /**
  * The image of a brushed shape (`data.shape.brush`) for a node of `width` × `height`, or null
  * while it renders, for unbrushed shapes, and when the brush cannot render (it then logs why).
- * The paint engine loads on the first brushed shape.
+ * The paint engine loads on the first brushed shape. `position` is the node's absolute canvas
+ * position (React Flow's `positionAbsoluteX` / `positionAbsoluteY`): the paper grain is sampled
+ * there, so neighbouring strokes share one sheet of paper.
  */
-declare function useShapeBrushstroke(shape: ShapeDescription | null | undefined, width?: number, height?: number): CanvasBrushstrokeImage | null;
-/** The dry paint presets a freehand stroke can be brushed with (loads the paint engine on mount). */
-declare function useCanvasBrushes(): {
-    brushes: CanvasBrushPreset[];
+declare function useShapeBrushstroke(shape: ShapeDescription | null | undefined, width?: number, height?: number, position?: {
+    x: number;
+    y: number;
+}): CanvasBrushstrokeImage | null;
+/**
+ * The dry paint presets a freehand stroke can be brushed with (loads the paint engine on mount);
+ * with `swatches`, each with a preview image (`renderCanvasBrushSwatch`) for a brush menu.
+ */
+declare function useCanvasBrushes(options?: {
+    swatches?: CanvasBrushSwatchOptions;
+}): {
+    brushes: Array<CanvasBrushPreset & {
+        swatch?: string;
+    }>;
     loading: boolean;
     error: string | null;
 };

package/dist/canvas/index.js

@@ -1358,6 +1358,7 @@ import {
   brushstrokeScaleBucket,
   isBrushedShape,
   listCanvasBrushes,
+  renderCanvasBrushSwatch,
   renderShapeBrushstroke
 } from "@pixerate/editor/canvas";
 import { jsx as jsx4 } from "react/jsx-runtime";
@@ -1366,13 +1367,16 @@ function ShapeNodeZoomProvider({ zoom, children }) {
   const bucket = brushstrokeScaleBucket(zoom);
   return /* @__PURE__ */ jsx4(ShapeNodeZoomContext.Provider, { value: bucket, children });
 }
-function useShapeBrushstroke(shape, width, height) {
+function useShapeBrushstroke(shape, width, height, position) {
   const zoom = useContext(ShapeNodeZoomContext);
   const brushed = isBrushedShape(shape) ? shape : null;
   const vb = brushed?.viewBox;
   const nodeScale = vb && width && height && vb[2] > 0 && vb[3] > 0 ? Math.max(width / vb[2], height / vb[3]) : 1;
   const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
   const scale = brushstrokeScaleBucket(zoom * nodeScale, dpr);
+  const unit = vb && width && vb[2] > 0 ? width / vb[2] : 1;
+  const ox = Math.round((position?.x ?? 0) - (vb?.[0] ?? 0) * unit);
+  const oy = Math.round((position?.y ?? 0) - (vb?.[1] ?? 0) * unit);
   const [image, setImage] = useState6(null);
   useEffect7(() => {
     if (!brushed) {
@@ -1380,7 +1384,7 @@ function useShapeBrushstroke(shape, width, height) {
       return;
     }
     let live = true;
-    renderShapeBrushstroke(brushed, { scale }).then(
+    renderShapeBrushstroke(brushed, { scale, origin: { x: ox, y: oy }, unit }).then(
       (img) => live && setImage(img),
       (error) => {
         if (!live) return;
@@ -1391,21 +1395,23 @@ function useShapeBrushstroke(shape, width, height) {
     return () => {
       live = false;
     };
-  }, [brushed, scale]);
+  }, [brushed, scale, ox, oy, unit]);
   return image;
 }
-function useCanvasBrushes() {
+function useCanvasBrushes(options = {}) {
   const [state, setState] = useState6({ brushes: [], loading: true, error: null });
+  const swatches = options.swatches ? JSON.stringify(options.swatches) : "";
   useEffect7(() => {
     let live = true;
-    listCanvasBrushes().then(
+    const opts = swatches ? JSON.parse(swatches) : null;
+    listCanvasBrushes().then(async (list) => opts ? Promise.all(list.map(async (b) => ({ ...b, swatch: await renderCanvasBrushSwatch(b.id, opts) }))) : list).then(
       (brushes) => live && setState({ brushes, loading: false, error: null }),
       (error) => live && setState({ brushes: [], loading: false, error: error instanceof Error ? error.message : String(error) })
     );
     return () => {
       live = false;
     };
-  }, []);
+  }, [swatches]);
   return useMemo6(() => state, [state]);
 }
 
@@ -1556,9 +1562,9 @@ function CanvasEffectsPanel({ controller, nodeId, shape, sceneId, className = ""
 
 // src/canvas/ShapeNode.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-function ShapeNode({ id, data, width, height, selected, className = "", children }) {
+function ShapeNode({ id, data, width, height, selected, className = "", children, positionAbsoluteX, positionAbsoluteY }) {
   const shape = data?.shape;
-  const brushImage = useShapeBrushstroke(isShapeDescription2(shape) ? shape : null, width, height);
+  const brushImage = useShapeBrushstroke(isShapeDescription2(shape) ? shape : null, width, height, { x: positionAbsoluteX ?? 0, y: positionAbsoluteY ?? 0 });
   if (!isShapeDescription2(shape)) return null;
   const render = getShapeRenderData(shape, { width, height }, { id: id || data?.id });
   return /* @__PURE__ */ jsxs5(
@@ -2796,6 +2802,8 @@ import {
   validateCanvasBrushPaint,
   renderShapeBrushstroke as renderShapeBrushstroke2,
   getBrushedShapeSvg,
+  renderCanvasBrushSwatch as renderCanvasBrushSwatch2,
+  brushstrokeSeed,
   loadCanvasBrushstrokeRenderer,
   brushstrokeScaleBucket as brushstrokeScaleBucket2,
   pathDataToPolyline,
@@ -3228,6 +3236,7 @@ export {
   blendLayout,
   boundsOf,
   brushstrokeScaleBucket2 as brushstrokeScaleBucket,
+  brushstrokeSeed,
   calculateDagreReflowDisplacement,
   calculateDirectionalDisplacement2 as calculateDirectionalDisplacement,
   canCombineShapeNodes,
@@ -3432,6 +3441,7 @@ export {
   removeTrack,
   renameCanvasVariantProperty,
   renameCanvasVariantValue,
+  renderCanvasBrushSwatch2 as renderCanvasBrushSwatch,
   renderShapeBrushstroke2 as renderShapeBrushstroke,
   reorderNodes,
   repositionNodesTo,