@pixerate/editor-react 0.76.0 → 0.77.0

package/dist/canvas/index.cjs

@@ -20,323 +20,336 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/canvas/index.ts
 var canvas_exports = {};
 __export(canvas_exports, {
-  ANIMATABLE_PROPERTIES: () => import_canvas31.ANIMATABLE_PROPERTIES,
-  ANIMATION_DATA_KEY: () => import_canvas31.ANIMATION_DATA_KEY,
-  ANIMATION_EASING_LABELS: () => import_canvas31.ANIMATION_EASING_LABELS,
-  ANIMATION_EASING_PRESETS: () => import_canvas31.ANIMATION_EASING_PRESETS,
-  ANIMATION_TIME_EPSILON: () => import_canvas31.ANIMATION_TIME_EPSILON,
-  AUTO_LAYOUT_DATA_KEY: () => import_canvas29.AUTO_LAYOUT_DATA_KEY,
+  ANIMATABLE_PROPERTIES: () => import_canvas32.ANIMATABLE_PROPERTIES,
+  ANIMATION_DATA_KEY: () => import_canvas32.ANIMATION_DATA_KEY,
+  ANIMATION_EASING_LABELS: () => import_canvas32.ANIMATION_EASING_LABELS,
+  ANIMATION_EASING_PRESETS: () => import_canvas32.ANIMATION_EASING_PRESETS,
+  ANIMATION_TIME_EPSILON: () => import_canvas32.ANIMATION_TIME_EPSILON,
+  AUTO_LAYOUT_DATA_KEY: () => import_canvas30.AUTO_LAYOUT_DATA_KEY,
   AgentPresenceLayer: () => AgentPresenceLayer,
-  AnimationEditError: () => import_canvas31.AnimationEditError,
-  AnimationPlayer: () => import_canvas31.AnimationPlayer,
+  AnimationEditError: () => import_canvas32.AnimationEditError,
+  AnimationPlayer: () => import_canvas32.AnimationPlayer,
   AnimationTimeline: () => AnimationTimeline,
-  CANVAS_COMPONENT_DRAG_TYPE: () => import_canvas32.CANVAS_COMPONENT_DRAG_TYPE,
-  CANVAS_GRADIENT_PRESETS: () => import_canvas32.CANVAS_GRADIENT_PRESETS,
-  CANVAS_TOKEN_PROPERTIES: () => import_canvas30.CANVAS_TOKEN_PROPERTIES,
-  CHILD_LAYOUT_DATA_KEY: () => import_canvas29.CHILD_LAYOUT_DATA_KEY,
-  CONNECTION_LINE_TYPES: () => import_canvas25.CONNECTION_LINE_TYPES,
-  CSS_ANIMATION_PROPERTIES: () => import_canvas31.CSS_ANIMATION_PROPERTIES,
-  CUBIC_BEZIER_PRESETS: () => import_canvas31.CUBIC_BEZIER_PRESETS,
+  CANVAS_COMPONENT_DRAG_TYPE: () => import_canvas33.CANVAS_COMPONENT_DRAG_TYPE,
+  CANVAS_GRADIENT_PRESETS: () => import_canvas33.CANVAS_GRADIENT_PRESETS,
+  CANVAS_TOKEN_PROPERTIES: () => import_canvas31.CANVAS_TOKEN_PROPERTIES,
+  CHILD_LAYOUT_DATA_KEY: () => import_canvas30.CHILD_LAYOUT_DATA_KEY,
+  CONNECTION_LINE_TYPES: () => import_canvas26.CONNECTION_LINE_TYPES,
+  CSS_ANIMATION_PROPERTIES: () => import_canvas32.CSS_ANIMATION_PROPERTIES,
+  CUBIC_BEZIER_PRESETS: () => import_canvas32.CUBIC_BEZIER_PRESETS,
   CanvasComponentsPanel: () => CanvasComponentsPanel,
   CanvasDrawLayer: () => CanvasDrawLayer,
   CanvasGuidesLayer: () => CanvasGuidesLayer,
   CanvasInstanceInspector: () => CanvasInstanceInspector,
-  CanvasScenesStore: () => import_canvas25.CanvasScenesStore,
-  DEFAULT_ARRANGE_SHORTCUTS: () => import_canvas25.DEFAULT_ARRANGE_SHORTCUTS,
+  CanvasScenesStore: () => import_canvas26.CanvasScenesStore,
+  DEFAULT_ARRANGE_SHORTCUTS: () => import_canvas26.DEFAULT_ARRANGE_SHORTCUTS,
   DiagramPresenceLayer: () => DiagramPresenceLayer,
-  MAX_KEYFRAME_REFS: () => import_canvas31.MAX_KEYFRAME_REFS,
-  ManualClock: () => import_canvas28.ManualClock,
+  MAX_KEYFRAME_REFS: () => import_canvas32.MAX_KEYFRAME_REFS,
+  ManualClock: () => import_canvas29.ManualClock,
   MermaidDiagramGroup: () => MermaidDiagramGroup,
   MermaidDiagramNode: () => MermaidDiagramNode,
   MermaidFamilyScene: () => MermaidFamilyScene,
   MermaidThumbnail: () => MermaidThumbnail,
-  RESIZE_HANDLES: () => import_canvas24.RESIZE_HANDLES,
-  SHAPE_DATA_KEY: () => import_canvas26.SHAPE_DATA_KEY,
-  SHAPE_KINDS: () => import_canvas26.SHAPE_KINDS,
-  SHAPE_NODE_TYPE: () => import_canvas26.SHAPE_NODE_TYPE,
-  SHAPE_OPERATIONS: () => import_canvas26.SHAPE_OPERATIONS,
+  RESIZE_HANDLES: () => import_canvas25.RESIZE_HANDLES,
+  SHAPE_DATA_KEY: () => import_canvas27.SHAPE_DATA_KEY,
+  SHAPE_KINDS: () => import_canvas27.SHAPE_KINDS,
+  SHAPE_NODE_TYPE: () => import_canvas27.SHAPE_NODE_TYPE,
+  SHAPE_OPERATIONS: () => import_canvas27.SHAPE_OPERATIONS,
   ShapeNode: () => ShapeNode,
-  TOKEN_BINDINGS_DATA_KEY: () => import_canvas30.TOKEN_BINDINGS_DATA_KEY,
-  TOKEN_MODES_DATA_KEY: () => import_canvas30.TOKEN_MODES_DATA_KEY,
+  ShapeNodeZoomContext: () => ShapeNodeZoomContext,
+  ShapeNodeZoomProvider: () => ShapeNodeZoomProvider,
+  TOKEN_BINDINGS_DATA_KEY: () => import_canvas31.TOKEN_BINDINGS_DATA_KEY,
+  TOKEN_MODES_DATA_KEY: () => import_canvas31.TOKEN_MODES_DATA_KEY,
   TokenBindingPicker: () => TokenBindingPicker,
   TokenModeSwitcher: () => TokenModeSwitcher,
-  addCanvasVariant: () => import_canvas32.addCanvasVariant,
-  addKeyframesAtTime: () => import_canvas31.addKeyframesAtTime,
-  alignNodes: () => import_canvas25.alignNodes,
-  angleToSvgLinearCoords: () => import_canvas32.angleToSvgLinearCoords,
-  animateNode: () => import_canvas31.animateNode,
-  applyAnimation: () => import_canvas31.applyAnimation,
-  applyAnimationOverrides: () => import_canvas31.applyAnimationOverrides,
-  applyConstraints: () => import_canvas29.applyConstraints,
-  applyNodeUpdates: () => import_canvas25.applyNodeUpdates,
-  applyShapeCombination: () => import_canvas26.applyShapeCombination,
-  applyShapeReplacement: () => import_canvas27.applyShapeReplacement,
-  bezierPathArea: () => import_canvas27.bezierPathArea,
-  bezierPathBounds: () => import_canvas27.bezierPathBounds,
-  bezierPathLength: () => import_canvas27.bezierPathLength,
-  bezierPathPointAtLength: () => import_canvas27.bezierPathPointAtLength,
-  bezierPathSignedArea: () => import_canvas27.bezierPathSignedArea,
-  bezierPathToSvg: () => import_canvas27.bezierPathToSvg,
-  bindCanvasComponentProperty: () => import_canvas32.bindCanvasComponentProperty,
-  bindCanvasToken: () => import_canvas30.bindCanvasToken,
-  blendLayout: () => import_canvas28.blendLayout,
-  boundsOf: () => import_canvas28.boundsOf,
-  calculateDagreReflowDisplacement: () => import_canvas28.calculateDagreReflowDisplacement,
-  calculateDirectionalDisplacement: () => import_canvas28.calculateDirectionalDisplacement,
-  canCombineShapeNodes: () => import_canvas26.canCombineShapeNodes,
-  canOffsetShapeNodes: () => import_canvas27.canOffsetShapeNodes,
-  canOutlineShapeNodeStrokes: () => import_canvas27.canOutlineShapeNodeStrokes,
-  canvasHeight: () => import_canvas28.canvasHeight,
-  centerNodes: () => import_canvas28.centerNodes,
-  centre: () => import_canvas28.centre,
-  clampAnimationValue: () => import_canvas31.clampAnimationValue,
-  clampLayoutSize: () => import_canvas29.clampLayoutSize,
-  combineCanvasComponentsAsVariants: () => import_canvas32.combineCanvasComponentsAsVariants,
-  combineShapeNodes: () => import_canvas26.combineShapeNodes,
-  computeNodesBoundingBox: () => import_canvas28.computeNodesBoundingBox,
-  computeSnapGuides: () => import_canvas25.computeSnapGuides,
-  connectedOnly: () => import_canvas28.connectedOnly,
-  copyKeyframes: () => import_canvas31.copyKeyframes,
-  countPathSegments: () => import_canvas27.countPathSegments,
-  createAnimationPlayer: () => import_canvas31.createAnimationPlayer,
-  createBezierTrajectory: () => import_canvas28.createBezierTrajectory,
-  createCanvasAnimationController: () => import_canvas31.createCanvasAnimationController,
-  createCanvasAutoLayoutController: () => import_canvas29.createCanvasAutoLayoutController,
-  createCanvasComponent: () => import_canvas32.createCanvasComponent,
-  createCanvasComponentsController: () => import_canvas32.createCanvasComponentsController,
-  createCanvasDrawController: () => import_canvas32.createCanvasDrawController,
-  createCanvasInstance: () => import_canvas32.createCanvasInstance,
-  createCanvasScenesStore: () => import_canvas25.createCanvasScenesStore,
-  createDefaultStrokeStyle: () => import_canvas32.createDefaultStrokeStyle,
-  createFanOutTrajectory: () => import_canvas28.createFanOutTrajectory,
-  createGuideIndex: () => import_canvas25.createGuideIndex,
-  createNodeGuideIndex: () => import_canvas25.createNodeGuideIndex,
-  cubicBezierAt: () => import_canvas31.cubicBezierAt,
-  cubicPointAt: () => import_canvas24.cubicPointAt,
-  cubicsToPathData: () => import_canvas24.cubicsToPathData,
-  dashContours: () => import_canvas27.dashContours,
-  defaultEasing: () => import_canvas28.defaultEasing,
-  deleteKeyframes: () => import_canvas31.deleteKeyframes,
-  detachCanvasInstance: () => import_canvas32.detachCanvasInstance,
-  detachTokenBindings: () => import_canvas30.detachTokenBindings,
-  distanceToBezierPath: () => import_canvas27.distanceToBezierPath,
-  distributeNodes: () => import_canvas25.distributeNodes,
-  dividePaths: () => import_canvas27.dividePaths,
-  dividePolygons: () => import_canvas26.dividePolygons,
-  easingFromInfluence: () => import_canvas31.easingFromInfluence,
-  easingLabel: () => import_canvas31.easingLabel,
-  easingToCss: () => import_canvas31.easingToCss,
-  ensureLayout: () => import_canvas28.ensureLayout,
-  estimateCanvasHeight: () => import_canvas28.estimateCanvasHeight,
-  estimateNodeSize: () => import_canvas28.estimateNodeSize,
-  evaluateAnimation: () => import_canvas31.evaluateAnimation,
-  evaluateEasing: () => import_canvas31.evaluateEasing,
-  evaluateTrack: () => import_canvas31.evaluateTrack,
-  excludePaths: () => import_canvas27.excludePaths,
-  exportCssAnimation: () => import_canvas31.exportCssAnimation,
-  findConnectorSnap: () => import_canvas25.findConnectorSnap,
-  findStrokesAtPoint: () => import_canvas32.findStrokesAtPoint,
-  fitCubicRun: () => import_canvas24.fitCubicRun,
-  fitCubics: () => import_canvas24.fitCubics,
-  fitFreehandPath: () => import_canvas24.fitFreehandPath,
-  fitPathData: () => import_canvas24.fitPathData,
-  fitViewportToNodes: () => import_canvas25.fitViewportToNodes,
-  fitViewportToRect: () => import_canvas25.fitViewportToRect,
-  flattenSvgPath: () => import_canvas26.flattenSvgPath,
-  flowSide: () => import_canvas28.flowSide,
-  formatAnimationTime: () => import_canvas31.formatAnimationTime,
-  formatOklab: () => import_canvas31.formatOklab,
-  getAbsolutePosition: () => import_canvas25.getAbsolutePosition,
-  getAnimatableProperty: () => import_canvas31.getAnimatableProperty,
-  getAnimatedProperties: () => import_canvas31.getAnimatedProperties,
-  getAnimatedValue: () => import_canvas31.getAnimatedValue,
-  getAnimationDuration: () => import_canvas31.getAnimationDuration,
-  getAnimationTrack: () => import_canvas31.getAnimationTrack,
-  getAutoLayout: () => import_canvas29.getAutoLayout,
-  getAutoLayoutGrid: () => import_canvas29.getAutoLayoutGrid,
-  getAutoLayoutInsertTarget: () => import_canvas29.getAutoLayoutInsertTarget,
-  getBindableTokenProperties: () => import_canvas30.getBindableTokenProperties,
-  getCanvasComponentDragId: () => import_canvas32.getCanvasComponentDragId,
-  getCanvasTokenProperty: () => import_canvas30.getCanvasTokenProperty,
-  getCenteredNodePosition: () => import_canvas28.getCenteredNodePosition,
-  getChildLayout: () => import_canvas29.getChildLayout,
-  getComponentSourceId: () => import_canvas32.getComponentSourceId,
-  getCssPropertyAnimations: () => import_canvas31.getCssPropertyAnimations,
-  getEffectiveTokenModes: () => import_canvas30.getEffectiveTokenModes,
-  getFlowChildren: () => import_canvas29.getFlowChildren,
-  getInstanceData: () => import_canvas32.getInstanceData,
-  getInstanceStatus: () => import_canvas32.getInstanceStatus,
-  getKeyframeTimes: () => import_canvas31.getKeyframeTimes,
-  getLayoutParent: () => import_canvas29.getLayoutParent,
-  getLayoutSizing: () => import_canvas29.getLayoutSizing,
-  getLayoutedNodes: () => import_canvas28.getLayoutedNodes,
-  getNextVariantValues: () => import_canvas32.getNextVariantValues,
-  getNodeAnimation: () => import_canvas31.getNodeAnimation,
-  getNodeOverrides: () => import_canvas32.getNodeOverrides,
-  getNodeRect: () => import_canvas25.getNodeRect,
-  getNodeShape: () => import_canvas26.getNodeShape,
-  getNodeSize: () => import_canvas25.getNodeSize,
-  getNodeTokenBindings: () => import_canvas30.getNodeTokenBindings,
-  getNodeTokenModes: () => import_canvas30.getNodeTokenModes,
-  getResizingNodeRect: () => import_canvas24.getResizingNodeRect,
-  getShapeRenderData: () => import_canvas26.getShapeRenderData,
-  getShapeSvg: () => import_canvas26.getShapeSvg,
-  getTimelineRows: () => import_canvas31.getTimelineRows,
-  getTimelineTicks: () => import_canvas31.getTimelineTicks,
-  getTokenPropertyScope: () => import_canvas30.getTokenPropertyScope,
-  getTokensForProperty: () => import_canvas30.getTokensForProperty,
-  gradientToSvgDef: () => import_canvas32.gradientToSvgDef,
-  handlePoint: () => import_canvas25.handlePoint,
-  hasVisibleStroke: () => import_canvas27.hasVisibleStroke,
-  inferResizeHandle: () => import_canvas24.inferResizeHandle,
-  inspectCanvasInstance: () => import_canvas32.inspectCanvasInstance,
-  inspectNodeTokens: () => import_canvas30.inspectNodeTokens,
-  interpolateAnimationValue: () => import_canvas31.interpolateAnimationValue,
-  intersectPaths: () => import_canvas27.intersectPaths,
-  intersectPolygons: () => import_canvas26.intersectPolygons,
-  invertNodeUpdates: () => import_canvas25.invertNodeUpdates,
-  isAnimationEasing: () => import_canvas31.isAnimationEasing,
-  isAnimationKeyframe: () => import_canvas31.isAnimationKeyframe,
-  isAutoLayoutFrame: () => import_canvas29.isAutoLayoutFrame,
-  isCanvasComponent: () => import_canvas32.isCanvasComponent,
-  isCanvasComponentSet: () => import_canvas32.isCanvasComponentSet,
-  isCanvasGradient: () => import_canvas32.isCanvasGradient,
-  isCanvasInstance: () => import_canvas32.isCanvasInstance,
-  isCssExportExact: () => import_canvas31.isCssExportExact,
-  isEventFromTextInput: () => import_canvas28.isEventFromTextInput,
-  isKeyframeSelected: () => import_canvas31.isKeyframeSelected,
-  isLocked: () => import_canvas25.isLocked,
-  isMeasureModifierHeld: () => import_canvas24.isMeasureModifierHeld,
-  isNodeAnimated: () => import_canvas31.isNodeAnimated,
-  isShapeDescription: () => import_canvas26.isShapeDescription,
-  isShapeNode: () => import_canvas26.isShapeNode,
-  isStraightCubic: () => import_canvas24.isStraightCubic,
-  isValidCanvasNode: () => import_canvas28.isValidCanvasNode,
-  isValidUrl: () => import_canvas28.isValidUrl,
-  layoutAll: () => import_canvas29.layoutAll,
-  layoutBounds: () => import_canvas28.layoutBounds,
-  layoutFrame: () => import_canvas29.layoutFrame,
-  layoutUp: () => import_canvas29.layoutUp,
-  layoutUpMany: () => import_canvas29.layoutUpMany,
-  linearPositionTrajectory: () => import_canvas28.linearPositionTrajectory,
-  linearTrajectory: () => import_canvas28.linearTrajectory,
-  listCanvasComponents: () => import_canvas32.listCanvasComponents,
-  lockNodes: () => import_canvas25.lockNodes,
-  makeSizingCoherent: () => import_canvas29.makeSizingCoherent,
-  matchArrangeShortcut: () => import_canvas25.matchArrangeShortcut,
-  matchSize: () => import_canvas25.matchSize,
-  measureBetween: () => import_canvas24.measureBetween,
-  measureLabel: () => import_canvas24.measureLabel,
-  measureSelection: () => import_canvas24.measureSelection,
-  measureToLine: () => import_canvas24.measureToLine,
-  mergeNodeUpdates: () => import_canvas29.mergeNodeUpdates,
+  addCanvasVariant: () => import_canvas33.addCanvasVariant,
+  addKeyframesAtTime: () => import_canvas32.addKeyframesAtTime,
+  alignNodes: () => import_canvas26.alignNodes,
+  angleToSvgLinearCoords: () => import_canvas33.angleToSvgLinearCoords,
+  animateNode: () => import_canvas32.animateNode,
+  applyAnimation: () => import_canvas32.applyAnimation,
+  applyAnimationOverrides: () => import_canvas32.applyAnimationOverrides,
+  applyConstraints: () => import_canvas30.applyConstraints,
+  applyNodeUpdates: () => import_canvas26.applyNodeUpdates,
+  applyShapeCombination: () => import_canvas27.applyShapeCombination,
+  applyShapeReplacement: () => import_canvas28.applyShapeReplacement,
+  bezierPathArea: () => import_canvas28.bezierPathArea,
+  bezierPathBounds: () => import_canvas28.bezierPathBounds,
+  bezierPathLength: () => import_canvas28.bezierPathLength,
+  bezierPathPointAtLength: () => import_canvas28.bezierPathPointAtLength,
+  bezierPathSignedArea: () => import_canvas28.bezierPathSignedArea,
+  bezierPathToSvg: () => import_canvas28.bezierPathToSvg,
+  bindCanvasComponentProperty: () => import_canvas33.bindCanvasComponentProperty,
+  bindCanvasToken: () => import_canvas31.bindCanvasToken,
+  blendLayout: () => import_canvas29.blendLayout,
+  boundsOf: () => import_canvas29.boundsOf,
+  brushstrokeScaleBucket: () => import_canvas33.brushstrokeScaleBucket,
+  calculateDagreReflowDisplacement: () => import_canvas29.calculateDagreReflowDisplacement,
+  calculateDirectionalDisplacement: () => import_canvas29.calculateDirectionalDisplacement,
+  canCombineShapeNodes: () => import_canvas27.canCombineShapeNodes,
+  canOffsetShapeNodes: () => import_canvas28.canOffsetShapeNodes,
+  canOutlineShapeNodeStrokes: () => import_canvas28.canOutlineShapeNodeStrokes,
+  canvasHeight: () => import_canvas29.canvasHeight,
+  centerNodes: () => import_canvas29.centerNodes,
+  centre: () => import_canvas29.centre,
+  clampAnimationValue: () => import_canvas32.clampAnimationValue,
+  clampLayoutSize: () => import_canvas30.clampLayoutSize,
+  combineCanvasComponentsAsVariants: () => import_canvas33.combineCanvasComponentsAsVariants,
+  combineShapeNodes: () => import_canvas27.combineShapeNodes,
+  computeNodesBoundingBox: () => import_canvas29.computeNodesBoundingBox,
+  computeSnapGuides: () => import_canvas26.computeSnapGuides,
+  connectedOnly: () => import_canvas29.connectedOnly,
+  copyKeyframes: () => import_canvas32.copyKeyframes,
+  countPathSegments: () => import_canvas28.countPathSegments,
+  createAnimationPlayer: () => import_canvas32.createAnimationPlayer,
+  createBezierTrajectory: () => import_canvas29.createBezierTrajectory,
+  createCanvasAnimationController: () => import_canvas32.createCanvasAnimationController,
+  createCanvasAutoLayoutController: () => import_canvas30.createCanvasAutoLayoutController,
+  createCanvasComponent: () => import_canvas33.createCanvasComponent,
+  createCanvasComponentsController: () => import_canvas33.createCanvasComponentsController,
+  createCanvasDrawController: () => import_canvas33.createCanvasDrawController,
+  createCanvasInstance: () => import_canvas33.createCanvasInstance,
+  createCanvasScenesStore: () => import_canvas26.createCanvasScenesStore,
+  createDefaultStrokeStyle: () => import_canvas33.createDefaultStrokeStyle,
+  createFanOutTrajectory: () => import_canvas29.createFanOutTrajectory,
+  createGuideIndex: () => import_canvas26.createGuideIndex,
+  createNodeGuideIndex: () => import_canvas26.createNodeGuideIndex,
+  cubicBezierAt: () => import_canvas32.cubicBezierAt,
+  cubicPointAt: () => import_canvas25.cubicPointAt,
+  cubicsToPathData: () => import_canvas25.cubicsToPathData,
+  dashContours: () => import_canvas28.dashContours,
+  defaultEasing: () => import_canvas29.defaultEasing,
+  deleteKeyframes: () => import_canvas32.deleteKeyframes,
+  detachCanvasInstance: () => import_canvas33.detachCanvasInstance,
+  detachTokenBindings: () => import_canvas31.detachTokenBindings,
+  distanceToBezierPath: () => import_canvas28.distanceToBezierPath,
+  distributeNodes: () => import_canvas26.distributeNodes,
+  dividePaths: () => import_canvas28.dividePaths,
+  dividePolygons: () => import_canvas27.dividePolygons,
+  easingFromInfluence: () => import_canvas32.easingFromInfluence,
+  easingLabel: () => import_canvas32.easingLabel,
+  easingToCss: () => import_canvas32.easingToCss,
+  ensureLayout: () => import_canvas29.ensureLayout,
+  estimateCanvasHeight: () => import_canvas29.estimateCanvasHeight,
+  estimateNodeSize: () => import_canvas29.estimateNodeSize,
+  evaluateAnimation: () => import_canvas32.evaluateAnimation,
+  evaluateEasing: () => import_canvas32.evaluateEasing,
+  evaluateTrack: () => import_canvas32.evaluateTrack,
+  excludePaths: () => import_canvas28.excludePaths,
+  exportCssAnimation: () => import_canvas32.exportCssAnimation,
+  findConnectorSnap: () => import_canvas26.findConnectorSnap,
+  findStrokesAtPoint: () => import_canvas33.findStrokesAtPoint,
+  fitCubicRun: () => import_canvas25.fitCubicRun,
+  fitCubics: () => import_canvas25.fitCubics,
+  fitFreehandPath: () => import_canvas25.fitFreehandPath,
+  fitPathData: () => import_canvas25.fitPathData,
+  fitViewportToNodes: () => import_canvas26.fitViewportToNodes,
+  fitViewportToRect: () => import_canvas26.fitViewportToRect,
+  flattenSvgPath: () => import_canvas27.flattenSvgPath,
+  flowSide: () => import_canvas29.flowSide,
+  formatAnimationTime: () => import_canvas32.formatAnimationTime,
+  formatOklab: () => import_canvas32.formatOklab,
+  freehandBrushstroke: () => import_canvas33.freehandBrushstroke,
+  getAbsolutePosition: () => import_canvas26.getAbsolutePosition,
+  getAnimatableProperty: () => import_canvas32.getAnimatableProperty,
+  getAnimatedProperties: () => import_canvas32.getAnimatedProperties,
+  getAnimatedValue: () => import_canvas32.getAnimatedValue,
+  getAnimationDuration: () => import_canvas32.getAnimationDuration,
+  getAnimationTrack: () => import_canvas32.getAnimationTrack,
+  getAutoLayout: () => import_canvas30.getAutoLayout,
+  getAutoLayoutGrid: () => import_canvas30.getAutoLayoutGrid,
+  getAutoLayoutInsertTarget: () => import_canvas30.getAutoLayoutInsertTarget,
+  getBindableTokenProperties: () => import_canvas31.getBindableTokenProperties,
+  getBrushedShapeSvg: () => import_canvas33.getBrushedShapeSvg,
+  getCanvasComponentDragId: () => import_canvas33.getCanvasComponentDragId,
+  getCanvasTokenProperty: () => import_canvas31.getCanvasTokenProperty,
+  getCenteredNodePosition: () => import_canvas29.getCenteredNodePosition,
+  getChildLayout: () => import_canvas30.getChildLayout,
+  getComponentSourceId: () => import_canvas33.getComponentSourceId,
+  getCssPropertyAnimations: () => import_canvas32.getCssPropertyAnimations,
+  getEffectiveTokenModes: () => import_canvas31.getEffectiveTokenModes,
+  getFlowChildren: () => import_canvas30.getFlowChildren,
+  getInstanceData: () => import_canvas33.getInstanceData,
+  getInstanceStatus: () => import_canvas33.getInstanceStatus,
+  getKeyframeTimes: () => import_canvas32.getKeyframeTimes,
+  getLayoutParent: () => import_canvas30.getLayoutParent,
+  getLayoutSizing: () => import_canvas30.getLayoutSizing,
+  getLayoutedNodes: () => import_canvas29.getLayoutedNodes,
+  getNextVariantValues: () => import_canvas33.getNextVariantValues,
+  getNodeAnimation: () => import_canvas32.getNodeAnimation,
+  getNodeOverrides: () => import_canvas33.getNodeOverrides,
+  getNodeRect: () => import_canvas26.getNodeRect,
+  getNodeShape: () => import_canvas27.getNodeShape,
+  getNodeSize: () => import_canvas26.getNodeSize,
+  getNodeTokenBindings: () => import_canvas31.getNodeTokenBindings,
+  getNodeTokenModes: () => import_canvas31.getNodeTokenModes,
+  getResizingNodeRect: () => import_canvas25.getResizingNodeRect,
+  getShapeRenderData: () => import_canvas27.getShapeRenderData,
+  getShapeSvg: () => import_canvas27.getShapeSvg,
+  getTimelineRows: () => import_canvas32.getTimelineRows,
+  getTimelineTicks: () => import_canvas32.getTimelineTicks,
+  getTokenPropertyScope: () => import_canvas31.getTokenPropertyScope,
+  getTokensForProperty: () => import_canvas31.getTokensForProperty,
+  gradientToSvgDef: () => import_canvas33.gradientToSvgDef,
+  handlePoint: () => import_canvas26.handlePoint,
+  hasVisibleStroke: () => import_canvas28.hasVisibleStroke,
+  inferResizeHandle: () => import_canvas25.inferResizeHandle,
+  inspectCanvasInstance: () => import_canvas33.inspectCanvasInstance,
+  inspectNodeTokens: () => import_canvas31.inspectNodeTokens,
+  interpolateAnimationValue: () => import_canvas32.interpolateAnimationValue,
+  intersectPaths: () => import_canvas28.intersectPaths,
+  intersectPolygons: () => import_canvas27.intersectPolygons,
+  invertNodeUpdates: () => import_canvas26.invertNodeUpdates,
+  isAnimationEasing: () => import_canvas32.isAnimationEasing,
+  isAnimationKeyframe: () => import_canvas32.isAnimationKeyframe,
+  isAutoLayoutFrame: () => import_canvas30.isAutoLayoutFrame,
+  isBrushedShape: () => import_canvas33.isBrushedShape,
+  isCanvasComponent: () => import_canvas33.isCanvasComponent,
+  isCanvasComponentSet: () => import_canvas33.isCanvasComponentSet,
+  isCanvasGradient: () => import_canvas33.isCanvasGradient,
+  isCanvasInstance: () => import_canvas33.isCanvasInstance,
+  isCssExportExact: () => import_canvas32.isCssExportExact,
+  isEventFromTextInput: () => import_canvas29.isEventFromTextInput,
+  isKeyframeSelected: () => import_canvas32.isKeyframeSelected,
+  isLocked: () => import_canvas26.isLocked,
+  isMeasureModifierHeld: () => import_canvas25.isMeasureModifierHeld,
+  isNodeAnimated: () => import_canvas32.isNodeAnimated,
+  isShapeDescription: () => import_canvas27.isShapeDescription,
+  isShapeNode: () => import_canvas27.isShapeNode,
+  isStraightCubic: () => import_canvas25.isStraightCubic,
+  isValidCanvasNode: () => import_canvas29.isValidCanvasNode,
+  isValidUrl: () => import_canvas29.isValidUrl,
+  layoutAll: () => import_canvas30.layoutAll,
+  layoutBounds: () => import_canvas29.layoutBounds,
+  layoutFrame: () => import_canvas30.layoutFrame,
+  layoutUp: () => import_canvas30.layoutUp,
+  layoutUpMany: () => import_canvas30.layoutUpMany,
+  linearPositionTrajectory: () => import_canvas29.linearPositionTrajectory,
+  linearTrajectory: () => import_canvas29.linearTrajectory,
+  listCanvasBrushes: () => import_canvas33.listCanvasBrushes,
+  listCanvasComponents: () => import_canvas33.listCanvasComponents,
+  loadCanvasBrushstrokeRenderer: () => import_canvas33.loadCanvasBrushstrokeRenderer,
+  lockNodes: () => import_canvas26.lockNodes,
+  makeSizingCoherent: () => import_canvas30.makeSizingCoherent,
+  matchArrangeShortcut: () => import_canvas26.matchArrangeShortcut,
+  matchSize: () => import_canvas26.matchSize,
+  measureBetween: () => import_canvas25.measureBetween,
+  measureLabel: () => import_canvas25.measureLabel,
+  measureSelection: () => import_canvas25.measureSelection,
+  measureToLine: () => import_canvas25.measureToLine,
+  mergeNodeUpdates: () => import_canvas30.mergeNodeUpdates,
   mermaidNodeStyle: () => mermaidNodeStyle,
-  mixColorsOklab: () => import_canvas31.mixColorsOklab,
-  moveKeyframes: () => import_canvas31.moveKeyframes,
-  moveLayoutChild: () => import_canvas29.moveLayoutChild,
-  multiPolygonArea: () => import_canvas26.multiPolygonArea,
-  multiPolygonBounds: () => import_canvas26.multiPolygonBounds,
-  nearestHandlePositions: () => import_canvas25.nearestHandlePositions,
-  normalizeBezierPath: () => import_canvas27.normalizeBezierPath,
-  normalizeKeyframes: () => import_canvas31.normalizeKeyframes,
-  offsetPath: () => import_canvas27.offsetPath,
-  offsetShapeNodes: () => import_canvas27.offsetShapeNodes,
-  oklabToRgb: () => import_canvas31.oklabToRgb,
-  oppositePosition: () => import_canvas25.oppositePosition,
-  outlineShapeNodeStrokes: () => import_canvas27.outlineShapeNodeStrokes,
-  outlineStroke: () => import_canvas27.outlineStroke,
-  overlaps: () => import_canvas28.overlaps,
-  parseCanvasClipboardData: () => import_canvas28.parseCanvasClipboardData,
-  parseCanvasScenes: () => import_canvas25.parseCanvasScenes,
-  parseCssEasing: () => import_canvas31.parseCssEasing,
-  parseCssGradient: () => import_canvas32.parseCssGradient,
-  parseKeyframeClipboard: () => import_canvas31.parseKeyframeClipboard,
-  parseOklab: () => import_canvas31.parseOklab,
-  parseSvgPath: () => import_canvas26.parseSvgPath,
-  pasteKeyframes: () => import_canvas31.pasteKeyframes,
-  pathBoolean: () => import_canvas27.pathBoolean,
-  placeBeside: () => import_canvas28.placeBeside,
-  playWebAnimations: () => import_canvas31.playWebAnimations,
-  pointInBezierPath: () => import_canvas27.pointInBezierPath,
-  pointInMultiPolygon: () => import_canvas26.pointInMultiPolygon,
-  pointInRings: () => import_canvas26.pointInRings,
-  polygonArea: () => import_canvas26.polygonArea,
-  polygonBoolean: () => import_canvas26.polygonBoolean,
-  polygonToSvgPath: () => import_canvas26.polygonToSvgPath,
-  positionToSide: () => import_canvas25.positionToSide,
-  pruneCanvasTokenModes: () => import_canvas30.pruneCanvasTokenModes,
-  pushCanvasInstanceOverrides: () => import_canvas32.pushCanvasInstanceOverrides,
-  readAnimatableValue: () => import_canvas31.readAnimatableValue,
-  readNodeStyleProperty: () => import_canvas30.readNodeStyleProperty,
-  readStyleSize: () => import_canvas25.readStyleSize,
-  realClock: () => import_canvas28.realClock,
-  recordAnimationChanges: () => import_canvas31.recordAnimationChanges,
-  relayoutUpdates: () => import_canvas29.relayoutUpdates,
-  remapPastedNodes: () => import_canvas28.remapPastedNodes,
-  removeCanvasVariant: () => import_canvas32.removeCanvasVariant,
-  removeTrack: () => import_canvas31.removeTrack,
-  renameCanvasVariantProperty: () => import_canvas32.renameCanvasVariantProperty,
-  renameCanvasVariantValue: () => import_canvas32.renameCanvasVariantValue,
-  reorderNodes: () => import_canvas25.reorderNodes,
-  repositionNodesTo: () => import_canvas28.repositionNodesTo,
-  resetCanvasInstanceOverrides: () => import_canvas32.resetCanvasInstanceOverrides,
-  resizeHandleAxes: () => import_canvas24.resizeHandleAxes,
-  resolveCanvasGradient: () => import_canvas32.resolveCanvasGradient,
-  resolveCanvasTokens: () => import_canvas30.resolveCanvasTokens,
-  resolveEasing: () => import_canvas31.resolveEasing,
-  resolvePadding: () => import_canvas29.resolvePadding,
-  restoreCanvasMainComponent: () => import_canvas32.restoreCanvasMainComponent,
-  revertShapeCombination: () => import_canvas26.revertShapeCombination,
-  rgbToOklab: () => import_canvas31.rgbToOklab,
-  ringSignedArea: () => import_canvas26.ringSignedArea,
-  runMultiNodeTransition: () => import_canvas28.runMultiNodeTransition,
-  sampleAnimationFrames: () => import_canvas31.sampleAnimationFrames,
-  scaleKeyframes: () => import_canvas31.scaleKeyframes,
-  serializeCanvasNodes: () => import_canvas28.serializeCanvasNodes,
-  setCanvasComponentProperty: () => import_canvas32.setCanvasComponentProperty,
-  setCanvasInstanceProperties: () => import_canvas32.setCanvasInstanceProperties,
-  setCanvasTokenMode: () => import_canvas30.setCanvasTokenMode,
-  setCanvasVariantProperties: () => import_canvas32.setCanvasVariantProperties,
-  setKeyframe: () => import_canvas31.setKeyframe,
-  setKeyframeEasing: () => import_canvas31.setKeyframeEasing,
-  setMotionPath: () => import_canvas31.setMotionPath,
-  setTrackEnabled: () => import_canvas31.setTrackEnabled,
-  shapeNodeToBezierPath: () => import_canvas27.shapeNodeToBezierPath,
-  shapeNodeToPolygon: () => import_canvas26.shapeNodeToPolygon,
-  shapeToBezierPath: () => import_canvas27.shapeToBezierPath,
-  shapeToPolygon: () => import_canvas26.shapeToPolygon,
-  sideToPosition: () => import_canvas25.sideToPosition,
-  simplifyRing: () => import_canvas26.simplifyRing,
-  snapKeyframeDelta: () => import_canvas31.snapKeyframeDelta,
-  snapNodeDrag: () => import_canvas25.snapNodeDrag,
-  snapNodeResize: () => import_canvas24.snapNodeResize,
-  snapResize: () => import_canvas24.snapResize,
-  snapTimeToFrame: () => import_canvas31.snapTimeToFrame,
-  snapToGrid: () => import_canvas24.snapToGrid,
-  springAt: () => import_canvas31.springAt,
-  streamlinePoints: () => import_canvas32.streamlinePoints,
-  strokeOutlineRings: () => import_canvas27.strokeOutlineRings,
-  strokePointsToPathData: () => import_canvas32.strokePointsToPathData,
-  strokeToShapeNode: () => import_canvas32.strokeToShapeNode,
-  subtractPaths: () => import_canvas27.subtractPaths,
-  subtractPolygons: () => import_canvas26.subtractPolygons,
-  swapCanvasInstance: () => import_canvas32.swapCanvasInstance,
-  syncAllCanvasInstances: () => import_canvas32.syncAllCanvasInstances,
-  syncCanvasComponents: () => import_canvas32.syncCanvasComponents,
-  syncCanvasInstance: () => import_canvas32.syncCanvasInstance,
-  timeToX: () => import_canvas31.timeToX,
-  toBezierPath: () => import_canvas27.toBezierPath,
-  toWebAnimations: () => import_canvas31.toWebAnimations,
-  toggleLockNodes: () => import_canvas25.toggleLockNodes,
-  transformBezierPath: () => import_canvas27.transformBezierPath,
-  unionPolygons: () => import_canvas26.unionPolygons,
-  unitePaths: () => import_canvas27.unitePaths,
-  unlockNodes: () => import_canvas25.unlockNodes,
-  updateKeyframe: () => import_canvas31.updateKeyframe,
+  mixColorsOklab: () => import_canvas32.mixColorsOklab,
+  moveKeyframes: () => import_canvas32.moveKeyframes,
+  moveLayoutChild: () => import_canvas30.moveLayoutChild,
+  multiPolygonArea: () => import_canvas27.multiPolygonArea,
+  multiPolygonBounds: () => import_canvas27.multiPolygonBounds,
+  nearestHandlePositions: () => import_canvas26.nearestHandlePositions,
+  normalizeBezierPath: () => import_canvas28.normalizeBezierPath,
+  normalizeKeyframes: () => import_canvas32.normalizeKeyframes,
+  offsetPath: () => import_canvas28.offsetPath,
+  offsetShapeNodes: () => import_canvas28.offsetShapeNodes,
+  oklabToRgb: () => import_canvas32.oklabToRgb,
+  oppositePosition: () => import_canvas26.oppositePosition,
+  outlineShapeNodeStrokes: () => import_canvas28.outlineShapeNodeStrokes,
+  outlineStroke: () => import_canvas28.outlineStroke,
+  overlaps: () => import_canvas29.overlaps,
+  parseCanvasClipboardData: () => import_canvas29.parseCanvasClipboardData,
+  parseCanvasScenes: () => import_canvas26.parseCanvasScenes,
+  parseCssEasing: () => import_canvas32.parseCssEasing,
+  parseCssGradient: () => import_canvas33.parseCssGradient,
+  parseKeyframeClipboard: () => import_canvas32.parseKeyframeClipboard,
+  parseOklab: () => import_canvas32.parseOklab,
+  parseSvgPath: () => import_canvas27.parseSvgPath,
+  pasteKeyframes: () => import_canvas32.pasteKeyframes,
+  pathBoolean: () => import_canvas28.pathBoolean,
+  pathDataToPolyline: () => import_canvas33.pathDataToPolyline,
+  placeBeside: () => import_canvas29.placeBeside,
+  playWebAnimations: () => import_canvas32.playWebAnimations,
+  pointInBezierPath: () => import_canvas28.pointInBezierPath,
+  pointInMultiPolygon: () => import_canvas27.pointInMultiPolygon,
+  pointInRings: () => import_canvas27.pointInRings,
+  pointerPenSample: () => import_canvas33.pointerPenSample,
+  polygonArea: () => import_canvas27.polygonArea,
+  polygonBoolean: () => import_canvas27.polygonBoolean,
+  polygonToSvgPath: () => import_canvas27.polygonToSvgPath,
+  positionToSide: () => import_canvas26.positionToSide,
+  profileAlongPolyline: () => import_canvas33.profileAlongPolyline,
+  pruneCanvasTokenModes: () => import_canvas31.pruneCanvasTokenModes,
+  pushCanvasInstanceOverrides: () => import_canvas33.pushCanvasInstanceOverrides,
+  readAnimatableValue: () => import_canvas32.readAnimatableValue,
+  readNodeStyleProperty: () => import_canvas31.readNodeStyleProperty,
+  readStyleSize: () => import_canvas26.readStyleSize,
+  realClock: () => import_canvas29.realClock,
+  recordAnimationChanges: () => import_canvas32.recordAnimationChanges,
+  relayoutUpdates: () => import_canvas30.relayoutUpdates,
+  remapPastedNodes: () => import_canvas29.remapPastedNodes,
+  removeCanvasVariant: () => import_canvas33.removeCanvasVariant,
+  removeTrack: () => import_canvas32.removeTrack,
+  renameCanvasVariantProperty: () => import_canvas33.renameCanvasVariantProperty,
+  renameCanvasVariantValue: () => import_canvas33.renameCanvasVariantValue,
+  renderShapeBrushstroke: () => import_canvas33.renderShapeBrushstroke,
+  reorderNodes: () => import_canvas26.reorderNodes,
+  repositionNodesTo: () => import_canvas29.repositionNodesTo,
+  resetCanvasInstanceOverrides: () => import_canvas33.resetCanvasInstanceOverrides,
+  resizeHandleAxes: () => import_canvas25.resizeHandleAxes,
+  resolveCanvasGradient: () => import_canvas33.resolveCanvasGradient,
+  resolveCanvasTokens: () => import_canvas31.resolveCanvasTokens,
+  resolveEasing: () => import_canvas32.resolveEasing,
+  resolvePadding: () => import_canvas30.resolvePadding,
+  restoreCanvasMainComponent: () => import_canvas33.restoreCanvasMainComponent,
+  revertShapeCombination: () => import_canvas27.revertShapeCombination,
+  rgbToOklab: () => import_canvas32.rgbToOklab,
+  ringSignedArea: () => import_canvas27.ringSignedArea,
+  runMultiNodeTransition: () => import_canvas29.runMultiNodeTransition,
+  sampleAnimationFrames: () => import_canvas32.sampleAnimationFrames,
+  scaleKeyframes: () => import_canvas32.scaleKeyframes,
+  serializeCanvasNodes: () => import_canvas29.serializeCanvasNodes,
+  setCanvasComponentProperty: () => import_canvas33.setCanvasComponentProperty,
+  setCanvasInstanceProperties: () => import_canvas33.setCanvasInstanceProperties,
+  setCanvasTokenMode: () => import_canvas31.setCanvasTokenMode,
+  setCanvasVariantProperties: () => import_canvas33.setCanvasVariantProperties,
+  setKeyframe: () => import_canvas32.setKeyframe,
+  setKeyframeEasing: () => import_canvas32.setKeyframeEasing,
+  setMotionPath: () => import_canvas32.setMotionPath,
+  setTrackEnabled: () => import_canvas32.setTrackEnabled,
+  shapeNodeToBezierPath: () => import_canvas28.shapeNodeToBezierPath,
+  shapeNodeToPolygon: () => import_canvas27.shapeNodeToPolygon,
+  shapeToBezierPath: () => import_canvas28.shapeToBezierPath,
+  shapeToPolygon: () => import_canvas27.shapeToPolygon,
+  sideToPosition: () => import_canvas26.sideToPosition,
+  simplifyRing: () => import_canvas27.simplifyRing,
+  snapKeyframeDelta: () => import_canvas32.snapKeyframeDelta,
+  snapNodeDrag: () => import_canvas26.snapNodeDrag,
+  snapNodeResize: () => import_canvas25.snapNodeResize,
+  snapResize: () => import_canvas25.snapResize,
+  snapTimeToFrame: () => import_canvas32.snapTimeToFrame,
+  snapToGrid: () => import_canvas25.snapToGrid,
+  springAt: () => import_canvas32.springAt,
+  streamlinePoints: () => import_canvas33.streamlinePoints,
+  strokeOutlineRings: () => import_canvas28.strokeOutlineRings,
+  strokePointsToPathData: () => import_canvas33.strokePointsToPathData,
+  strokeToShapeNode: () => import_canvas33.strokeToShapeNode,
+  subtractPaths: () => import_canvas28.subtractPaths,
+  subtractPolygons: () => import_canvas27.subtractPolygons,
+  swapCanvasInstance: () => import_canvas33.swapCanvasInstance,
+  syncAllCanvasInstances: () => import_canvas33.syncAllCanvasInstances,
+  syncCanvasComponents: () => import_canvas33.syncCanvasComponents,
+  syncCanvasInstance: () => import_canvas33.syncCanvasInstance,
+  timeToX: () => import_canvas32.timeToX,
+  toBezierPath: () => import_canvas28.toBezierPath,
+  toWebAnimations: () => import_canvas32.toWebAnimations,
+  toggleLockNodes: () => import_canvas26.toggleLockNodes,
+  transformBezierPath: () => import_canvas28.transformBezierPath,
+  unionPolygons: () => import_canvas27.unionPolygons,
+  unitePaths: () => import_canvas28.unitePaths,
+  unlockNodes: () => import_canvas26.unlockNodes,
+  updateKeyframe: () => import_canvas32.updateKeyframe,
   useCanvasAnimation: () => useCanvasAnimation,
   useCanvasArrange: () => useCanvasArrange,
   useCanvasArrangeShortcuts: () => useCanvasArrangeShortcuts,
   useCanvasAutoLayout: () => useCanvasAutoLayout,
+  useCanvasBrushes: () => useCanvasBrushes,
   useCanvasCapture: () => useCanvasCapture,
   useCanvasClipboard: () => useCanvasClipboard,
   useCanvasComponents: () => useCanvasComponents,
@@ -354,14 +367,16 @@ __export(canvas_exports, {
   useMermaidDiagram: () => useMermaidDiagram,
   useMermaidStream: () => useMermaidStream,
   usePresenceState: () => usePresenceState,
+  useShapeBrushstroke: () => useShapeBrushstroke,
   useStreamingCanvas: () => useStreamingCanvas,
-  withNodeAnimation: () => import_canvas31.withNodeAnimation,
-  withStyleSize: () => import_canvas25.withStyleSize,
-  wouldCreateComponentCycle: () => import_canvas32.wouldCreateComponentCycle,
-  wrapAnimationTime: () => import_canvas31.wrapAnimationTime,
-  writeNodeStyleProperty: () => import_canvas30.writeNodeStyleProperty,
-  xToTime: () => import_canvas31.xToTime,
-  xorPolygons: () => import_canvas26.xorPolygons
+  validateCanvasBrush: () => import_canvas33.validateCanvasBrush,
+  withNodeAnimation: () => import_canvas32.withNodeAnimation,
+  withStyleSize: () => import_canvas26.withStyleSize,
+  wouldCreateComponentCycle: () => import_canvas33.wouldCreateComponentCycle,
+  wrapAnimationTime: () => import_canvas32.wrapAnimationTime,
+  writeNodeStyleProperty: () => import_canvas31.writeNodeStyleProperty,
+  xToTime: () => import_canvas32.xToTime,
+  xorPolygons: () => import_canvas27.xorPolygons
 });
 module.exports = __toCommonJS(canvas_exports);
 
@@ -1393,7 +1408,9 @@ function useCanvasDraw(options) {
       continueStroke: controller.continueStroke,
       endStroke: controller.endStroke,
       cancelStroke: controller.cancelStroke,
-      eraseAt: controller.eraseAt
+      eraseAt: controller.eraseAt,
+      drawStroke: controller.drawStroke,
+      listBrushes: controller.listBrushes
     }),
     [tool, style, activeStroke, controller]
   );
