@pixerate/editor-react 0.40.0 → 0.42.0

package/dist/canvas/index.cjs

@@ -20,313 +20,318 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/canvas/index.ts
 var canvas_exports = {};
 __export(canvas_exports, {
-  ANIMATABLE_PROPERTIES: () => import_canvas26.ANIMATABLE_PROPERTIES,
-  ANIMATION_DATA_KEY: () => import_canvas26.ANIMATION_DATA_KEY,
-  ANIMATION_EASING_LABELS: () => import_canvas26.ANIMATION_EASING_LABELS,
-  ANIMATION_EASING_PRESETS: () => import_canvas26.ANIMATION_EASING_PRESETS,
-  ANIMATION_TIME_EPSILON: () => import_canvas26.ANIMATION_TIME_EPSILON,
-  AUTO_LAYOUT_DATA_KEY: () => import_canvas24.AUTO_LAYOUT_DATA_KEY,
+  ANIMATABLE_PROPERTIES: () => import_canvas29.ANIMATABLE_PROPERTIES,
+  ANIMATION_DATA_KEY: () => import_canvas29.ANIMATION_DATA_KEY,
+  ANIMATION_EASING_LABELS: () => import_canvas29.ANIMATION_EASING_LABELS,
+  ANIMATION_EASING_PRESETS: () => import_canvas29.ANIMATION_EASING_PRESETS,
+  ANIMATION_TIME_EPSILON: () => import_canvas29.ANIMATION_TIME_EPSILON,
+  AUTO_LAYOUT_DATA_KEY: () => import_canvas27.AUTO_LAYOUT_DATA_KEY,
   AgentPresenceLayer: () => AgentPresenceLayer,
-  AnimationEditError: () => import_canvas26.AnimationEditError,
-  AnimationPlayer: () => import_canvas26.AnimationPlayer,
+  AnimationEditError: () => import_canvas29.AnimationEditError,
+  AnimationPlayer: () => import_canvas29.AnimationPlayer,
   AnimationTimeline: () => AnimationTimeline,
-  CANVAS_COMPONENT_DRAG_TYPE: () => import_canvas27.CANVAS_COMPONENT_DRAG_TYPE,
-  CANVAS_GRADIENT_PRESETS: () => import_canvas27.CANVAS_GRADIENT_PRESETS,
-  CANVAS_TOKEN_PROPERTIES: () => import_canvas25.CANVAS_TOKEN_PROPERTIES,
-  CHILD_LAYOUT_DATA_KEY: () => import_canvas24.CHILD_LAYOUT_DATA_KEY,
-  CONNECTION_LINE_TYPES: () => import_canvas20.CONNECTION_LINE_TYPES,
-  CSS_ANIMATION_PROPERTIES: () => import_canvas26.CSS_ANIMATION_PROPERTIES,
-  CUBIC_BEZIER_PRESETS: () => import_canvas26.CUBIC_BEZIER_PRESETS,
+  CANVAS_COMPONENT_DRAG_TYPE: () => import_canvas30.CANVAS_COMPONENT_DRAG_TYPE,
+  CANVAS_GRADIENT_PRESETS: () => import_canvas30.CANVAS_GRADIENT_PRESETS,
+  CANVAS_TOKEN_PROPERTIES: () => import_canvas28.CANVAS_TOKEN_PROPERTIES,
+  CHILD_LAYOUT_DATA_KEY: () => import_canvas27.CHILD_LAYOUT_DATA_KEY,
+  CONNECTION_LINE_TYPES: () => import_canvas23.CONNECTION_LINE_TYPES,
+  CSS_ANIMATION_PROPERTIES: () => import_canvas29.CSS_ANIMATION_PROPERTIES,
+  CUBIC_BEZIER_PRESETS: () => import_canvas29.CUBIC_BEZIER_PRESETS,
   CanvasComponentsPanel: () => CanvasComponentsPanel,
   CanvasDrawLayer: () => CanvasDrawLayer,
   CanvasGuidesLayer: () => CanvasGuidesLayer,
   CanvasInstanceInspector: () => CanvasInstanceInspector,
-  CanvasScenesStore: () => import_canvas20.CanvasScenesStore,
-  DEFAULT_ARRANGE_SHORTCUTS: () => import_canvas20.DEFAULT_ARRANGE_SHORTCUTS,
-  MAX_KEYFRAME_REFS: () => import_canvas26.MAX_KEYFRAME_REFS,
-  ManualClock: () => import_canvas23.ManualClock,
-  RESIZE_HANDLES: () => import_canvas19.RESIZE_HANDLES,
-  SHAPE_DATA_KEY: () => import_canvas21.SHAPE_DATA_KEY,
-  SHAPE_KINDS: () => import_canvas21.SHAPE_KINDS,
-  SHAPE_NODE_TYPE: () => import_canvas21.SHAPE_NODE_TYPE,
-  SHAPE_OPERATIONS: () => import_canvas21.SHAPE_OPERATIONS,
+  CanvasScenesStore: () => import_canvas23.CanvasScenesStore,
+  DEFAULT_ARRANGE_SHORTCUTS: () => import_canvas23.DEFAULT_ARRANGE_SHORTCUTS,
+  DiagramPresenceLayer: () => DiagramPresenceLayer,
+  MAX_KEYFRAME_REFS: () => import_canvas29.MAX_KEYFRAME_REFS,
+  ManualClock: () => import_canvas26.ManualClock,
+  MermaidDiagramGroup: () => MermaidDiagramGroup,
+  MermaidDiagramNode: () => MermaidDiagramNode,
+  MermaidThumbnail: () => MermaidThumbnail,
+  RESIZE_HANDLES: () => import_canvas22.RESIZE_HANDLES,
+  SHAPE_DATA_KEY: () => import_canvas24.SHAPE_DATA_KEY,
+  SHAPE_KINDS: () => import_canvas24.SHAPE_KINDS,
+  SHAPE_NODE_TYPE: () => import_canvas24.SHAPE_NODE_TYPE,
+  SHAPE_OPERATIONS: () => import_canvas24.SHAPE_OPERATIONS,
   ShapeNode: () => ShapeNode,
-  TOKEN_BINDINGS_DATA_KEY: () => import_canvas25.TOKEN_BINDINGS_DATA_KEY,
-  TOKEN_MODES_DATA_KEY: () => import_canvas25.TOKEN_MODES_DATA_KEY,
+  TOKEN_BINDINGS_DATA_KEY: () => import_canvas28.TOKEN_BINDINGS_DATA_KEY,
+  TOKEN_MODES_DATA_KEY: () => import_canvas28.TOKEN_MODES_DATA_KEY,
   TokenBindingPicker: () => TokenBindingPicker,
   TokenModeSwitcher: () => TokenModeSwitcher,
-  addCanvasVariant: () => import_canvas27.addCanvasVariant,
-  addKeyframesAtTime: () => import_canvas26.addKeyframesAtTime,
-  alignNodes: () => import_canvas20.alignNodes,
-  angleToSvgLinearCoords: () => import_canvas27.angleToSvgLinearCoords,
-  animateNode: () => import_canvas26.animateNode,
-  applyAnimation: () => import_canvas26.applyAnimation,
-  applyAnimationOverrides: () => import_canvas26.applyAnimationOverrides,
-  applyConstraints: () => import_canvas24.applyConstraints,
-  applyNodeUpdates: () => import_canvas20.applyNodeUpdates,
-  applyShapeCombination: () => import_canvas21.applyShapeCombination,
-  applyShapeReplacement: () => import_canvas22.applyShapeReplacement,
-  bezierPathArea: () => import_canvas22.bezierPathArea,
-  bezierPathBounds: () => import_canvas22.bezierPathBounds,
-  bezierPathLength: () => import_canvas22.bezierPathLength,
-  bezierPathPointAtLength: () => import_canvas22.bezierPathPointAtLength,
-  bezierPathSignedArea: () => import_canvas22.bezierPathSignedArea,
-  bezierPathToSvg: () => import_canvas22.bezierPathToSvg,
-  bindCanvasComponentProperty: () => import_canvas27.bindCanvasComponentProperty,
-  bindCanvasToken: () => import_canvas25.bindCanvasToken,
-  blendLayout: () => import_canvas23.blendLayout,
-  boundsOf: () => import_canvas23.boundsOf,
-  calculateDagreReflowDisplacement: () => import_canvas23.calculateDagreReflowDisplacement,
-  calculateDirectionalDisplacement: () => import_canvas23.calculateDirectionalDisplacement,
-  canCombineShapeNodes: () => import_canvas21.canCombineShapeNodes,
-  canOffsetShapeNodes: () => import_canvas22.canOffsetShapeNodes,
-  canOutlineShapeNodeStrokes: () => import_canvas22.canOutlineShapeNodeStrokes,
-  canvasHeight: () => import_canvas23.canvasHeight,
-  centerNodes: () => import_canvas23.centerNodes,
-  centre: () => import_canvas23.centre,
-  clampAnimationValue: () => import_canvas26.clampAnimationValue,
-  clampLayoutSize: () => import_canvas24.clampLayoutSize,
-  combineCanvasComponentsAsVariants: () => import_canvas27.combineCanvasComponentsAsVariants,
-  combineShapeNodes: () => import_canvas21.combineShapeNodes,
-  computeNodesBoundingBox: () => import_canvas23.computeNodesBoundingBox,
-  computeSnapGuides: () => import_canvas20.computeSnapGuides,
-  connectedOnly: () => import_canvas23.connectedOnly,
-  copyKeyframes: () => import_canvas26.copyKeyframes,
-  countPathSegments: () => import_canvas22.countPathSegments,
-  createAnimationPlayer: () => import_canvas26.createAnimationPlayer,
-  createBezierTrajectory: () => import_canvas23.createBezierTrajectory,
-  createCanvasAnimationController: () => import_canvas26.createCanvasAnimationController,
-  createCanvasAutoLayoutController: () => import_canvas24.createCanvasAutoLayoutController,
-  createCanvasComponent: () => import_canvas27.createCanvasComponent,
-  createCanvasComponentsController: () => import_canvas27.createCanvasComponentsController,
-  createCanvasDrawController: () => import_canvas27.createCanvasDrawController,
-  createCanvasInstance: () => import_canvas27.createCanvasInstance,
-  createCanvasScenesStore: () => import_canvas20.createCanvasScenesStore,
-  createDefaultStrokeStyle: () => import_canvas27.createDefaultStrokeStyle,
-  createFanOutTrajectory: () => import_canvas23.createFanOutTrajectory,
-  createGuideIndex: () => import_canvas20.createGuideIndex,
-  createNodeGuideIndex: () => import_canvas20.createNodeGuideIndex,
-  cubicBezierAt: () => import_canvas26.cubicBezierAt,
-  cubicPointAt: () => import_canvas19.cubicPointAt,
-  cubicsToPathData: () => import_canvas19.cubicsToPathData,
-  dashContours: () => import_canvas22.dashContours,
-  defaultEasing: () => import_canvas23.defaultEasing,
-  deleteKeyframes: () => import_canvas26.deleteKeyframes,
-  detachCanvasInstance: () => import_canvas27.detachCanvasInstance,
-  detachTokenBindings: () => import_canvas25.detachTokenBindings,
-  distanceToBezierPath: () => import_canvas22.distanceToBezierPath,
-  distributeNodes: () => import_canvas20.distributeNodes,
-  dividePaths: () => import_canvas22.dividePaths,
-  dividePolygons: () => import_canvas21.dividePolygons,
-  easingFromInfluence: () => import_canvas26.easingFromInfluence,
-  easingLabel: () => import_canvas26.easingLabel,
-  easingToCss: () => import_canvas26.easingToCss,
-  ensureLayout: () => import_canvas23.ensureLayout,
-  estimateCanvasHeight: () => import_canvas23.estimateCanvasHeight,
-  estimateNodeSize: () => import_canvas23.estimateNodeSize,
-  evaluateAnimation: () => import_canvas26.evaluateAnimation,
-  evaluateEasing: () => import_canvas26.evaluateEasing,
-  evaluateTrack: () => import_canvas26.evaluateTrack,
-  excludePaths: () => import_canvas22.excludePaths,
-  exportCssAnimation: () => import_canvas26.exportCssAnimation,
-  findConnectorSnap: () => import_canvas20.findConnectorSnap,
-  findStrokesAtPoint: () => import_canvas27.findStrokesAtPoint,
-  fitCubicRun: () => import_canvas19.fitCubicRun,
-  fitCubics: () => import_canvas19.fitCubics,
-  fitFreehandPath: () => import_canvas19.fitFreehandPath,
-  fitPathData: () => import_canvas19.fitPathData,
-  fitViewportToNodes: () => import_canvas20.fitViewportToNodes,
-  fitViewportToRect: () => import_canvas20.fitViewportToRect,
-  flattenSvgPath: () => import_canvas21.flattenSvgPath,
-  flowSide: () => import_canvas23.flowSide,
-  formatAnimationTime: () => import_canvas26.formatAnimationTime,
-  formatOklab: () => import_canvas26.formatOklab,
-  getAbsolutePosition: () => import_canvas20.getAbsolutePosition,
-  getAnimatableProperty: () => import_canvas26.getAnimatableProperty,
-  getAnimatedProperties: () => import_canvas26.getAnimatedProperties,
-  getAnimatedValue: () => import_canvas26.getAnimatedValue,
-  getAnimationDuration: () => import_canvas26.getAnimationDuration,
-  getAnimationTrack: () => import_canvas26.getAnimationTrack,
-  getAutoLayout: () => import_canvas24.getAutoLayout,
-  getAutoLayoutGrid: () => import_canvas24.getAutoLayoutGrid,
-  getAutoLayoutInsertTarget: () => import_canvas24.getAutoLayoutInsertTarget,
-  getBindableTokenProperties: () => import_canvas25.getBindableTokenProperties,
-  getCanvasComponentDragId: () => import_canvas27.getCanvasComponentDragId,
-  getCanvasTokenProperty: () => import_canvas25.getCanvasTokenProperty,
-  getCenteredNodePosition: () => import_canvas23.getCenteredNodePosition,
-  getChildLayout: () => import_canvas24.getChildLayout,
-  getComponentSourceId: () => import_canvas27.getComponentSourceId,
-  getCssPropertyAnimations: () => import_canvas26.getCssPropertyAnimations,
-  getEffectiveTokenModes: () => import_canvas25.getEffectiveTokenModes,
-  getFlowChildren: () => import_canvas24.getFlowChildren,
-  getInstanceData: () => import_canvas27.getInstanceData,
-  getInstanceStatus: () => import_canvas27.getInstanceStatus,
-  getKeyframeTimes: () => import_canvas26.getKeyframeTimes,
-  getLayoutParent: () => import_canvas24.getLayoutParent,
-  getLayoutSizing: () => import_canvas24.getLayoutSizing,
-  getLayoutedNodes: () => import_canvas23.getLayoutedNodes,
-  getNextVariantValues: () => import_canvas27.getNextVariantValues,
-  getNodeAnimation: () => import_canvas26.getNodeAnimation,
-  getNodeOverrides: () => import_canvas27.getNodeOverrides,
-  getNodeRect: () => import_canvas20.getNodeRect,
-  getNodeShape: () => import_canvas21.getNodeShape,
-  getNodeSize: () => import_canvas20.getNodeSize,
-  getNodeTokenBindings: () => import_canvas25.getNodeTokenBindings,
-  getNodeTokenModes: () => import_canvas25.getNodeTokenModes,
-  getResizingNodeRect: () => import_canvas19.getResizingNodeRect,
-  getShapeRenderData: () => import_canvas21.getShapeRenderData,
-  getShapeSvg: () => import_canvas21.getShapeSvg,
-  getTimelineRows: () => import_canvas26.getTimelineRows,
-  getTimelineTicks: () => import_canvas26.getTimelineTicks,
-  getTokenPropertyScope: () => import_canvas25.getTokenPropertyScope,
-  getTokensForProperty: () => import_canvas25.getTokensForProperty,
-  gradientToSvgDef: () => import_canvas27.gradientToSvgDef,
-  handlePoint: () => import_canvas20.handlePoint,
-  hasVisibleStroke: () => import_canvas22.hasVisibleStroke,
-  inferResizeHandle: () => import_canvas19.inferResizeHandle,
-  inspectCanvasInstance: () => import_canvas27.inspectCanvasInstance,
-  inspectNodeTokens: () => import_canvas25.inspectNodeTokens,
-  interpolateAnimationValue: () => import_canvas26.interpolateAnimationValue,
-  intersectPaths: () => import_canvas22.intersectPaths,
-  intersectPolygons: () => import_canvas21.intersectPolygons,
-  invertNodeUpdates: () => import_canvas20.invertNodeUpdates,
-  isAnimationEasing: () => import_canvas26.isAnimationEasing,
-  isAnimationKeyframe: () => import_canvas26.isAnimationKeyframe,
-  isAutoLayoutFrame: () => import_canvas24.isAutoLayoutFrame,
-  isCanvasComponent: () => import_canvas27.isCanvasComponent,
-  isCanvasComponentSet: () => import_canvas27.isCanvasComponentSet,
-  isCanvasGradient: () => import_canvas27.isCanvasGradient,
-  isCanvasInstance: () => import_canvas27.isCanvasInstance,
-  isCssExportExact: () => import_canvas26.isCssExportExact,
-  isEventFromTextInput: () => import_canvas23.isEventFromTextInput,
-  isKeyframeSelected: () => import_canvas26.isKeyframeSelected,
-  isLocked: () => import_canvas20.isLocked,
-  isMeasureModifierHeld: () => import_canvas19.isMeasureModifierHeld,
-  isNodeAnimated: () => import_canvas26.isNodeAnimated,
-  isShapeDescription: () => import_canvas21.isShapeDescription,
-  isShapeNode: () => import_canvas21.isShapeNode,
-  isStraightCubic: () => import_canvas19.isStraightCubic,
-  isValidCanvasNode: () => import_canvas23.isValidCanvasNode,
-  isValidUrl: () => import_canvas23.isValidUrl,
-  layoutAll: () => import_canvas24.layoutAll,
-  layoutBounds: () => import_canvas23.layoutBounds,
-  layoutFrame: () => import_canvas24.layoutFrame,
-  layoutUp: () => import_canvas24.layoutUp,
-  layoutUpMany: () => import_canvas24.layoutUpMany,
-  linearPositionTrajectory: () => import_canvas23.linearPositionTrajectory,
-  linearTrajectory: () => import_canvas23.linearTrajectory,
-  listCanvasComponents: () => import_canvas27.listCanvasComponents,
-  lockNodes: () => import_canvas20.lockNodes,
-  makeSizingCoherent: () => import_canvas24.makeSizingCoherent,
-  matchArrangeShortcut: () => import_canvas20.matchArrangeShortcut,
-  matchSize: () => import_canvas20.matchSize,
-  measureBetween: () => import_canvas19.measureBetween,
-  measureLabel: () => import_canvas19.measureLabel,
-  measureSelection: () => import_canvas19.measureSelection,
-  measureToLine: () => import_canvas19.measureToLine,
-  mergeNodeUpdates: () => import_canvas24.mergeNodeUpdates,
-  mixColorsOklab: () => import_canvas26.mixColorsOklab,
-  moveKeyframes: () => import_canvas26.moveKeyframes,
-  moveLayoutChild: () => import_canvas24.moveLayoutChild,
-  multiPolygonArea: () => import_canvas21.multiPolygonArea,
-  multiPolygonBounds: () => import_canvas21.multiPolygonBounds,
-  nearestHandlePositions: () => import_canvas20.nearestHandlePositions,
-  normalizeBezierPath: () => import_canvas22.normalizeBezierPath,
-  normalizeKeyframes: () => import_canvas26.normalizeKeyframes,
-  offsetPath: () => import_canvas22.offsetPath,
-  offsetShapeNodes: () => import_canvas22.offsetShapeNodes,
-  oklabToRgb: () => import_canvas26.oklabToRgb,
-  oppositePosition: () => import_canvas20.oppositePosition,
-  outlineShapeNodeStrokes: () => import_canvas22.outlineShapeNodeStrokes,
-  outlineStroke: () => import_canvas22.outlineStroke,
-  overlaps: () => import_canvas23.overlaps,
-  parseCanvasClipboardData: () => import_canvas23.parseCanvasClipboardData,
-  parseCanvasScenes: () => import_canvas20.parseCanvasScenes,
-  parseCssEasing: () => import_canvas26.parseCssEasing,
-  parseCssGradient: () => import_canvas27.parseCssGradient,
-  parseKeyframeClipboard: () => import_canvas26.parseKeyframeClipboard,
-  parseOklab: () => import_canvas26.parseOklab,
-  parseSvgPath: () => import_canvas21.parseSvgPath,
-  pasteKeyframes: () => import_canvas26.pasteKeyframes,
-  pathBoolean: () => import_canvas22.pathBoolean,
-  placeBeside: () => import_canvas23.placeBeside,
-  playWebAnimations: () => import_canvas26.playWebAnimations,
-  pointInBezierPath: () => import_canvas22.pointInBezierPath,
-  pointInMultiPolygon: () => import_canvas21.pointInMultiPolygon,
-  pointInRings: () => import_canvas21.pointInRings,
-  polygonArea: () => import_canvas21.polygonArea,
-  polygonBoolean: () => import_canvas21.polygonBoolean,
-  polygonToSvgPath: () => import_canvas21.polygonToSvgPath,
-  positionToSide: () => import_canvas20.positionToSide,
-  pruneCanvasTokenModes: () => import_canvas25.pruneCanvasTokenModes,
-  pushCanvasInstanceOverrides: () => import_canvas27.pushCanvasInstanceOverrides,
-  readAnimatableValue: () => import_canvas26.readAnimatableValue,
-  readNodeStyleProperty: () => import_canvas25.readNodeStyleProperty,
-  readStyleSize: () => import_canvas20.readStyleSize,
-  realClock: () => import_canvas23.realClock,
-  recordAnimationChanges: () => import_canvas26.recordAnimationChanges,
-  relayoutUpdates: () => import_canvas24.relayoutUpdates,
-  remapPastedNodes: () => import_canvas23.remapPastedNodes,
-  removeCanvasVariant: () => import_canvas27.removeCanvasVariant,
-  removeTrack: () => import_canvas26.removeTrack,
-  renameCanvasVariantProperty: () => import_canvas27.renameCanvasVariantProperty,
-  renameCanvasVariantValue: () => import_canvas27.renameCanvasVariantValue,
-  reorderNodes: () => import_canvas20.reorderNodes,
-  repositionNodesTo: () => import_canvas23.repositionNodesTo,
-  resetCanvasInstanceOverrides: () => import_canvas27.resetCanvasInstanceOverrides,
-  resizeHandleAxes: () => import_canvas19.resizeHandleAxes,
-  resolveCanvasGradient: () => import_canvas27.resolveCanvasGradient,
-  resolveCanvasTokens: () => import_canvas25.resolveCanvasTokens,
-  resolveEasing: () => import_canvas26.resolveEasing,
-  resolvePadding: () => import_canvas24.resolvePadding,
-  restoreCanvasMainComponent: () => import_canvas27.restoreCanvasMainComponent,
-  revertShapeCombination: () => import_canvas21.revertShapeCombination,
-  rgbToOklab: () => import_canvas26.rgbToOklab,
-  ringSignedArea: () => import_canvas21.ringSignedArea,
-  runMultiNodeTransition: () => import_canvas23.runMultiNodeTransition,
-  sampleAnimationFrames: () => import_canvas26.sampleAnimationFrames,
-  scaleKeyframes: () => import_canvas26.scaleKeyframes,
-  serializeCanvasNodes: () => import_canvas23.serializeCanvasNodes,
-  setCanvasComponentProperty: () => import_canvas27.setCanvasComponentProperty,
-  setCanvasInstanceProperties: () => import_canvas27.setCanvasInstanceProperties,
-  setCanvasTokenMode: () => import_canvas25.setCanvasTokenMode,
-  setCanvasVariantProperties: () => import_canvas27.setCanvasVariantProperties,
-  setKeyframe: () => import_canvas26.setKeyframe,
-  setKeyframeEasing: () => import_canvas26.setKeyframeEasing,
-  setMotionPath: () => import_canvas26.setMotionPath,
-  setTrackEnabled: () => import_canvas26.setTrackEnabled,
-  shapeNodeToBezierPath: () => import_canvas22.shapeNodeToBezierPath,
-  shapeNodeToPolygon: () => import_canvas21.shapeNodeToPolygon,
-  shapeToBezierPath: () => import_canvas22.shapeToBezierPath,
-  shapeToPolygon: () => import_canvas21.shapeToPolygon,
-  sideToPosition: () => import_canvas20.sideToPosition,
-  simplifyRing: () => import_canvas21.simplifyRing,
-  snapKeyframeDelta: () => import_canvas26.snapKeyframeDelta,
-  snapNodeDrag: () => import_canvas20.snapNodeDrag,
-  snapNodeResize: () => import_canvas19.snapNodeResize,
-  snapResize: () => import_canvas19.snapResize,
-  snapTimeToFrame: () => import_canvas26.snapTimeToFrame,
-  snapToGrid: () => import_canvas19.snapToGrid,
-  springAt: () => import_canvas26.springAt,
-  streamlinePoints: () => import_canvas27.streamlinePoints,
-  strokeOutlineRings: () => import_canvas22.strokeOutlineRings,
-  strokePointsToPathData: () => import_canvas27.strokePointsToPathData,
-  strokeToShapeNode: () => import_canvas27.strokeToShapeNode,
-  subtractPaths: () => import_canvas22.subtractPaths,
-  subtractPolygons: () => import_canvas21.subtractPolygons,
-  swapCanvasInstance: () => import_canvas27.swapCanvasInstance,
-  syncAllCanvasInstances: () => import_canvas27.syncAllCanvasInstances,
-  syncCanvasComponents: () => import_canvas27.syncCanvasComponents,
-  syncCanvasInstance: () => import_canvas27.syncCanvasInstance,
-  timeToX: () => import_canvas26.timeToX,
-  toBezierPath: () => import_canvas22.toBezierPath,
-  toWebAnimations: () => import_canvas26.toWebAnimations,
-  toggleLockNodes: () => import_canvas20.toggleLockNodes,
-  transformBezierPath: () => import_canvas22.transformBezierPath,
-  unionPolygons: () => import_canvas21.unionPolygons,
-  unitePaths: () => import_canvas22.unitePaths,
-  unlockNodes: () => import_canvas20.unlockNodes,
-  updateKeyframe: () => import_canvas26.updateKeyframe,
+  addCanvasVariant: () => import_canvas30.addCanvasVariant,
+  addKeyframesAtTime: () => import_canvas29.addKeyframesAtTime,
+  alignNodes: () => import_canvas23.alignNodes,
+  angleToSvgLinearCoords: () => import_canvas30.angleToSvgLinearCoords,
+  animateNode: () => import_canvas29.animateNode,
+  applyAnimation: () => import_canvas29.applyAnimation,
+  applyAnimationOverrides: () => import_canvas29.applyAnimationOverrides,
+  applyConstraints: () => import_canvas27.applyConstraints,
+  applyNodeUpdates: () => import_canvas23.applyNodeUpdates,
+  applyShapeCombination: () => import_canvas24.applyShapeCombination,
+  applyShapeReplacement: () => import_canvas25.applyShapeReplacement,
+  bezierPathArea: () => import_canvas25.bezierPathArea,
+  bezierPathBounds: () => import_canvas25.bezierPathBounds,
+  bezierPathLength: () => import_canvas25.bezierPathLength,
+  bezierPathPointAtLength: () => import_canvas25.bezierPathPointAtLength,
+  bezierPathSignedArea: () => import_canvas25.bezierPathSignedArea,
+  bezierPathToSvg: () => import_canvas25.bezierPathToSvg,
+  bindCanvasComponentProperty: () => import_canvas30.bindCanvasComponentProperty,
+  bindCanvasToken: () => import_canvas28.bindCanvasToken,
+  blendLayout: () => import_canvas26.blendLayout,
+  boundsOf: () => import_canvas26.boundsOf,
+  calculateDagreReflowDisplacement: () => import_canvas26.calculateDagreReflowDisplacement,
+  calculateDirectionalDisplacement: () => import_canvas26.calculateDirectionalDisplacement,
+  canCombineShapeNodes: () => import_canvas24.canCombineShapeNodes,
+  canOffsetShapeNodes: () => import_canvas25.canOffsetShapeNodes,
+  canOutlineShapeNodeStrokes: () => import_canvas25.canOutlineShapeNodeStrokes,
+  canvasHeight: () => import_canvas26.canvasHeight,
+  centerNodes: () => import_canvas26.centerNodes,
+  centre: () => import_canvas26.centre,
+  clampAnimationValue: () => import_canvas29.clampAnimationValue,
+  clampLayoutSize: () => import_canvas27.clampLayoutSize,
+  combineCanvasComponentsAsVariants: () => import_canvas30.combineCanvasComponentsAsVariants,
+  combineShapeNodes: () => import_canvas24.combineShapeNodes,
+  computeNodesBoundingBox: () => import_canvas26.computeNodesBoundingBox,
+  computeSnapGuides: () => import_canvas23.computeSnapGuides,
+  connectedOnly: () => import_canvas26.connectedOnly,
+  copyKeyframes: () => import_canvas29.copyKeyframes,
+  countPathSegments: () => import_canvas25.countPathSegments,
+  createAnimationPlayer: () => import_canvas29.createAnimationPlayer,
+  createBezierTrajectory: () => import_canvas26.createBezierTrajectory,
+  createCanvasAnimationController: () => import_canvas29.createCanvasAnimationController,
+  createCanvasAutoLayoutController: () => import_canvas27.createCanvasAutoLayoutController,
+  createCanvasComponent: () => import_canvas30.createCanvasComponent,
+  createCanvasComponentsController: () => import_canvas30.createCanvasComponentsController,
+  createCanvasDrawController: () => import_canvas30.createCanvasDrawController,
+  createCanvasInstance: () => import_canvas30.createCanvasInstance,
+  createCanvasScenesStore: () => import_canvas23.createCanvasScenesStore,
+  createDefaultStrokeStyle: () => import_canvas30.createDefaultStrokeStyle,
+  createFanOutTrajectory: () => import_canvas26.createFanOutTrajectory,
+  createGuideIndex: () => import_canvas23.createGuideIndex,
+  createNodeGuideIndex: () => import_canvas23.createNodeGuideIndex,
+  cubicBezierAt: () => import_canvas29.cubicBezierAt,
+  cubicPointAt: () => import_canvas22.cubicPointAt,
+  cubicsToPathData: () => import_canvas22.cubicsToPathData,
+  dashContours: () => import_canvas25.dashContours,
+  defaultEasing: () => import_canvas26.defaultEasing,
+  deleteKeyframes: () => import_canvas29.deleteKeyframes,
+  detachCanvasInstance: () => import_canvas30.detachCanvasInstance,
+  detachTokenBindings: () => import_canvas28.detachTokenBindings,
+  distanceToBezierPath: () => import_canvas25.distanceToBezierPath,
+  distributeNodes: () => import_canvas23.distributeNodes,
+  dividePaths: () => import_canvas25.dividePaths,
+  dividePolygons: () => import_canvas24.dividePolygons,
+  easingFromInfluence: () => import_canvas29.easingFromInfluence,
+  easingLabel: () => import_canvas29.easingLabel,
+  easingToCss: () => import_canvas29.easingToCss,
+  ensureLayout: () => import_canvas26.ensureLayout,
+  estimateCanvasHeight: () => import_canvas26.estimateCanvasHeight,
+  estimateNodeSize: () => import_canvas26.estimateNodeSize,
+  evaluateAnimation: () => import_canvas29.evaluateAnimation,
+  evaluateEasing: () => import_canvas29.evaluateEasing,
+  evaluateTrack: () => import_canvas29.evaluateTrack,
+  excludePaths: () => import_canvas25.excludePaths,
+  exportCssAnimation: () => import_canvas29.exportCssAnimation,
+  findConnectorSnap: () => import_canvas23.findConnectorSnap,
+  findStrokesAtPoint: () => import_canvas30.findStrokesAtPoint,
+  fitCubicRun: () => import_canvas22.fitCubicRun,
+  fitCubics: () => import_canvas22.fitCubics,
+  fitFreehandPath: () => import_canvas22.fitFreehandPath,
+  fitPathData: () => import_canvas22.fitPathData,
+  fitViewportToNodes: () => import_canvas23.fitViewportToNodes,
+  fitViewportToRect: () => import_canvas23.fitViewportToRect,
+  flattenSvgPath: () => import_canvas24.flattenSvgPath,
+  flowSide: () => import_canvas26.flowSide,
+  formatAnimationTime: () => import_canvas29.formatAnimationTime,
+  formatOklab: () => import_canvas29.formatOklab,
+  getAbsolutePosition: () => import_canvas23.getAbsolutePosition,
+  getAnimatableProperty: () => import_canvas29.getAnimatableProperty,
+  getAnimatedProperties: () => import_canvas29.getAnimatedProperties,
+  getAnimatedValue: () => import_canvas29.getAnimatedValue,
+  getAnimationDuration: () => import_canvas29.getAnimationDuration,
+  getAnimationTrack: () => import_canvas29.getAnimationTrack,
+  getAutoLayout: () => import_canvas27.getAutoLayout,
+  getAutoLayoutGrid: () => import_canvas27.getAutoLayoutGrid,
+  getAutoLayoutInsertTarget: () => import_canvas27.getAutoLayoutInsertTarget,
+  getBindableTokenProperties: () => import_canvas28.getBindableTokenProperties,
+  getCanvasComponentDragId: () => import_canvas30.getCanvasComponentDragId,
+  getCanvasTokenProperty: () => import_canvas28.getCanvasTokenProperty,
+  getCenteredNodePosition: () => import_canvas26.getCenteredNodePosition,
+  getChildLayout: () => import_canvas27.getChildLayout,
+  getComponentSourceId: () => import_canvas30.getComponentSourceId,
+  getCssPropertyAnimations: () => import_canvas29.getCssPropertyAnimations,
+  getEffectiveTokenModes: () => import_canvas28.getEffectiveTokenModes,
+  getFlowChildren: () => import_canvas27.getFlowChildren,
+  getInstanceData: () => import_canvas30.getInstanceData,
+  getInstanceStatus: () => import_canvas30.getInstanceStatus,
+  getKeyframeTimes: () => import_canvas29.getKeyframeTimes,
+  getLayoutParent: () => import_canvas27.getLayoutParent,
+  getLayoutSizing: () => import_canvas27.getLayoutSizing,
+  getLayoutedNodes: () => import_canvas26.getLayoutedNodes,
+  getNextVariantValues: () => import_canvas30.getNextVariantValues,
+  getNodeAnimation: () => import_canvas29.getNodeAnimation,
+  getNodeOverrides: () => import_canvas30.getNodeOverrides,
+  getNodeRect: () => import_canvas23.getNodeRect,
+  getNodeShape: () => import_canvas24.getNodeShape,
+  getNodeSize: () => import_canvas23.getNodeSize,
+  getNodeTokenBindings: () => import_canvas28.getNodeTokenBindings,
+  getNodeTokenModes: () => import_canvas28.getNodeTokenModes,
+  getResizingNodeRect: () => import_canvas22.getResizingNodeRect,
+  getShapeRenderData: () => import_canvas24.getShapeRenderData,
+  getShapeSvg: () => import_canvas24.getShapeSvg,
+  getTimelineRows: () => import_canvas29.getTimelineRows,
+  getTimelineTicks: () => import_canvas29.getTimelineTicks,
+  getTokenPropertyScope: () => import_canvas28.getTokenPropertyScope,
+  getTokensForProperty: () => import_canvas28.getTokensForProperty,
+  gradientToSvgDef: () => import_canvas30.gradientToSvgDef,
+  handlePoint: () => import_canvas23.handlePoint,
+  hasVisibleStroke: () => import_canvas25.hasVisibleStroke,
+  inferResizeHandle: () => import_canvas22.inferResizeHandle,
+  inspectCanvasInstance: () => import_canvas30.inspectCanvasInstance,
+  inspectNodeTokens: () => import_canvas28.inspectNodeTokens,
+  interpolateAnimationValue: () => import_canvas29.interpolateAnimationValue,
+  intersectPaths: () => import_canvas25.intersectPaths,
+  intersectPolygons: () => import_canvas24.intersectPolygons,
+  invertNodeUpdates: () => import_canvas23.invertNodeUpdates,
+  isAnimationEasing: () => import_canvas29.isAnimationEasing,
+  isAnimationKeyframe: () => import_canvas29.isAnimationKeyframe,
+  isAutoLayoutFrame: () => import_canvas27.isAutoLayoutFrame,
+  isCanvasComponent: () => import_canvas30.isCanvasComponent,
+  isCanvasComponentSet: () => import_canvas30.isCanvasComponentSet,
+  isCanvasGradient: () => import_canvas30.isCanvasGradient,
+  isCanvasInstance: () => import_canvas30.isCanvasInstance,
+  isCssExportExact: () => import_canvas29.isCssExportExact,
+  isEventFromTextInput: () => import_canvas26.isEventFromTextInput,
+  isKeyframeSelected: () => import_canvas29.isKeyframeSelected,
+  isLocked: () => import_canvas23.isLocked,
+  isMeasureModifierHeld: () => import_canvas22.isMeasureModifierHeld,
+  isNodeAnimated: () => import_canvas29.isNodeAnimated,
+  isShapeDescription: () => import_canvas24.isShapeDescription,
+  isShapeNode: () => import_canvas24.isShapeNode,
+  isStraightCubic: () => import_canvas22.isStraightCubic,
+  isValidCanvasNode: () => import_canvas26.isValidCanvasNode,
+  isValidUrl: () => import_canvas26.isValidUrl,
+  layoutAll: () => import_canvas27.layoutAll,
+  layoutBounds: () => import_canvas26.layoutBounds,
+  layoutFrame: () => import_canvas27.layoutFrame,
+  layoutUp: () => import_canvas27.layoutUp,
+  layoutUpMany: () => import_canvas27.layoutUpMany,
+  linearPositionTrajectory: () => import_canvas26.linearPositionTrajectory,
+  linearTrajectory: () => import_canvas26.linearTrajectory,
+  listCanvasComponents: () => import_canvas30.listCanvasComponents,
+  lockNodes: () => import_canvas23.lockNodes,
+  makeSizingCoherent: () => import_canvas27.makeSizingCoherent,
+  matchArrangeShortcut: () => import_canvas23.matchArrangeShortcut,
+  matchSize: () => import_canvas23.matchSize,
+  measureBetween: () => import_canvas22.measureBetween,
+  measureLabel: () => import_canvas22.measureLabel,
+  measureSelection: () => import_canvas22.measureSelection,
+  measureToLine: () => import_canvas22.measureToLine,
+  mergeNodeUpdates: () => import_canvas27.mergeNodeUpdates,
+  mermaidNodeStyle: () => mermaidNodeStyle,
+  mixColorsOklab: () => import_canvas29.mixColorsOklab,
+  moveKeyframes: () => import_canvas29.moveKeyframes,
+  moveLayoutChild: () => import_canvas27.moveLayoutChild,
+  multiPolygonArea: () => import_canvas24.multiPolygonArea,
+  multiPolygonBounds: () => import_canvas24.multiPolygonBounds,
+  nearestHandlePositions: () => import_canvas23.nearestHandlePositions,
+  normalizeBezierPath: () => import_canvas25.normalizeBezierPath,
+  normalizeKeyframes: () => import_canvas29.normalizeKeyframes,
+  offsetPath: () => import_canvas25.offsetPath,
+  offsetShapeNodes: () => import_canvas25.offsetShapeNodes,
+  oklabToRgb: () => import_canvas29.oklabToRgb,
+  oppositePosition: () => import_canvas23.oppositePosition,
+  outlineShapeNodeStrokes: () => import_canvas25.outlineShapeNodeStrokes,
+  outlineStroke: () => import_canvas25.outlineStroke,
+  overlaps: () => import_canvas26.overlaps,
+  parseCanvasClipboardData: () => import_canvas26.parseCanvasClipboardData,
+  parseCanvasScenes: () => import_canvas23.parseCanvasScenes,
+  parseCssEasing: () => import_canvas29.parseCssEasing,
+  parseCssGradient: () => import_canvas30.parseCssGradient,
+  parseKeyframeClipboard: () => import_canvas29.parseKeyframeClipboard,
+  parseOklab: () => import_canvas29.parseOklab,
+  parseSvgPath: () => import_canvas24.parseSvgPath,
+  pasteKeyframes: () => import_canvas29.pasteKeyframes,
+  pathBoolean: () => import_canvas25.pathBoolean,
+  placeBeside: () => import_canvas26.placeBeside,
+  playWebAnimations: () => import_canvas29.playWebAnimations,
+  pointInBezierPath: () => import_canvas25.pointInBezierPath,
+  pointInMultiPolygon: () => import_canvas24.pointInMultiPolygon,
+  pointInRings: () => import_canvas24.pointInRings,
+  polygonArea: () => import_canvas24.polygonArea,
+  polygonBoolean: () => import_canvas24.polygonBoolean,
+  polygonToSvgPath: () => import_canvas24.polygonToSvgPath,
+  positionToSide: () => import_canvas23.positionToSide,
+  pruneCanvasTokenModes: () => import_canvas28.pruneCanvasTokenModes,
+  pushCanvasInstanceOverrides: () => import_canvas30.pushCanvasInstanceOverrides,
+  readAnimatableValue: () => import_canvas29.readAnimatableValue,
+  readNodeStyleProperty: () => import_canvas28.readNodeStyleProperty,
+  readStyleSize: () => import_canvas23.readStyleSize,
+  realClock: () => import_canvas26.realClock,
+  recordAnimationChanges: () => import_canvas29.recordAnimationChanges,
+  relayoutUpdates: () => import_canvas27.relayoutUpdates,
+  remapPastedNodes: () => import_canvas26.remapPastedNodes,
+  removeCanvasVariant: () => import_canvas30.removeCanvasVariant,
+  removeTrack: () => import_canvas29.removeTrack,
+  renameCanvasVariantProperty: () => import_canvas30.renameCanvasVariantProperty,
+  renameCanvasVariantValue: () => import_canvas30.renameCanvasVariantValue,
+  reorderNodes: () => import_canvas23.reorderNodes,
+  repositionNodesTo: () => import_canvas26.repositionNodesTo,
+  resetCanvasInstanceOverrides: () => import_canvas30.resetCanvasInstanceOverrides,
+  resizeHandleAxes: () => import_canvas22.resizeHandleAxes,
+  resolveCanvasGradient: () => import_canvas30.resolveCanvasGradient,
+  resolveCanvasTokens: () => import_canvas28.resolveCanvasTokens,
+  resolveEasing: () => import_canvas29.resolveEasing,
+  resolvePadding: () => import_canvas27.resolvePadding,
+  restoreCanvasMainComponent: () => import_canvas30.restoreCanvasMainComponent,
+  revertShapeCombination: () => import_canvas24.revertShapeCombination,
+  rgbToOklab: () => import_canvas29.rgbToOklab,
+  ringSignedArea: () => import_canvas24.ringSignedArea,
+  runMultiNodeTransition: () => import_canvas26.runMultiNodeTransition,
+  sampleAnimationFrames: () => import_canvas29.sampleAnimationFrames,
+  scaleKeyframes: () => import_canvas29.scaleKeyframes,
+  serializeCanvasNodes: () => import_canvas26.serializeCanvasNodes,
+  setCanvasComponentProperty: () => import_canvas30.setCanvasComponentProperty,
+  setCanvasInstanceProperties: () => import_canvas30.setCanvasInstanceProperties,
+  setCanvasTokenMode: () => import_canvas28.setCanvasTokenMode,
+  setCanvasVariantProperties: () => import_canvas30.setCanvasVariantProperties,
+  setKeyframe: () => import_canvas29.setKeyframe,
+  setKeyframeEasing: () => import_canvas29.setKeyframeEasing,
+  setMotionPath: () => import_canvas29.setMotionPath,
+  setTrackEnabled: () => import_canvas29.setTrackEnabled,
+  shapeNodeToBezierPath: () => import_canvas25.shapeNodeToBezierPath,
+  shapeNodeToPolygon: () => import_canvas24.shapeNodeToPolygon,
+  shapeToBezierPath: () => import_canvas25.shapeToBezierPath,
+  shapeToPolygon: () => import_canvas24.shapeToPolygon,
+  sideToPosition: () => import_canvas23.sideToPosition,
+  simplifyRing: () => import_canvas24.simplifyRing,
+  snapKeyframeDelta: () => import_canvas29.snapKeyframeDelta,
+  snapNodeDrag: () => import_canvas23.snapNodeDrag,
+  snapNodeResize: () => import_canvas22.snapNodeResize,
+  snapResize: () => import_canvas22.snapResize,
+  snapTimeToFrame: () => import_canvas29.snapTimeToFrame,
+  snapToGrid: () => import_canvas22.snapToGrid,
+  springAt: () => import_canvas29.springAt,
+  streamlinePoints: () => import_canvas30.streamlinePoints,
+  strokeOutlineRings: () => import_canvas25.strokeOutlineRings,
+  strokePointsToPathData: () => import_canvas30.strokePointsToPathData,
+  strokeToShapeNode: () => import_canvas30.strokeToShapeNode,
+  subtractPaths: () => import_canvas25.subtractPaths,
+  subtractPolygons: () => import_canvas24.subtractPolygons,
+  swapCanvasInstance: () => import_canvas30.swapCanvasInstance,
+  syncAllCanvasInstances: () => import_canvas30.syncAllCanvasInstances,
+  syncCanvasComponents: () => import_canvas30.syncCanvasComponents,
+  syncCanvasInstance: () => import_canvas30.syncCanvasInstance,
+  timeToX: () => import_canvas29.timeToX,
+  toBezierPath: () => import_canvas25.toBezierPath,
+  toWebAnimations: () => import_canvas29.toWebAnimations,
+  toggleLockNodes: () => import_canvas23.toggleLockNodes,
+  transformBezierPath: () => import_canvas25.transformBezierPath,
+  unionPolygons: () => import_canvas24.unionPolygons,
+  unitePaths: () => import_canvas25.unitePaths,
+  unlockNodes: () => import_canvas23.unlockNodes,
+  updateKeyframe: () => import_canvas29.updateKeyframe,
   useCanvasAnimation: () => useCanvasAnimation,
   useCanvasArrange: () => useCanvasArrange,
   useCanvasArrangeShortcuts: () => useCanvasArrangeShortcuts,
@@ -342,14 +347,19 @@ __export(canvas_exports, {
   useCanvasScenes: () => useCanvasScenes,
   useCanvasShortcuts: () => useCanvasShortcuts,
   useCanvasTokens: () => useCanvasTokens,
+  useDiagramDirector: () => useDiagramDirector,
+  useDiagramState: () => useDiagramState,
+  useMermaidDiagram: () => useMermaidDiagram,
+  useMermaidStream: () => useMermaidStream,
+  usePresenceState: () => usePresenceState,
   useStreamingCanvas: () => useStreamingCanvas,
-  withNodeAnimation: () => import_canvas26.withNodeAnimation,
-  withStyleSize: () => import_canvas20.withStyleSize,
-  wouldCreateComponentCycle: () => import_canvas27.wouldCreateComponentCycle,
-  wrapAnimationTime: () => import_canvas26.wrapAnimationTime,
-  writeNodeStyleProperty: () => import_canvas25.writeNodeStyleProperty,
-  xToTime: () => import_canvas26.xToTime,
-  xorPolygons: () => import_canvas21.xorPolygons
+  withNodeAnimation: () => import_canvas29.withNodeAnimation,
+  withStyleSize: () => import_canvas23.withStyleSize,
+  wouldCreateComponentCycle: () => import_canvas30.wouldCreateComponentCycle,
+  wrapAnimationTime: () => import_canvas29.wrapAnimationTime,
+  writeNodeStyleProperty: () => import_canvas28.writeNodeStyleProperty,
+  xToTime: () => import_canvas29.xToTime,
+  xorPolygons: () => import_canvas24.xorPolygons
 });
 module.exports = __toCommonJS(canvas_exports);
 
@@ -1568,8 +1578,8 @@ function useCanvasMeasure(options) {
 }
 
 // src/canvas/index.ts
-var import_canvas19 = require("@pixerate/editor/canvas");
-var import_canvas20 = require("@pixerate/editor/canvas");
+var import_canvas22 = require("@pixerate/editor/canvas");
+var import_canvas23 = require("@pixerate/editor/canvas");
 
 // src/canvas/ShapeNode.tsx
 var import_canvas11 = require("@pixerate/editor/canvas");
@@ -1627,10 +1637,10 @@ function ShapeNode({ id, data, width, height, selected, className = "", children
 }
 
 // src/canvas/index.ts
-var import_canvas21 = require("@pixerate/editor/canvas");
-var import_canvas22 = require("@pixerate/editor/canvas");
-var import_canvas23 = require("@pixerate/editor/canvas");
 var import_canvas24 = require("@pixerate/editor/canvas");
+var import_canvas25 = require("@pixerate/editor/canvas");
+var import_canvas26 = require("@pixerate/editor/canvas");
+var import_canvas27 = require("@pixerate/editor/canvas");
 
 // src/canvas/useCanvasAutoLayout.ts
 var import_react13 = require("react");
@@ -1842,7 +1852,7 @@ function TokenModeSwitcher({
 }
 
 // src/canvas/index.ts
-var import_canvas25 = require("@pixerate/editor/canvas");
+var import_canvas28 = require("@pixerate/editor/canvas");
 
 // src/canvas/useCanvasAnimation.ts
 var import_react15 = require("react");
@@ -2096,7 +2106,7 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
 }
 
 // src/canvas/index.ts
-var import_canvas26 = require("@pixerate/editor/canvas");
+var import_canvas29 = require("@pixerate/editor/canvas");
 
 // src/canvas/useCanvasComponents.ts
 var import_react17 = require("react");
@@ -2507,7 +2517,210 @@ function CanvasInstanceInspector({
 }
 
 // src/canvas/index.ts
-var import_canvas27 = require("@pixerate/editor/canvas");
+var import_canvas30 = require("@pixerate/editor/canvas");
+
+// src/canvas/useMermaidDiagram.ts
+var import_react19 = require("react");
+var import_diagram = require("@pixerate/editor/diagram");
+var import_canvas19 = require("@pixerate/editor/canvas");
+function useDiagramState(controller) {
+  return (0, import_react19.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
+}
+function useMermaidDiagram(controllerOrOptions = {}) {
+  const own = (0, import_react19.useRef)(null);
+  let controller;
+  if (controllerOrOptions instanceof import_diagram.DiagramController) controller = controllerOrOptions;
+  else {
+    if (!own.current) own.current = new import_diagram.DiagramController(controllerOrOptions);
+    controller = own.current;
+  }
+  const layoutOptions = controllerOrOptions instanceof import_diagram.DiagramController ? void 0 : controllerOrOptions.layoutOptions;
+  const state = useDiagramState(controller);
+  const canvas = (0, import_react19.useMemo)(
+    () => (0, import_canvas19.mermaidToCanvas)(state.document, { ...layoutOptions, editable: state.editable }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.document, state.editable]
+  );
+  const layoutRef = (0, import_react19.useRef)(canvas.layout);
+  layoutRef.current = canvas.layout;
+  const actions = (0, import_react19.useMemo)(
+    () => ({
+      apply: (ops, label) => controller.apply(ops, label),
+      load: (source, options) => controller.load(source, options),
+      moveNodes: (moved, all = moved) => {
+        const op = (0, import_canvas19.mermaidMovesFromCanvas)(layoutRef.current, moved, all, { stored: controller.getDocument().meta.layout ?? {} });
+        return op ? controller.apply(op, "Move") : null;
+      },
+      connect: (source, target, label) => controller.apply({ type: "addEdge", edge: { source, target, ...label ? { label } : {} } }, "Connect"),
+      remove: (ids) => {
+        const graph = controller.getDocument().graph;
+        const edgeIds = new Set(graph.edges.map((e) => e.id));
+        const edges = ids.filter((id) => edgeIds.has(id));
+        const nodes = ids.filter((id) => !edgeIds.has(id));
+        const ops = [];
+        if (edges.length) ops.push({ type: "removeEdges", ids: edges });
+        if (nodes.length) ops.push({ type: "removeNodes", ids: nodes });
+        return controller.apply(ops, "Delete");
+      },
+      rename: (id, label) => controller.apply(
+        controller.getDocument().graph.groups.some((g) => g.id === id) ? { type: "renameGroup", id, label } : { type: "renameNode", id, label },
+        "Rename"
+      ),
+      select: (ids) => controller.select(ids),
+      undo: () => void controller.undo(),
+      redo: () => void controller.redo()
+    }),
+    [controller]
+  );
+  return { controller, state, document: state.document, source: state.source, ...canvas, ...actions };
+}
+function useMermaidStream(source, options = {}) {
+  const { complete = false, duration = 300, ...layoutOptions } = options;
+  const stream = (0, import_react19.useRef)(null);
+  if (!stream.current) stream.current = new import_canvas19.DiagramStream(layoutOptions);
+  const result = (0, import_react19.useMemo)(() => stream.current.update(source, complete), [source, complete]);
+  const [shown, setShown] = (0, import_react19.useState)({ layout: result.layout, settled: true });
+  const shownRef = (0, import_react19.useRef)(shown.layout);
+  shownRef.current = shown.layout;
+  (0, import_react19.useEffect)(() => {
+    const target = result.layout;
+    if (!target) return setShown({ layout: null, settled: true });
+    const from = shownRef.current;
+    if (!from || duration <= 0 || typeof requestAnimationFrame !== "function") return setShown({ layout: target, settled: true });
+    if (from === target) return;
+    let frame = 0;
+    const start = performance.now();
+    const step = () => {
+      const t = Math.min(1, (performance.now() - start) / duration);
+      setShown({ layout: (0, import_canvas19.blendDiagramLayout)(from, target, (0, import_canvas19.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_react19.useMemo)(() => {
+    if (!doc || !shown.layout) return { nodes: [], edges: [] };
+    const placed = new Set(Object.keys(shown.layout.positions));
+    const graph = {
+      ...doc.graph,
+      nodes: doc.graph.nodes.filter((n) => placed.has(n.id)),
+      groups: doc.graph.groups.filter((g) => placed.has(g.id)),
+      edges: doc.graph.edges.filter((e) => placed.has(e.source) && placed.has(e.target))
+    };
+    return (0, import_canvas19.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_canvas20 = require("@pixerate/editor/canvas");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function mermaidNodeStyle(styles = {}, selected = false) {
+  const paint = (0, import_canvas20.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_canvas20.mermaidNodeMembers)(node.data);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      className: `pixerate-diagram-node ${className}`.trim(),
+      "data-shape": node.shape,
+      "data-selected": selected ? "true" : void 0,
+      style: { position: "relative", width: "100%", height: "100%", ...mermaidNodeStyle(data.resolvedStyles, selected) },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.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_canvas20.mermaidShapePaths)(node.shape, width, height).map((path, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: path.d, style: { ...import_canvas20.MERMAID_SHAPE_PAINT[path.paint], vectorEffect: "non-scaling-stroke" } }, i)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.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_canvas20.mermaidLabelLines)(node.label).map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { style: { fontWeight: members.length ? 600 : void 0 }, children: line }, i)),
+              members.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)("div", { children: m }, i)) })
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function MermaidDiagramGroup({ data, selected, className = "", children }) {
+  const group = data.group;
+  if (!group) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      className: `pixerate-diagram-group ${className}`.trim(),
+      "data-selected": selected ? "true" : void 0,
+      style: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        borderRadius: 8,
+        border: `1px ${selected ? "solid" : "dashed"} ${selected ? "var(--primary, #2563eb)" : data.resolvedStyles?.stroke ?? "var(--border, #cbd5e1)"}`,
+        background: data.resolvedStyles?.fill ?? "var(--muted, rgba(148, 163, 184, 0.08))",
+        color: data.resolvedStyles?.color ?? "var(--muted-foreground, #475569)"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { padding: "6px 10px", fontSize: 12, fontWeight: 600 }, children: (0, import_canvas20.mermaidLabelLines)(group.label).join(" ") }),
+        children
+      ]
+    }
+  );
+}
+
+// src/canvas/MermaidThumbnail.tsx
+var import_react20 = require("react");
+var import_diagram2 = require("@pixerate/editor/diagram");
+var import_canvas21 = require("@pixerate/editor/canvas");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function MermaidThumbnail({ source, className = "", fallback = null, ...options }) {
+  const doc = (0, import_react20.useMemo)(() => typeof source === "string" ? (0, import_diagram2.parseMermaid)(source) : source, [source]);
+  const key = JSON.stringify(options);
+  const drawn = (0, import_react20.useMemo)(
+    () => doc.tier === "editable" && doc.graph.nodes.length ? (0, import_canvas21.mermaidThumbnailSvg)(doc, options) : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [doc, key]
+  );
+  if (!drawn) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: fallback });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `pixerate-diagram-thumbnail ${className}`.trim(), style: { display: "inline-block", lineHeight: 0 }, dangerouslySetInnerHTML: { __html: drawn.svg } });
+}
+
+// src/canvas/useDiagramDirector.ts
+var import_react21 = require("react");
+var import_diagram3 = require("@pixerate/editor/diagram");
+function useDiagramDirector(controller, options) {
+  const placement = (0, import_react21.useRef)(options.placement);
+  placement.current = options.placement;
+  const ref = (0, import_react21.useRef)(null);
+  if (!ref.current) {
+    const presence = new import_diagram3.PresenceStore();
+    ref.current = {
+      presence,
+      director: new import_diagram3.DiagramDirector(controller, presence, { placement: () => placement.current(), speed: options.speed, clock: options.clock, linger: options.linger })
+    };
+  }
+  return ref.current;
+}
+function usePresenceState(presence) {
+  return (0, import_react21.useSyncExternalStore)(presence.subscribe, presence.getState, presence.getState);
+}
+
+// src/canvas/DiagramPresenceLayer.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function DiagramPresenceLayer({ presence, viewport, className = "" }) {
+  const { actors } = usePresenceState(presence);
+  if (!actors.length) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.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_runtime10.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_runtime10.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:
 0 && (module.exports = {
   ANIMATABLE_PROPERTIES,
@@ -2533,8 +2746,12 @@ var import_canvas27 = require("@pixerate/editor/canvas");
   CanvasInstanceInspector,
   CanvasScenesStore,
   DEFAULT_ARRANGE_SHORTCUTS,
+  DiagramPresenceLayer,
   MAX_KEYFRAME_REFS,
   ManualClock,
+  MermaidDiagramGroup,
+  MermaidDiagramNode,
+  MermaidThumbnail,
   RESIZE_HANDLES,
   SHAPE_DATA_KEY,
   SHAPE_KINDS,
@@ -2715,6 +2932,7 @@ var import_canvas27 = require("@pixerate/editor/canvas");
   measureSelection,
   measureToLine,
   mergeNodeUpdates,
+  mermaidNodeStyle,
   mixColorsOklab,
   moveKeyframes,
   moveLayoutChild,
@@ -2832,6 +3050,11 @@ var import_canvas27 = require("@pixerate/editor/canvas");
   useCanvasScenes,
   useCanvasShortcuts,
   useCanvasTokens,
+  useDiagramDirector,
+  useDiagramState,
+  useMermaidDiagram,
+  useMermaidStream,
+  usePresenceState,
   useStreamingCanvas,
   withNodeAnimation,
   withStyleSize,