@@ -1457,7 +1474,7 @@ function CanvasDrawLayer({
     e.stopPropagation();
     e.target.setPointerCapture?.(e.pointerId);
     const flowPt = clientToFlow(e.clientX, e.clientY);
-    draw.startStroke(flowPt);
+    draw.startStroke(flowPt, (0, import_canvas10.pointerPenSample)(e));
     if (draw.tool === "eraser") {
       setEraserPos([e.clientX, e.clientY]);
     }
@@ -1470,8 +1487,10 @@ function CanvasDrawLayer({
     if (e.buttons === 1) {
       e.preventDefault();
       e.stopPropagation();
-      const flowPt = clientToFlow(e.clientX, e.clientY);
-      draw.continueStroke(flowPt);
+      const events = draw.style.brush !== void 0 ? e.nativeEvent.getCoalescedEvents?.() ?? [] : [];
+      for (const ev of events.length ? events : [e.nativeEvent]) {
+        draw.continueStroke(clientToFlow(ev.clientX, ev.clientY), (0, import_canvas10.pointerPenSample)(ev));
+      }
     }
   };
   const handlePointerUp = (e) => {
@@ -1605,17 +1624,72 @@ function useCanvasMeasure(options) {
 }
 
 // src/canvas/index.ts
-var import_canvas24 = require("@pixerate/editor/canvas");
 var import_canvas25 = require("@pixerate/editor/canvas");
+var import_canvas26 = require("@pixerate/editor/canvas");
 
 // src/canvas/ShapeNode.tsx
+var import_canvas13 = require("@pixerate/editor/canvas");
+
+// src/canvas/useShapeBrushstroke.tsx
+var import_react14 = require("react");
 var import_canvas12 = require("@pixerate/editor/canvas");
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var ShapeNodeZoomContext = (0, import_react14.createContext)(1);
+function ShapeNodeZoomProvider({ zoom, children }) {
+  const bucket = (0, import_canvas12.brushstrokeScaleBucket)(zoom);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ShapeNodeZoomContext.Provider, { value: bucket, children });
+}
+function useShapeBrushstroke(shape, width, height) {
+  const zoom = (0, import_react14.useContext)(ShapeNodeZoomContext);
+  const brushed = (0, import_canvas12.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 = (0, import_canvas12.brushstrokeScaleBucket)(zoom * nodeScale, dpr);
+  const [image, setImage] = (0, import_react14.useState)(null);
+  (0, import_react14.useEffect)(() => {
+    if (!brushed) {
+      setImage(null);
+      return;
+    }
+    let live = true;
+    (0, import_canvas12.renderShapeBrushstroke)(brushed, { scale }).then(
+      (img) => live && setImage(img),
+      (error) => {
+        if (!live) return;
+        setImage(null);
+        console.warn("[pixerate] brushed stroke not rendered:", error instanceof Error ? error.message : error);
+      }
+    );
+    return () => {
+      live = false;
+    };
+  }, [brushed, scale]);
+  return image;
+}
+function useCanvasBrushes() {
+  const [state, setState] = (0, import_react14.useState)({ brushes: [], loading: true, error: null });
+  (0, import_react14.useEffect)(() => {
+    let live = true;
+    (0, import_canvas12.listCanvasBrushes)().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;
+    };
+  }, []);
+  return (0, import_react14.useMemo)(() => state, [state]);
+}
+
+// src/canvas/ShapeNode.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ShapeNode({ id, data, width, height, selected, className = "", children }) {
   const shape = data?.shape;
-  if (!(0, import_canvas12.isShapeDescription)(shape)) return null;
-  const render = (0, import_canvas12.getShapeRenderData)(shape, { width, height }, { id: id || data?.id });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  const brushImage = useShapeBrushstroke((0, import_canvas13.isShapeDescription)(shape) ? shape : null, width, height);
+  if (!(0, import_canvas13.isShapeDescription)(shape)) return null;
+  const render = (0, import_canvas13.getShapeRenderData)(shape, { width, height }, { id: id || data?.id });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       className: `pixerate-shape-node ${className}`.trim(),
@@ -1623,7 +1697,7 @@ function ShapeNode({ id, data, width, height, selected, className = "", children
       "data-selected": selected ? "true" : void 0,
       style: { position: "relative", width: "100%", height: "100%" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "svg",
           {
             viewBox: render.viewBox,
@@ -1633,13 +1707,25 @@ function ShapeNode({ id, data, width, height, selected, className = "", children
             style: { display: "block", overflow: "visible" },
             "aria-hidden": "true",
             children: [
-              (render.fillGradient || render.strokeGradient) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("defs", { children: [
-                render.fillGradient && render.fillGradient.type === "linear" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("linearGradient", { id: render.fillGradient.id, ...render.fillGradient.attrs, children: render.fillGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
-                render.fillGradient && render.fillGradient.type === "radial" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("radialGradient", { id: render.fillGradient.id, ...render.fillGradient.attrs, children: render.fillGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
-                render.strokeGradient && render.strokeGradient.type === "linear" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("linearGradient", { id: render.strokeGradient.id, ...render.strokeGradient.attrs, children: render.strokeGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
-                render.strokeGradient && render.strokeGradient.type === "radial" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("radialGradient", { id: render.strokeGradient.id, ...render.strokeGradient.attrs, children: render.strokeGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) })
+              (render.fillGradient || render.strokeGradient) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("defs", { children: [
+                render.fillGradient && render.fillGradient.type === "linear" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("linearGradient", { id: render.fillGradient.id, ...render.fillGradient.attrs, children: render.fillGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
+                render.fillGradient && render.fillGradient.type === "radial" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("radialGradient", { id: render.fillGradient.id, ...render.fillGradient.attrs, children: render.fillGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
+                render.strokeGradient && render.strokeGradient.type === "linear" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("linearGradient", { id: render.strokeGradient.id, ...render.strokeGradient.attrs, children: render.strokeGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) }),
+                render.strokeGradient && render.strokeGradient.type === "radial" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("radialGradient", { id: render.strokeGradient.id, ...render.strokeGradient.attrs, children: render.strokeGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: stop.offset, stopColor: stop.stopColor, stopOpacity: stop.stopOpacity }, i)) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              brushImage ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("g", { transform: render.transform, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "image",
+                {
+                  className: "pixerate-shape-brushstroke",
+                  href: brushImage.href,
+                  x: brushImage.x,
+                  y: brushImage.y,
+                  width: brushImage.width,
+                  height: brushImage.height,
+                  preserveAspectRatio: "none",
+                  opacity: render.opacity
+                }
+              ) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "path",
                 {
                   d: render.d,
@@ -1664,22 +1750,22 @@ function ShapeNode({ id, data, width, height, selected, className = "", children
 }
 
 // src/canvas/index.ts
-var import_canvas26 = require("@pixerate/editor/canvas");
 var import_canvas27 = require("@pixerate/editor/canvas");
 var import_canvas28 = require("@pixerate/editor/canvas");
 var import_canvas29 = require("@pixerate/editor/canvas");
+var import_canvas30 = require("@pixerate/editor/canvas");
 
 // src/canvas/useCanvasAutoLayout.ts
-var import_react14 = require("react");
-var import_canvas13 = require("@pixerate/editor/canvas");
+var import_react15 = require("react");
+var import_canvas14 = require("@pixerate/editor/canvas");
 function useCanvasAutoLayout(options) {
-  const [guides, setGuides] = (0, import_react14.useState)([]);
-  const nodesRef = (0, import_react14.useRef)(options.nodes);
+  const [guides, setGuides] = (0, import_react15.useState)([]);
+  const nodesRef = (0, import_react15.useRef)(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = (0, import_react14.useRef)(options);
+  const optionsRef = (0, import_react15.useRef)(options);
   optionsRef.current = options;
-  const controller = (0, import_react14.useMemo)(
-    () => (0, import_canvas13.createCanvasAutoLayoutController)({
+  const controller = (0, import_react15.useMemo)(
+    () => (0, import_canvas14.createCanvasAutoLayoutController)({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
         nodesRef.current = next;
@@ -1704,10 +1790,10 @@ function useCanvasAutoLayout(options) {
     }),
     []
   );
-  (0, import_react14.useLayoutEffect)(() => {
+  (0, import_react15.useLayoutEffect)(() => {
     if (controller.hasPending) controller.flush();
   }, [options.nodes, controller]);
-  return (0, import_react14.useMemo)(
+  return (0, import_react15.useMemo)(
     () => ({
       ...controller,
       /** Drop marker of the active reorder drag (flow coordinates). */
@@ -1721,47 +1807,47 @@ function useCanvasAutoLayout(options) {
 }
 
 // src/canvas/useCanvasTokens.ts
-var import_react15 = require("react");
-var import_canvas14 = require("@pixerate/editor/canvas");
+var import_react16 = require("react");
+var import_canvas15 = require("@pixerate/editor/canvas");
 function useCanvasTokens(options) {
   const { store, nodes, setNodes, modes, properties } = options;
-  const state = (0, import_react15.useSyncExternalStore)(store.subscribe, store.getState, store.getState);
-  const latest = (0, import_react15.useRef)({ nodes, setNodes, modes, properties });
+  const state = (0, import_react16.useSyncExternalStore)(store.subscribe, store.getState, store.getState);
+  const latest = (0, import_react16.useRef)({ nodes, setNodes, modes, properties });
   latest.current = { nodes, setNodes, modes, properties };
   const opts = () => ({ modes: latest.current.modes, properties: latest.current.properties });
-  (0, import_react15.useEffect)(
+  (0, import_react16.useEffect)(
     () => store.subscribe((event) => {
       if (event.deletedVariableIds.length === 0) return;
-      latest.current.setNodes((prev) => (0, import_canvas14.detachTokenBindings)(prev, event.previous, event.deletedVariableIds, opts()));
+      latest.current.setNodes((prev) => (0, import_canvas15.detachTokenBindings)(prev, event.previous, event.deletedVariableIds, opts()));
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [store]
   );
   const modesKey = JSON.stringify(modes ?? {});
-  (0, import_react15.useEffect)(() => {
-    const next = (0, import_canvas14.resolveCanvasTokens)(nodes, state, opts());
+  (0, import_react16.useEffect)(() => {
+    const next = (0, import_canvas15.resolveCanvasTokens)(nodes, state, opts());
     if (next !== nodes) setNodes(next);
   }, [nodes, state, modesKey, properties]);
-  const bind = (0, import_react15.useCallback)(
+  const bind = (0, import_react16.useCallback)(
     (ids, propertyKey, variableId) => {
-      const next = (0, import_canvas14.bindCanvasToken)(latest.current.nodes, ids, propertyKey, variableId, store.getState(), opts());
+      const next = (0, import_canvas15.bindCanvasToken)(latest.current.nodes, ids, propertyKey, variableId, store.getState(), opts());
       if (next !== latest.current.nodes) latest.current.setNodes(next);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [store]
   );
-  const setMode = (0, import_react15.useCallback)(
+  const setMode = (0, import_react16.useCallback)(
     (ids, collectionId, modeId) => {
-      const next = (0, import_canvas14.setCanvasTokenMode)(latest.current.nodes, ids, collectionId, modeId, store.getState(), opts());
+      const next = (0, import_canvas15.setCanvasTokenMode)(latest.current.nodes, ids, collectionId, modeId, store.getState(), opts());
       if (next !== latest.current.nodes) latest.current.setNodes(next);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [store]
   );
-  const modesOf = (0, import_react15.useCallback)(
+  const modesOf = (0, import_react16.useCallback)(
     (nodeId) => {
       const node = latest.current.nodes.find((n) => n.id === nodeId);
-      return node ? (0, import_canvas14.getEffectiveTokenModes)(node, latest.current.nodes, store.getState(), opts()) : {};
+      return node ? (0, import_canvas15.getEffectiveTokenModes)(node, latest.current.nodes, store.getState(), opts()) : {};
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [store]
@@ -1770,9 +1856,9 @@ function useCanvasTokens(options) {
 }
 
 // src/canvas/TokenBindingPicker.tsx
-var import_canvas15 = require("@pixerate/editor/canvas");
+var import_canvas16 = require("@pixerate/editor/canvas");
 var import_tokens = require("@pixerate/editor/tokens");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function TokenBindingPicker({
   state,
   nodes,
@@ -1786,18 +1872,18 @@ function TokenBindingPicker({
   const selected = nodes.filter((n) => selectedIds.includes(n.id));
   const first = selected[0];
   if (!first) return null;
-  let rows = (0, import_canvas15.getBindableTokenProperties)(first, options);
+  let rows = (0, import_canvas16.getBindableTokenProperties)(first, options);
   if (properties) rows = properties.map((key) => rows.find((p) => p.key === key)).filter((p) => !!p);
-  const modes = (0, import_canvas15.getEffectiveTokenModes)(first, nodes, state, options);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { "data-token-binding-picker": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: [
+  const modes = (0, import_canvas16.getEffectiveTokenModes)(first, nodes, state, options);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-token-binding-picker": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: [
     rows.map((property) => {
-      const ids = new Set(selected.map((n) => (0, import_canvas15.getNodeTokenBindings)(n)[property.key] ?? ""));
+      const ids = new Set(selected.map((n) => (0, import_canvas16.getNodeTokenBindings)(n)[property.key] ?? ""));
       const value = ids.size === 1 ? [...ids][0] : "__mixed";
-      const candidates = (0, import_canvas15.getTokensForProperty)(state, property, first);
+      const candidates = (0, import_canvas16.getTokensForProperty)(state, property, first);
       const resolved = value && value !== "__mixed" ? (0, import_tokens.resolveToken)(state, value, modes) : null;
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center gap-2", "data-token-property": property.key, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-28 shrink-0 text-muted-foreground", children: property.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-2", "data-token-property": property.key, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-28 shrink-0 text-muted-foreground", children: property.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "select",
           {
             "aria-label": `${property.label} variable`,
@@ -1806,17 +1892,17 @@ function TokenBindingPicker({
             onChange: (e) => {
               const id = e.currentTarget.value || null;
               try {
-                onChange((0, import_canvas15.bindCanvasToken)(nodes, selectedIds, property.key, id, state, options));
+                onChange((0, import_canvas16.bindCanvasToken)(nodes, selectedIds, property.key, id, state, options));
               } catch (error) {
                 onError?.(error);
               }
             },
             children: [
-              value === "__mixed" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "__mixed", children: "Mixed" }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: "None" }),
+              value === "__mixed" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "__mixed", children: "Mixed" }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: "None" }),
               candidates.map((v) => {
                 const collection = state.collections.find((c) => c.id === v.collectionId);
-                return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("option", { value: v.id, children: [
+                return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("option", { value: v.id, children: [
                   v.name,
                   collection && state.collections.length > 1 ? ` (${collection.name})` : ""
                 ] }, v.id);
@@ -1824,17 +1910,17 @@ function TokenBindingPicker({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-16 shrink-0 truncate text-right text-muted-foreground", "data-token-resolved": "", children: resolved?.ok ? property.type === "color" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-16 shrink-0 truncate text-right text-muted-foreground", "data-token-resolved": "", children: resolved?.ok ? property.type === "color" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "span",
           {
             className: "inline-block h-3 w-3 rounded border border-border align-middle",
             style: { background: String(resolved.value) },
             title: String(resolved.value)
           }
-        ) : String(resolved.value) : resolved ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { title: resolved.message, children: "\u26A0" }) : null })
+        ) : String(resolved.value) : resolved ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { title: resolved.message, children: "\u26A0" }) : null })
       ] }, property.key);
     }),
-    state.collections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-muted-foreground", children: "No variables yet." }) : null
+    state.collections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-muted-foreground", children: "No variables yet." }) : null
   ] });
 }
 function TokenModeSwitcher({
@@ -1848,29 +1934,29 @@ function TokenModeSwitcher({
 }) {
   const first = nodes.find((n) => nodeIds.includes(n.id));
   if (!first) return null;
-  const own = (0, import_canvas15.getNodeTokenModes)(first);
+  const own = (0, import_canvas16.getNodeTokenModes)(first);
   const parent = first.parentId ? nodes.find((n) => n.id === first.parentId) : void 0;
-  const inherited = parent ? (0, import_canvas15.getEffectiveTokenModes)(parent, nodes, state, options) : { ...options.modes };
+  const inherited = parent ? (0, import_canvas16.getEffectiveTokenModes)(parent, nodes, state, options) : { ...options.modes };
   const collections = state.collections.filter((c) => showSingleMode || c.modes.length > 1);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-token-mode-switcher": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: collections.map((collection) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-token-mode-switcher": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: collections.map((collection) => {
     const auto = (0, import_tokens.getCurrentMode)(collection, inherited);
     const explicit = collection.modes.some((m) => m.id === own[collection.id]) ? own[collection.id] : "";
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center gap-2", "data-token-collection": collection.id, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-28 shrink-0 truncate text-muted-foreground", children: collection.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-2", "data-token-collection": collection.id, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-28 shrink-0 truncate text-muted-foreground", children: collection.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "select",
         {
           "aria-label": `${collection.name} mode`,
           className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
           value: explicit,
-          onChange: (e) => onChange((0, import_canvas15.setCanvasTokenMode)(nodes, nodeIds, collection.id, e.currentTarget.value || null, state, options)),
+          onChange: (e) => onChange((0, import_canvas16.setCanvasTokenMode)(nodes, nodeIds, collection.id, e.currentTarget.value || null, state, options)),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("option", { value: "", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("option", { value: "", children: [
               "Auto (",
               auto.name,
               ")"
             ] }),
-            collection.modes.map((m) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: m.id, children: m.name }, m.id))
+            collection.modes.map((m) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: m.id, children: m.name }, m.id))
           ]
         }
       )
@@ -1879,18 +1965,18 @@ function TokenModeSwitcher({
 }
 
 // src/canvas/index.ts
-var import_canvas30 = require("@pixerate/editor/canvas");
+var import_canvas31 = require("@pixerate/editor/canvas");
 
 // src/canvas/useCanvasAnimation.ts
-var import_react16 = require("react");
-var import_canvas16 = require("@pixerate/editor/canvas");
+var import_react17 = require("react");
+var import_canvas17 = require("@pixerate/editor/canvas");
 function useCanvasAnimation(options) {
-  const nodesRef = (0, import_react16.useRef)(options.nodes);
+  const nodesRef = (0, import_react17.useRef)(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = (0, import_react16.useRef)(options);
+  const optionsRef = (0, import_react17.useRef)(options);
   optionsRef.current = options;
-  const controller = (0, import_react16.useMemo)(
-    () => (0, import_canvas16.createCanvasAnimationController)({
+  const controller = (0, import_react17.useMemo)(
+    () => (0, import_canvas17.createCanvasAnimationController)({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
         nodesRef.current = next;
@@ -1916,26 +2002,26 @@ function useCanvasAnimation(options) {
     }),
     []
   );
-  (0, import_react16.useEffect)(() => () => controller.destroy(), [controller]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => () => controller.destroy(), [controller]);
+  (0, import_react17.useEffect)(() => {
     if (options.loop !== void 0) controller.setLoop(options.loop);
   }, [controller, options.loop]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (options.playbackRate !== void 0) controller.setPlaybackRate(options.playbackRate);
   }, [controller, options.playbackRate]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (options.recording !== void 0) controller.setRecording(options.recording);
   }, [controller, options.recording]);
-  const state = (0, import_react16.useSyncExternalStore)(
+  const state = (0, import_react17.useSyncExternalStore)(
     (listener) => controller.subscribe(listener),
     () => controller.getState(),
     () => controller.getState()
   );
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     controller.refresh();
   }, [controller, options.nodes]);
-  const displayNodes = (0, import_react16.useMemo)(() => controller.display(options.nodes), [controller, options.nodes, state.time]);
-  return (0, import_react16.useMemo)(
+  const displayNodes = (0, import_react17.useMemo)(() => controller.display(options.nodes), [controller, options.nodes, state.time]);
+  return (0, import_react17.useMemo)(
     () => ({
       ...controller,
       state,
@@ -1956,24 +2042,24 @@ function useCanvasAnimation(options) {
 }
 
 // src/canvas/AnimationTimeline.tsx
-var import_react17 = require("react");
-var import_canvas17 = require("@pixerate/editor/canvas");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_canvas18 = require("@pixerate/editor/canvas");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var LOOP_LABELS = { none: "Once", loop: "Loop", "ping-pong": "Ping-pong" };
 var easingValue = (easing) => typeof easing === "string" ? easing : easing ? "custom" : "linear";
 function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8, labelOf, className = "" }) {
   const { state } = animation;
   const duration = state.duration;
   const rows = animation.timelineRows(nodeIds ?? void 0, labelOf ? { labelOf } : {});
-  const ticks = (0, import_canvas17.getTimelineTicks)(duration, width);
+  const ticks = (0, import_canvas18.getTimelineTicks)(duration, width);
   const selectedEasing = (() => {
     const first = state.selection[0];
     if (!first) return "";
     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 = (0, import_react17.useRef)(null);
-  (0, import_react17.useEffect)(() => {
+  const dragRef = (0, import_react18.useRef)(null);
+  (0, import_react18.useEffect)(() => {
     const onKey = (event) => {
       if (event.key === "Escape" && dragRef.current) {
         dragRef.current = null;
@@ -1986,8 +2072,8 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
   const onRulerDown = (event) => {
     const lane = event.currentTarget;
     const left = lane.getBoundingClientRect().left;
-    animation.scrub((0, import_canvas17.xToTime)(event.clientX - left, duration, width));
-    const move = (e) => animation.scrub((0, import_canvas17.xToTime)(e.clientX - left, duration, width));
+    animation.scrub((0, import_canvas18.xToTime)(event.clientX - left, duration, width));
+    const move = (e) => animation.scrub((0, import_canvas18.xToTime)(e.clientX - left, duration, width));
     const up = () => {
       window.removeEventListener("pointermove", move);
       window.removeEventListener("pointerup", up);
@@ -2027,12 +2113,12 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
     }
   };
   const btn = "rounded border border-border px-2 py-0.5 text-xs hover:bg-muted disabled:opacity-50";
-  const playheadX = (0, import_canvas17.timeToX)(state.time, duration, width);
+  const playheadX = (0, import_canvas18.timeToX)(state.time, duration, width);
   const labelWidth = 120;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-animation-timeline": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, tabIndex: 0, onKeyDown: onTimelineKey, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap items-center gap-2", role: "toolbar", "aria-label": "Animation", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: btn, "data-action": "toggle-play", "aria-label": state.playing ? "Pause" : "Play", onClick: () => animation.toggle(), children: state.playing ? "\u275A\u275A" : "\u25B6" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-animation-timeline": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, tabIndex: 0, onKeyDown: onTimelineKey, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap items-center gap-2", role: "toolbar", "aria-label": "Animation", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: btn, "data-action": "toggle-play", "aria-label": state.playing ? "Pause" : "Play", onClick: () => animation.toggle(), children: state.playing ? "\u275A\u275A" : "\u25B6" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "button",
@@ -2044,13 +2130,13 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           children: "\u25CF Rec"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: btn, "data-action": "add-keyframe", onClick: () => animation.addKeyframe(), children: "\u25C6 Key" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { "data-time": "", className: "tabular-nums text-muted-foreground", children: [
-        (0, import_canvas17.formatAnimationTime)(state.time),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: btn, "data-action": "add-keyframe", onClick: () => animation.addKeyframe(), children: "\u25C6 Key" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { "data-time": "", className: "tabular-nums text-muted-foreground", children: [
+        (0, import_canvas18.formatAnimationTime)(state.time),
         " / ",
-        (0, import_canvas17.formatAnimationTime)(duration)
+        (0, import_canvas18.formatAnimationTime)(duration)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "select",
         {
           "aria-label": "Easing",
@@ -2060,13 +2146,13 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           disabled: state.selection.length === 0,
           onChange: (e) => e.target.value && e.target.value !== "custom" && animation.setEasing(e.target.value),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: "Easing\u2026" }),
-            import_canvas17.ANIMATION_EASING_PRESETS.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: preset, children: import_canvas17.ANIMATION_EASING_LABELS[preset] }, preset)),
-            selectedEasing === "custom" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "custom", children: "Custom" }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", children: "Easing\u2026" }),
+            import_canvas18.ANIMATION_EASING_PRESETS.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: preset, children: import_canvas18.ANIMATION_EASING_LABELS[preset] }, preset)),
+            selectedEasing === "custom" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "custom", children: "Custom" }) : null
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "select",
         {
           "aria-label": "Loop",
@@ -2074,13 +2160,13 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           className: "rounded border border-border bg-background px-1 py-0.5",
           value: state.loop,
           onChange: (e) => animation.setLoop(e.target.value),
-          children: Object.keys(LOOP_LABELS).map((mode) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: mode, children: LOOP_LABELS[mode] }, mode))
+          children: Object.keys(LOOP_LABELS).map((mode) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: mode, children: LOOP_LABELS[mode] }, mode))
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: labelWidth }, className: "shrink-0" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { width: labelWidth }, className: "shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
         "div",
         {
           "data-timeline-ruler": "",
@@ -2088,15 +2174,15 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           style: { width },
           onPointerDown: onRulerDown,
           children: [
-            ticks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute top-0 -translate-x-1/2 text-[10px] text-muted-foreground", style: { left: tick.x }, children: tick.label }, tick.time)),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-playhead": "", className: "absolute top-0 h-5 w-px bg-red-500", style: { left: playheadX } })
+            ticks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "absolute top-0 -translate-x-1/2 text-[10px] text-muted-foreground", style: { left: tick.x }, children: tick.label }, tick.time)),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-playhead": "", className: "absolute top-0 h-5 w-px bg-red-500", style: { left: playheadX } })
           ]
         }
       )
     ] }),
-    rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-muted-foreground", "data-timeline-empty": "", children: "Select an animated node, or press \u25C6 Key to add a keyframe." }) : rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center", "data-track": row.id, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex shrink-0 items-center gap-1 truncate pr-2", style: { width: labelWidth }, title: `${row.nodeLabel} \xB7 ${row.label}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-muted-foreground", "data-timeline-empty": "", children: "Select an animated node, or press \u25C6 Key to add a keyframe." }) : rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center", "data-track": row.id, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex shrink-0 items-center gap-1 truncate pr-2", style: { width: labelWidth }, title: `${row.nodeLabel} \xB7 ${row.label}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "input",
           {
             type: "checkbox",
@@ -2105,24 +2191,24 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
             onChange: (e) => animation.setTrackEnabled(row.nodeId, row.property, e.target.checked)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "truncate", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "truncate", children: [
           rows.filter((r) => r.nodeId === row.nodeId).length < rows.length ? `${row.nodeLabel} \xB7 ` : "",
           row.label
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-lane": "", className: `relative h-5 rounded bg-muted/40 ${row.enabled ? "" : "opacity-50"}`, style: { width }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "pointer-events-none absolute top-0 h-5 w-px bg-red-500/60", style: { left: playheadX } }),
-        state.drag?.target != null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-snap-target": "", className: "pointer-events-none absolute top-0 h-5 w-px bg-sky-400", style: { left: (0, import_canvas17.timeToX)(state.drag.target, duration, width) } }) : null,
-        row.keyframes.map((k) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-lane": "", className: `relative h-5 rounded bg-muted/40 ${row.enabled ? "" : "opacity-50"}`, style: { width }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "pointer-events-none absolute top-0 h-5 w-px bg-red-500/60", style: { left: playheadX } }),
+        state.drag?.target != null ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-snap-target": "", className: "pointer-events-none absolute top-0 h-5 w-px bg-sky-400", style: { left: (0, import_canvas18.timeToX)(state.drag.target, duration, width) } }) : null,
+        row.keyframes.map((k) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "button",
           {
             type: "button",
             "data-keyframe": k.ref.time,
             "aria-pressed": k.selected,
-            "aria-label": `${row.label} keyframe at ${(0, import_canvas17.formatAnimationTime)(k.ref.time)}`,
-            title: `${(0, import_canvas17.formatAnimationTime)(k.time)} \xB7 ${String(k.value)}`,
+            "aria-label": `${row.label} keyframe at ${(0, import_canvas18.formatAnimationTime)(k.ref.time)}`,
+            title: `${(0, import_canvas18.formatAnimationTime)(k.time)} \xB7 ${String(k.value)}`,
             className: `absolute top-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rotate-45 border ${k.selected ? "border-sky-300 bg-sky-500" : "border-foreground/60 bg-background"} ${k.easing === "hold" ? "rounded-none" : "rounded-[1px]"}`,
-            style: { left: (0, import_canvas17.timeToX)(k.time, duration, width) },
+            style: { left: (0, import_canvas18.timeToX)(k.time, duration, width) },
             onPointerDown: onKeyDown(k.ref)
           },
           k.ref.time
@@ -2133,18 +2219,18 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
 }
 
 // src/canvas/index.ts
-var import_canvas31 = require("@pixerate/editor/canvas");
+var import_canvas32 = require("@pixerate/editor/canvas");
 
 // src/canvas/useCanvasComponents.ts
-var import_react18 = require("react");
-var import_canvas18 = require("@pixerate/editor/canvas");
+var import_react19 = require("react");
+var import_canvas19 = require("@pixerate/editor/canvas");
 function useCanvasComponents(options) {
-  const nodesRef = (0, import_react18.useRef)(options.nodes);
+  const nodesRef = (0, import_react19.useRef)(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = (0, import_react18.useRef)(options);
+  const optionsRef = (0, import_react19.useRef)(options);
   optionsRef.current = options;
-  const controller = (0, import_react18.useMemo)(
-    () => (0, import_canvas18.createCanvasComponentsController)({
+  const controller = (0, import_react19.useMemo)(
+    () => (0, import_canvas19.createCanvasComponentsController)({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
         nodesRef.current = next;
@@ -2172,18 +2258,18 @@ function useCanvasComponents(options) {
     }),
     []
   );
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react19.useLayoutEffect)(() => {
     if (optionsRef.current.autoSync !== false) controller.sync();
   }, [options.nodes, controller]);
   return controller;
 }
 
 // src/canvas/CanvasComponentsPanel.tsx
-var import_react19 = require("react");
-var import_canvas19 = require("@pixerate/editor/canvas");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_canvas20 = require("@pixerate/editor/canvas");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function InlineField({ value, label, onCommit }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "input",
     {
       type: "text",
@@ -2214,11 +2300,11 @@ function CanvasComponentsPanel({
   search = true,
   className = ""
 }) {
-  const [query, setQuery] = (0, import_react19.useState)("");
-  const [propsOpen, setPropsOpen] = (0, import_react19.useState)(null);
-  const [menuFor, setMenuFor] = (0, import_react19.useState)(null);
-  const [editing, setEditing] = (0, import_react19.useState)(null);
-  const { components: all, sets } = (0, import_canvas19.listCanvasComponents)(nodes);
+  const [query, setQuery] = (0, import_react20.useState)("");
+  const [propsOpen, setPropsOpen] = (0, import_react20.useState)(null);
+  const [menuFor, setMenuFor] = (0, import_react20.useState)(null);
+  const [editing, setEditing] = (0, import_react20.useState)(null);
+  const { components: all, sets } = (0, import_canvas20.listCanvasComponents)(nodes);
   const q = query.trim().toLowerCase();
   const match = (name) => !q || name.toLowerCase().includes(q);
   const lone = all.filter((c) => !c.setId && match(c.name));
@@ -2229,7 +2315,7 @@ function CanvasComponentsPanel({
   };
   const small = "shrink-0 rounded px-1 text-[10px] text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40";
   const menuItem = "rounded px-2 py-0.5 text-left hover:bg-muted disabled:opacity-40";
-  const item = (id, name, count, extra = {}, onContextMenu) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  const item = (id, name, count, extra = {}, onContextMenu) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "button",
     {
       type: "button",
@@ -2241,22 +2327,22 @@ function CanvasComponentsPanel({
       onClick: () => onInsert(id),
       onContextMenu,
       onDragStart: (e) => {
-        e.dataTransfer.setData(import_canvas19.CANVAS_COMPONENT_DRAG_TYPE, id);
+        e.dataTransfer.setData(import_canvas20.CANVAS_COMPONENT_DRAG_TYPE, id);
         e.dataTransfer.setData("text/plain", name);
         e.dataTransfer.effectAllowed = "copy";
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "truncate", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": true, className: "mr-1 text-muted-foreground", children: "\u25C7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "truncate", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": true, className: "mr-1 text-muted-foreground", children: "\u25C7" }),
           name
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[10px] text-muted-foreground", "data-instance-count": "", children: count })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[10px] text-muted-foreground", "data-instance-count": "", children: count })
       ]
     },
     id
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-components-panel": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: [
-    search ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-components-panel": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: [
+    search ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "input",
       {
         type: "search",
@@ -2266,11 +2352,11 @@ function CanvasComponentsPanel({
         onInput: (e) => setQuery(e.target.value)
       }
     ) : null,
-    shownSets.map((set) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-component-set": set.id, className: "flex flex-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1", children: [
+    shownSets.map((set) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-component-set": set.id, className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1", children: [
         item(set.id, set.name, set.variants.reduce((sum, v) => sum + v.instanceCount, 0), { "data-kind": "set" }),
-        components ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        components ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
               type: "button",
@@ -2282,7 +2368,7 @@ function CanvasComponentsPanel({
               children: "+\xA0Variant"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
               type: "button",
@@ -2297,8 +2383,8 @@ function CanvasComponentsPanel({
           )
         ] }) : null
       ] }),
-      components && propsOpen === set.id ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-variant-properties": set.id, className: "ml-3 flex flex-col gap-1 border-l border-border py-1 pl-2", children: set.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-variant-option": option.name, className: "flex flex-col gap-0.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      components && propsOpen === set.id ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { "data-variant-properties": set.id, className: "ml-3 flex flex-col gap-1 border-l border-border py-1 pl-2", children: set.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-variant-option": option.name, className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           InlineField,
           {
             value: option.name,
@@ -2306,7 +2392,7 @@ function CanvasComponentsPanel({
             onCommit: (next) => report(components.renameVariantProperty(option.name, next, set.id))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ml-2 flex flex-wrap gap-1", children: option.values.map((value) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ml-2 flex flex-wrap gap-1", children: option.values.map((value) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           InlineField,
           {
             value,
@@ -2316,8 +2402,8 @@ function CanvasComponentsPanel({
           value
         )) })
       ] }, option.name)) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ml-3 flex flex-col border-l border-border pl-1", children: set.variants.map((v) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-variant-row": v.id, className: "flex flex-col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ml-3 flex flex-col border-l border-border pl-1", children: set.variants.map((v) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-variant-row": v.id, className: "flex flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1", children: [
           item(
             v.id,
             v.name,
@@ -2328,7 +2414,7 @@ function CanvasComponentsPanel({
               setMenuFor(v.id);
             } : void 0
           ),
-          components ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          components ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
               type: "button",
@@ -2342,8 +2428,8 @@ function CanvasComponentsPanel({
             }
           ) : null
         ] }),
-        components && menuFor === v.id ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { role: "menu", "data-variant-menu": v.id, className: "ml-2 flex flex-col rounded border border-border bg-background p-1 shadow", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        components && menuFor === v.id ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { role: "menu", "data-variant-menu": v.id, className: "ml-2 flex flex-col rounded border border-border bg-background p-1 shadow", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
               type: "button",
@@ -2357,7 +2443,7 @@ function CanvasComponentsPanel({
               children: "Edit values\u2026"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
               type: "button",
@@ -2371,7 +2457,7 @@ function CanvasComponentsPanel({
               children: "Duplicate"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
               type: "button",
@@ -2388,7 +2474,7 @@ function CanvasComponentsPanel({
             }
           )
         ] }) : null,
-        components && editing === v.id ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        components && editing === v.id ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "form",
           {
             "data-variant-editor": v.id,
@@ -2402,9 +2488,9 @@ function CanvasComponentsPanel({
               if (report(components.setVariantProperties(values, v.id))) setEditing(null);
             },
             children: [
-              set.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-16 shrink-0 truncate text-muted-foreground", children: option.name }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              set.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-16 shrink-0 truncate text-muted-foreground", children: option.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "input",
                   {
                     type: "text",
@@ -2415,9 +2501,9 @@ function CanvasComponentsPanel({
                   }
                 )
               ] }, option.name)),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "submit", className: "rounded border border-border px-2 py-0.5 hover:bg-muted", "data-action": "save-variant", children: "Save" }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "rounded px-2 py-0.5 hover:bg-muted", "data-action": "cancel-variant", onClick: () => setEditing(null), children: "Cancel" })
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "submit", className: "rounded border border-border px-2 py-0.5 hover:bg-muted", "data-action": "save-variant", children: "Save" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "rounded px-2 py-0.5 hover:bg-muted", "data-action": "cancel-variant", onClick: () => setEditing(null), children: "Cancel" })
               ] })
             ]
           }
@@ -2425,7 +2511,7 @@ function CanvasComponentsPanel({
       ] }, v.id)) })
     ] }, set.id)),
     lone.map((c) => item(c.id, c.name, c.instanceCount, { "data-kind": "component" })),
-    all.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-muted-foreground", children: "No components yet. Select a frame and choose Create Component." }) : null
+    all.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-muted-foreground", children: "No components yet. Select a frame and choose Create Component." }) : null
   ] });
 }
 function CanvasInstanceInspector({
@@ -2435,36 +2521,36 @@ function CanvasInstanceInspector({
   onError,
   className = ""
 }) {
-  const info = nodeId ? (0, import_canvas19.inspectCanvasInstance)(nodes, nodeId) : void 0;
+  const info = nodeId ? (0, import_canvas20.inspectCanvasInstance)(nodes, nodeId) : void 0;
   if (!info) return null;
   const report = (result) => {
     if (result && !result.ok && result.reason) onError?.(result.reason);
   };
   const setProp = (name, value) => report(components.setInstanceProperties({ [name]: value }, [info.id]));
-  const allComponents = (0, import_canvas19.listCanvasComponents)(nodes).components;
+  const allComponents = (0, import_canvas20.listCanvasComponents)(nodes).components;
   const linked = info.status === "linked";
   const btn = "rounded border border-border px-2 py-0.5 text-xs hover:bg-muted disabled:opacity-40";
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-instance-inspector": "", "data-instance-id": info.id, className: `flex flex-col gap-2 text-xs text-foreground ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate font-medium", "data-instance-main": "", children: linked ? info.componentName : "Main component missing" }),
-      info.nested ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-muted-foreground", children: "Nested" }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { "data-instance-inspector": "", "data-instance-id": info.id, className: `flex flex-col gap-2 text-xs text-foreground ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "truncate font-medium", "data-instance-main": "", children: linked ? info.componentName : "Main component missing" }),
+      info.nested ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-muted-foreground", children: "Nested" }) : null
     ] }),
-    info.variantOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-2", "data-variant-property": option.name, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: option.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    info.variantOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-2", "data-variant-property": option.name, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: option.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "select",
         {
           "aria-label": `${option.name} variant`,
           className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
           value: info.variant[option.name] ?? "",
           onChange: (e) => setProp(option.name, e.currentTarget.value),
-          children: option.values.map((v) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: v, children: v }, v))
+          children: option.values.map((v) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: v, children: v }, v))
         }
       )
     ] }, option.name)),
-    info.properties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-2", "data-component-property": p.name, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: p.name }),
-      p.type === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "checkbox", "aria-label": p.name, checked: p.value === true, onChange: (e) => setProp(p.name, e.currentTarget.checked) }) : p.type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    info.properties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-2", "data-component-property": p.name, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: p.name }),
+      p.type === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "checkbox", "aria-label": p.name, checked: p.value === true, onChange: (e) => setProp(p.name, e.currentTarget.checked) }) : p.type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "input",
         {
           type: "text",
@@ -2479,22 +2565,22 @@ function CanvasInstanceInspector({
           }
         },
         String(p.value)
-      ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "select",
         {
           "aria-label": p.name,
           className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
           value: String(p.value),
           onChange: (e) => setProp(p.name, e.currentTarget.value),
-          children: allComponents.filter((c) => !p.preferred?.length || p.preferred.includes(c.id) || c.id === p.value).map((c) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: c.id, children: c.name }, c.id))
+          children: allComponents.filter((c) => !p.preferred?.length || p.preferred.includes(c.id) || c.id === p.value).map((c) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: c.id, children: c.name }, c.id))
         }
       )
     ] }, p.name)),
-    info.overrides.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-1", "data-instance-overrides": "", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-muted-foreground", children: "Overrides" }),
-      info.overrides.map((o) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap items-center gap-1", "data-override-layer": o.id, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mr-1 truncate", children: o.name }),
-        o.groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    info.overrides.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col gap-1", "data-instance-overrides": "", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-muted-foreground", children: "Overrides" }),
+      info.overrides.map((o) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-wrap items-center gap-1", "data-override-layer": o.id, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "mr-1 truncate", children: o.name }),
+        o.groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "button",
           {
             type: "button",
@@ -2511,11 +2597,11 @@ function CanvasInstanceInspector({
         ))
       ] }, o.id))
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-      linked ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: btn, "data-action": "reset", onClick: () => report(components.resetOverrides(info.id)), children: "Reset all" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: btn, "data-action": "go-to-main", onClick: () => components.goToMainComponent(info.id), children: "Go to main" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+      linked ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: btn, "data-action": "reset", onClick: () => report(components.resetOverrides(info.id)), children: "Reset all" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: btn, "data-action": "go-to-main", onClick: () => components.goToMainComponent(info.id), children: "Go to main" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "button",
           {
             type: "button",
@@ -2526,8 +2612,8 @@ function CanvasInstanceInspector({
             children: "Push changes"
           }
         )
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: btn, "data-action": "restore", onClick: () => report(components.restoreMainComponent(info.rootId)), children: "Restore main component" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: btn, "data-action": "restore", onClick: () => report(components.restoreMainComponent(info.rootId)), children: "Restore main component" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "button",
         {
           type: "button",
@@ -2544,12 +2630,12 @@ function CanvasInstanceInspector({
 }
 
 // src/canvas/index.ts
-var import_canvas32 = require("@pixerate/editor/canvas");
+var import_canvas33 = require("@pixerate/editor/canvas");
 
 // src/canvas/MermaidFamilyScene.tsx
-var import_react20 = require("react");
-var import_canvas20 = require("@pixerate/editor/canvas");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_canvas21 = require("@pixerate/editor/canvas");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function MermaidFamilyScene({
   scene,
   padding = 16,
@@ -2562,7 +2648,7 @@ function MermaidFamilyScene({
   style,
   title
 }) {
-  const uid = (0, import_react20.useId)().replace(/:/g, "");
+  const uid = (0, import_react21.useId)().replace(/:/g, "");
   const marker = (kind) => kind ? `url(#${uid}-${kind})` : void 0;
   const x = scene.x - padding;
   const y = scene.y - padding;
@@ -2580,7 +2666,7 @@ function MermaidFamilyScene({
     cursor: "pointer"
   } : { pointerEvents: "none" };
   const stroke = (mark) => mark.selected ? { stroke: selectionColor, strokeWidth: Math.max(2, mark.strokeWidth ?? 0) } : { stroke: mark.stroke, strokeWidth: mark.strokeWidth };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "svg",
     {
       className: `pixerate-diagram-scene ${className}`.trim(),
@@ -2593,15 +2679,15 @@ function MermaidFamilyScene({
       style: { display: "block", maxWidth: "100%", height: "auto", overflow: "visible", ...style },
       onClick: interactive ? (event) => onSelect?.(null, event) : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("defs", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("marker", { id: `${uid}-arrowclosed`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M0,0 L10,5 L0,10 Z", style: { fill: markerColor } }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("marker", { id: `${uid}-arrow`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M0,0 L10,5 L0,10", style: { fill: "none", stroke: markerColor, strokeWidth: 1.5 } }) })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("defs", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("marker", { id: `${uid}-arrowclosed`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M0,0 L10,5 L0,10 Z", style: { fill: markerColor } }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("marker", { id: `${uid}-arrow`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto-start-reverse", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M0,0 L10,5 L0,10", style: { fill: "none", stroke: markerColor, strokeWidth: 1.5 } }) })
         ] }),
         scene.marks.map((mark) => {
           const common = { "data-role": mark.role, "data-target": mark.target, "data-selected": mark.selected ? "" : void 0, opacity: mark.opacity, ...handlers(mark) };
           switch (mark.kind) {
             case "rect":
-              return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "rect",
                 {
                   ...common,
@@ -2616,9 +2702,9 @@ function MermaidFamilyScene({
                 mark.key
               );
             case "circle":
-              return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { ...common, cx: mark.cx, cy: mark.cy, r: mark.r, style: { fill: mark.fill, ...stroke(mark) } }, mark.key);
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { ...common, cx: mark.cx, cy: mark.cy, r: mark.r, style: { fill: mark.fill, ...stroke(mark) } }, mark.key);
             case "line":
-              return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "line",
                 {
                   ...common,
@@ -2634,7 +2720,7 @@ function MermaidFamilyScene({
                 mark.key
               );
             case "path":
-              return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "path",
                 {
                   ...common,
@@ -2648,14 +2734,14 @@ function MermaidFamilyScene({
                 mark.key
               );
             case "text":
-              return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "text",
                 {
                   ...common,
                   x: mark.x,
                   y: mark.y,
                   textAnchor: mark.anchor,
-                  dominantBaseline: (0, import_canvas20.diagramTextBaseline)(mark.baseline),
+                  dominantBaseline: (0, import_canvas21.diagramTextBaseline)(mark.baseline),
                   transform: mark.rotate ? `rotate(${mark.rotate} ${mark.x} ${mark.y})` : void 0,
                   style: {
                     fill: mark.selected ? selectionColor : mark.fill,
@@ -2676,14 +2762,14 @@ function MermaidFamilyScene({
 }
 
 // src/canvas/useMermaidDiagram.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_diagram = require("@pixerate/editor/diagram");
-var import_canvas21 = require("@pixerate/editor/canvas");
+var import_canvas22 = require("@pixerate/editor/canvas");
 function useDiagramState(controller) {
-  return (0, import_react21.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
+  return (0, import_react22.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
 }
 function useMermaidDiagram(controllerOrOptions = {}, view = {}) {
-  const own = (0, import_react21.useRef)(null);
+  const own = (0, import_react22.useRef)(null);
   let controller;
   if (controllerOrOptions instanceof import_diagram.DiagramController) controller = controllerOrOptions;
   else {
@@ -2693,24 +2779,24 @@ function useMermaidDiagram(controllerOrOptions = {}, view = {}) {
   const layoutOptions = (controllerOrOptions instanceof import_diagram.DiagramController ? void 0 : controllerOrOptions.layoutOptions) ?? view.layoutOptions;
   const sceneTheme = (controllerOrOptions instanceof import_diagram.DiagramController ? void 0 : controllerOrOptions.sceneTheme) ?? view.sceneTheme;
   const state = useDiagramState(controller);
-  const canvas = (0, import_react21.useMemo)(
-    () => (0, import_canvas21.mermaidToCanvas)(state.document, { ...layoutOptions, editable: state.editable }),
+  const canvas = (0, import_react22.useMemo)(
+    () => (0, import_canvas22.mermaidToCanvas)(state.document, { ...layoutOptions, editable: state.editable }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.document, state.editable]
   );
-  const scene = (0, import_react21.useMemo)(
-    () => state.document.tier === "editable" ? (0, import_canvas21.familySceneFromLayout)(state.document.family, state.document.graph, canvas.layout, { theme: { ...import_canvas21.CSS_VARIABLE_DIAGRAM_SCENE_THEME, ...sceneTheme }, selection: state.selection }) : null,
+  const scene = (0, import_react22.useMemo)(
+    () => state.document.tier === "editable" ? (0, import_canvas22.familySceneFromLayout)(state.document.family, state.document.graph, canvas.layout, { theme: { ...import_canvas22.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 = (0, import_react21.useRef)(canvas.layout);
+  const layoutRef = (0, import_react22.useRef)(canvas.layout);
   layoutRef.current = canvas.layout;
-  const actions = (0, import_react21.useMemo)(
+  const actions = (0, import_react22.useMemo)(
     () => ({
       apply: (ops, label) => controller.apply(ops, label),
       load: (source, options) => controller.load(source, options),
       moveNodes: (moved, all = moved) => {
-        const op = (0, import_canvas21.mermaidMovesFromCanvas)(layoutRef.current, moved, all, { stored: controller.getDocument().meta.layout ?? {} });
+        const op = (0, import_canvas22.mermaidMovesFromCanvas)(layoutRef.current, moved, all, { stored: controller.getDocument().meta.layout ?? {} });
         return op ? controller.apply(op, "Move") : null;
       },
       connect: (source, target, label) => controller.apply({ type: "addEdge", edge: { source, target, ...label ? { label } : {} } }, "Connect"),
@@ -2729,7 +2815,7 @@ function useMermaidDiagram(controllerOrOptions = {}, view = {}) {
         "Rename"
       ),
       renameTarget: (target, label) => {
-        const op = (0, import_canvas21.diagramRenameOp)(controller.getDocument(), target, label);
+        const op = (0, import_canvas22.diagramRenameOp)(controller.getDocument(), target, label);
         return op ? controller.apply(op, "Rename") : null;
       },
       select: (ids) => controller.select(ids),
@@ -2742,13 +2828,13 @@ function useMermaidDiagram(controllerOrOptions = {}, view = {}) {
 }
 function useMermaidStream(source, options = {}) {
   const { complete = false, duration = 300, ...layoutOptions } = options;
-  const stream = (0, import_react21.useRef)(null);
-  if (!stream.current) stream.current = new import_canvas21.DiagramStream(layoutOptions);
-  const result = (0, import_react21.useMemo)(() => stream.current.update(source, complete), [source, complete]);
-  const [shown, setShown] = (0, import_react21.useState)({ layout: result.layout, settled: true });
-  const shownRef = (0, import_react21.useRef)(shown.layout);
+  const stream = (0, import_react22.useRef)(null);
+  if (!stream.current) stream.current = new import_canvas22.DiagramStream(layoutOptions);
+  const result = (0, import_react22.useMemo)(() => stream.current.update(source, complete), [source, complete]);
+  const [shown, setShown] = (0, import_react22.useState)({ layout: result.layout, settled: true });
+  const shownRef = (0, import_react22.useRef)(shown.layout);
   shownRef.current = shown.layout;
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const target = result.layout;
     if (!target) return setShown({ layout: null, settled: true });
     const from = shownRef.current;
@@ -2758,14 +2844,14 @@ function useMermaidStream(source, options = {}) {
     const start = performance.now();
     const step = () => {
       const t = Math.min(1, (performance.now() - start) / duration);
-      setShown({ layout: (0, import_canvas21.blendDiagramLayout)(from, target, (0, import_canvas21.easeDiagramTween)(t)), settled: t >= 1 });
+      setShown({ layout: (0, import_canvas22.blendDiagramLayout)(from, target, (0, import_canvas22.easeDiagramTween)(t)), settled: t >= 1 });
       if (t < 1) frame = requestAnimationFrame(step);
     };
     frame = requestAnimationFrame(step);
     return () => cancelAnimationFrame(frame);
   }, [result.layout, duration]);
   const doc = result.document.tier === "editable" ? result.document : null;
-  const canvas = (0, import_react21.useMemo)(() => {
+  const canvas = (0, import_react22.useMemo)(() => {
     if (!doc || !shown.layout) return { nodes: [], edges: [] };
     const placed = new Set(Object.keys(shown.layout.positions));
     const graph = {
@@ -2774,24 +2860,24 @@ function useMermaidStream(source, options = {}) {
       groups: doc.graph.groups.filter((g) => placed.has(g.id)),
       edges: doc.graph.edges.filter((e) => placed.has(e.source) && placed.has(e.target))
     };
-    return (0, import_canvas21.mermaidToCanvas)({ ...doc, graph }, { layout: shown.layout });
+    return (0, import_canvas22.mermaidToCanvas)({ ...doc, graph }, { layout: shown.layout });
   }, [doc, shown.layout]);
   return { document: doc, ...canvas, layout: shown.layout, settled: shown.settled };
 }
 
 // src/canvas/MermaidDiagramNode.tsx
-var import_canvas22 = require("@pixerate/editor/canvas");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_canvas23 = require("@pixerate/editor/canvas");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function mermaidNodeStyle(styles = {}, selected = false) {
-  const paint = (0, import_canvas22.mermaidNodePaint)(styles, selected);
+  const paint = (0, import_canvas23.mermaidNodePaint)(styles, selected);
   const { color, "stroke-width": strokeWidth, "stroke-dasharray": strokeDasharray, ...vars } = paint;
   return { ...vars, color, strokeWidth, strokeDasharray };
 }
 function MermaidDiagramNode({ data, width = 160, height = 56, selected, className = "", children }) {
   const node = data.node;
   if (!node) return null;
-  const members = (0, import_canvas22.mermaidNodeMembers)(node.data);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  const members = (0, import_canvas23.mermaidNodeMembers)(node.data);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className: `pixerate-diagram-node ${className}`.trim(),
@@ -2799,14 +2885,14 @@ function MermaidDiagramNode({ data, width = 160, height = 56, selected, classNam
       "data-selected": selected ? "true" : void 0,
       style: { position: "relative", width: "100%", height: "100%", ...mermaidNodeStyle(data.resolvedStyles, selected) },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", width: "100%", height: "100%", style: { position: "absolute", inset: 0, overflow: "visible" }, "aria-hidden": "true", children: (0, import_canvas22.mermaidShapePaths)(node.shape, width, height).map((path, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: path.d, style: { ...import_canvas22.MERMAID_SHAPE_PAINT[path.paint], vectorEffect: "non-scaling-stroke" } }, i)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", width: "100%", height: "100%", style: { position: "absolute", inset: 0, overflow: "visible" }, "aria-hidden": "true", children: (0, import_canvas23.mermaidShapePaths)(node.shape, width, height).map((path, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: path.d, style: { ...import_canvas23.MERMAID_SHAPE_PAINT[path.paint], vectorEffect: "non-scaling-stroke" } }, i)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "div",
           {
             style: { position: "relative", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: members.length ? "flex-start" : "center", height: "100%", padding: "6px 10px", boxSizing: "border-box", fontSize: 13, lineHeight: 1.3, textAlign: "center", pointerEvents: "none" },
             children: [
-              (0, import_canvas22.mermaidLabelLines)(node.label).map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontWeight: members.length ? 600 : void 0 }, children: line }, i)),
-              members.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { alignSelf: "stretch", marginTop: 4, paddingTop: 4, borderTop: "1px solid var(--pixerate-diagram-node-border)", textAlign: "left", fontSize: 12 }, children: members.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: m }, i)) })
+              (0, import_canvas23.mermaidLabelLines)(node.label).map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontWeight: members.length ? 600 : void 0 }, children: line }, i)),
+              members.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { alignSelf: "stretch", marginTop: 4, paddingTop: 4, borderTop: "1px solid var(--pixerate-diagram-node-border)", textAlign: "left", fontSize: 12 }, children: members.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: m }, i)) })
             ]
           }
         ),
@@ -2818,7 +2904,7 @@ function MermaidDiagramNode({ data, width = 160, height = 56, selected, classNam
 function MermaidDiagramGroup({ data, selected, className = "", children }) {
   const group = data.group;
   if (!group) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className: `pixerate-diagram-group ${className}`.trim(),
@@ -2833,7 +2919,7 @@ function MermaidDiagramGroup({ data, selected, className = "", children }) {
         color: data.resolvedStyles?.color ?? "var(--muted-foreground, #475569)"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "6px 10px", fontSize: 12, fontWeight: 600 }, children: (0, import_canvas22.mermaidLabelLines)(group.label).join(" ") }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { padding: "6px 10px", fontSize: 12, fontWeight: 600 }, children: (0, import_canvas23.mermaidLabelLines)(group.label).join(" ") }),
         children
       ]
     }
@@ -2841,29 +2927,29 @@ function MermaidDiagramGroup({ data, selected, className = "", children }) {
 }
 
 // src/canvas/MermaidThumbnail.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_diagram2 = require("@pixerate/editor/diagram");
-var import_canvas23 = require("@pixerate/editor/canvas");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_canvas24 = require("@pixerate/editor/canvas");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function MermaidThumbnail({ source, className = "", fallback = null, ...options }) {
-  const doc = (0, import_react22.useMemo)(() => typeof source === "string" ? (0, import_diagram2.parseMermaid)(source) : source, [source]);
+  const doc = (0, import_react23.useMemo)(() => typeof source === "string" ? (0, import_diagram2.parseMermaid)(source) : source, [source]);
   const key = JSON.stringify(options);
-  const drawn = (0, import_react22.useMemo)(
-    () => doc.tier === "editable" && doc.graph.nodes.length ? (0, import_canvas23.mermaidThumbnailSvg)(doc, options) : null,
+  const drawn = (0, import_react23.useMemo)(
+    () => doc.tier === "editable" && doc.graph.nodes.length ? (0, import_canvas24.mermaidThumbnailSvg)(doc, options) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [doc, key]
   );
-  if (!drawn) return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: fallback });
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `pixerate-diagram-thumbnail ${className}`.trim(), style: { display: "inline-block", lineHeight: 0 }, dangerouslySetInnerHTML: { __html: drawn.svg } });
+  if (!drawn) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: fallback });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `pixerate-diagram-thumbnail ${className}`.trim(), style: { display: "inline-block", lineHeight: 0 }, dangerouslySetInnerHTML: { __html: drawn.svg } });
 }
 
 // src/canvas/useDiagramDirector.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_diagram3 = require("@pixerate/editor/diagram");
 function useDiagramDirector(controller, options) {
-  const placement = (0, import_react23.useRef)(options.placement);
+  const placement = (0, import_react24.useRef)(options.placement);
   placement.current = options.placement;
-  const ref = (0, import_react23.useRef)(null);
+  const ref = (0, import_react24.useRef)(null);
   if (!ref.current) {
     const presence = new import_diagram3.PresenceStore();
     ref.current = {
@@ -2874,17 +2960,17 @@ function useDiagramDirector(controller, options) {
   return ref.current;
 }
 function usePresenceState(presence) {
-  return (0, import_react23.useSyncExternalStore)(presence.subscribe, presence.getState, presence.getState);
+  return (0, import_react24.useSyncExternalStore)(presence.subscribe, presence.getState, presence.getState);
 }
 
 // src/canvas/DiagramPresenceLayer.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   const { actors } = usePresenceState(presence);
   if (!actors.length) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `pixerate-diagram-presence ${className}`.trim(), "aria-hidden": "true", style: { position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden", zIndex: 50 }, children: actors.map((a) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { "data-actor": a.id, style: { position: "absolute", left: 0, top: 0, transform: `translate(${a.x * viewport.zoom + viewport.x}px, ${a.y * viewport.zoom + viewport.y}px)` }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { width: "18", height: "20", viewBox: "0 0 12 18", style: { display: "block", transform: a.pressed ? "scale(0.85)" : void 0, transformOrigin: "0 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M0,0 L0,14 L4,10.5 L7,17 L9.5,16 L6.5,9.5 L11.5,9.5 Z", style: { fill: a.color, stroke: "#ffffff", strokeWidth: 1 } }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { position: "absolute", left: 14, top: 16, whiteSpace: "nowrap", borderRadius: 4, padding: "1px 6px", fontSize: 11, fontWeight: 600, color: "#ffffff", background: a.color }, children: a.message ?? a.name })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `pixerate-diagram-presence ${className}`.trim(), "aria-hidden": "true", style: { position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden", zIndex: 50 }, children: actors.map((a) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { "data-actor": a.id, style: { position: "absolute", left: 0, top: 0, transform: `translate(${a.x * viewport.zoom + viewport.x}px, ${a.y * viewport.zoom + viewport.y}px)` }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { width: "18", height: "20", viewBox: "0 0 12 18", style: { display: "block", transform: a.pressed ? "scale(0.85)" : void 0, transformOrigin: "0 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M0,0 L0,14 L4,10.5 L7,17 L9.5,16 L6.5,9.5 L11.5,9.5 Z", style: { fill: a.color, stroke: "#ffffff", strokeWidth: 1 } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { position: "absolute", left: 14, top: 16, whiteSpace: "nowrap", borderRadius: 4, padding: "1px 6px", fontSize: 11, fontWeight: 600, color: "#ffffff", background: a.color }, children: a.message ?? a.name })
   ] }, a.id)) });
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -2925,6 +3011,8 @@ function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   SHAPE_NODE_TYPE,
   SHAPE_OPERATIONS,
   ShapeNode,
+  ShapeNodeZoomContext,
+  ShapeNodeZoomProvider,
   TOKEN_BINDINGS_DATA_KEY,
   TOKEN_MODES_DATA_KEY,
   TokenBindingPicker,
@@ -2950,6 +3038,7 @@ function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   bindCanvasToken,
   blendLayout,
   boundsOf,
+  brushstrokeScaleBucket,
   calculateDagreReflowDisplacement,
   calculateDirectionalDisplacement,
   canCombineShapeNodes,
@@ -3015,6 +3104,7 @@ function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   flowSide,
   formatAnimationTime,
   formatOklab,
+  freehandBrushstroke,
   getAbsolutePosition,
   getAnimatableProperty,
   getAnimatedProperties,
@@ -3025,6 +3115,7 @@ function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   getAutoLayoutGrid,
   getAutoLayoutInsertTarget,
   getBindableTokenProperties,
+  getBrushedShapeSvg,
   getCanvasComponentDragId,
   getCanvasTokenProperty,
   getCenteredNodePosition,
@@ -3067,6 +3158,7 @@ function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   isAnimationEasing,
   isAnimationKeyframe,
   isAutoLayoutFrame,
+  isBrushedShape,
   isCanvasComponent,
   isCanvasComponentSet,
   isCanvasGradient,
@@ -3089,7 +3181,9 @@ function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   layoutUpMany,
   linearPositionTrajectory,
   linearTrajectory,
+  listCanvasBrushes,
   listCanvasComponents,
+  loadCanvasBrushstrokeRenderer,
   lockNodes,
   makeSizingCoherent,
   matchArrangeShortcut,
@@ -3124,15 +3218,18 @@ function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   parseSvgPath,
   pasteKeyframes,
   pathBoolean,
+  pathDataToPolyline,
   placeBeside,
   playWebAnimations,
   pointInBezierPath,
   pointInMultiPolygon,
   pointInRings,
+  pointerPenSample,
   polygonArea,
   polygonBoolean,
   polygonToSvgPath,
   positionToSide,
+  profileAlongPolyline,
   pruneCanvasTokenModes,
   pushCanvasInstanceOverrides,
   readAnimatableValue,
@@ -3146,6 +3243,7 @@ function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   removeTrack,
   renameCanvasVariantProperty,
   renameCanvasVariantValue,
+  renderShapeBrushstroke,
   reorderNodes,
   repositionNodesTo,
   resetCanvasInstanceOverrides,
@@ -3206,6 +3304,7 @@ function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   useCanvasArrange,
   useCanvasArrangeShortcuts,
   useCanvasAutoLayout,
+  useCanvasBrushes,
   useCanvasCapture,
   useCanvasClipboard,
   useCanvasComponents,
@@ -3223,7 +3322,9 @@ function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   useMermaidDiagram,
   useMermaidStream,
   usePresenceState,
+  useShapeBrushstroke,
   useStreamingCanvas,
+  validateCanvasBrush,
   withNodeAnimation,
   withStyleSize,
   wouldCreateComponentCycle,