@pixerate/editor-react 0.51.0 → 0.52.0

package/dist/canvas/index.cjs

@@ -20,323 +20,324 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/canvas/index.ts
 var canvas_exports = {};
 __export(canvas_exports, {
-  ANIMATABLE_PROPERTIES: () => import_canvas30.ANIMATABLE_PROPERTIES,
-  ANIMATION_DATA_KEY: () => import_canvas30.ANIMATION_DATA_KEY,
-  ANIMATION_EASING_LABELS: () => import_canvas30.ANIMATION_EASING_LABELS,
-  ANIMATION_EASING_PRESETS: () => import_canvas30.ANIMATION_EASING_PRESETS,
-  ANIMATION_TIME_EPSILON: () => import_canvas30.ANIMATION_TIME_EPSILON,
-  AUTO_LAYOUT_DATA_KEY: () => import_canvas28.AUTO_LAYOUT_DATA_KEY,
+  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,
   AgentPresenceLayer: () => AgentPresenceLayer,
-  AnimationEditError: () => import_canvas30.AnimationEditError,
-  AnimationPlayer: () => import_canvas30.AnimationPlayer,
+  AnimationEditError: () => import_canvas31.AnimationEditError,
+  AnimationPlayer: () => import_canvas31.AnimationPlayer,
   AnimationTimeline: () => AnimationTimeline,
-  CANVAS_COMPONENT_DRAG_TYPE: () => import_canvas31.CANVAS_COMPONENT_DRAG_TYPE,
-  CANVAS_GRADIENT_PRESETS: () => import_canvas31.CANVAS_GRADIENT_PRESETS,
-  CANVAS_TOKEN_PROPERTIES: () => import_canvas29.CANVAS_TOKEN_PROPERTIES,
-  CHILD_LAYOUT_DATA_KEY: () => import_canvas28.CHILD_LAYOUT_DATA_KEY,
-  CONNECTION_LINE_TYPES: () => import_canvas24.CONNECTION_LINE_TYPES,
-  CSS_ANIMATION_PROPERTIES: () => import_canvas30.CSS_ANIMATION_PROPERTIES,
-  CUBIC_BEZIER_PRESETS: () => import_canvas30.CUBIC_BEZIER_PRESETS,
+  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,
   CanvasComponentsPanel: () => CanvasComponentsPanel,
   CanvasDrawLayer: () => CanvasDrawLayer,
   CanvasGuidesLayer: () => CanvasGuidesLayer,
   CanvasInstanceInspector: () => CanvasInstanceInspector,
-  CanvasScenesStore: () => import_canvas24.CanvasScenesStore,
-  DEFAULT_ARRANGE_SHORTCUTS: () => import_canvas24.DEFAULT_ARRANGE_SHORTCUTS,
+  CanvasScenesStore: () => import_canvas25.CanvasScenesStore,
+  DEFAULT_ARRANGE_SHORTCUTS: () => import_canvas25.DEFAULT_ARRANGE_SHORTCUTS,
   DiagramPresenceLayer: () => DiagramPresenceLayer,
-  MAX_KEYFRAME_REFS: () => import_canvas30.MAX_KEYFRAME_REFS,
-  ManualClock: () => import_canvas27.ManualClock,
+  MAX_KEYFRAME_REFS: () => import_canvas31.MAX_KEYFRAME_REFS,
+  ManualClock: () => import_canvas28.ManualClock,
   MermaidDiagramGroup: () => MermaidDiagramGroup,
   MermaidDiagramNode: () => MermaidDiagramNode,
   MermaidFamilyScene: () => MermaidFamilyScene,
   MermaidThumbnail: () => MermaidThumbnail,
-  RESIZE_HANDLES: () => import_canvas23.RESIZE_HANDLES,
-  SHAPE_DATA_KEY: () => import_canvas25.SHAPE_DATA_KEY,
-  SHAPE_KINDS: () => import_canvas25.SHAPE_KINDS,
-  SHAPE_NODE_TYPE: () => import_canvas25.SHAPE_NODE_TYPE,
-  SHAPE_OPERATIONS: () => import_canvas25.SHAPE_OPERATIONS,
+  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,
   ShapeNode: () => ShapeNode,
-  TOKEN_BINDINGS_DATA_KEY: () => import_canvas29.TOKEN_BINDINGS_DATA_KEY,
-  TOKEN_MODES_DATA_KEY: () => import_canvas29.TOKEN_MODES_DATA_KEY,
+  TOKEN_BINDINGS_DATA_KEY: () => import_canvas30.TOKEN_BINDINGS_DATA_KEY,
+  TOKEN_MODES_DATA_KEY: () => import_canvas30.TOKEN_MODES_DATA_KEY,
   TokenBindingPicker: () => TokenBindingPicker,
   TokenModeSwitcher: () => TokenModeSwitcher,
-  addCanvasVariant: () => import_canvas31.addCanvasVariant,
-  addKeyframesAtTime: () => import_canvas30.addKeyframesAtTime,
-  alignNodes: () => import_canvas24.alignNodes,
-  angleToSvgLinearCoords: () => import_canvas31.angleToSvgLinearCoords,
-  animateNode: () => import_canvas30.animateNode,
-  applyAnimation: () => import_canvas30.applyAnimation,
-  applyAnimationOverrides: () => import_canvas30.applyAnimationOverrides,
-  applyConstraints: () => import_canvas28.applyConstraints,
-  applyNodeUpdates: () => import_canvas24.applyNodeUpdates,
-  applyShapeCombination: () => import_canvas25.applyShapeCombination,
-  applyShapeReplacement: () => import_canvas26.applyShapeReplacement,
-  bezierPathArea: () => import_canvas26.bezierPathArea,
-  bezierPathBounds: () => import_canvas26.bezierPathBounds,
-  bezierPathLength: () => import_canvas26.bezierPathLength,
-  bezierPathPointAtLength: () => import_canvas26.bezierPathPointAtLength,
-  bezierPathSignedArea: () => import_canvas26.bezierPathSignedArea,
-  bezierPathToSvg: () => import_canvas26.bezierPathToSvg,
-  bindCanvasComponentProperty: () => import_canvas31.bindCanvasComponentProperty,
-  bindCanvasToken: () => import_canvas29.bindCanvasToken,
-  blendLayout: () => import_canvas27.blendLayout,
-  boundsOf: () => import_canvas27.boundsOf,
-  calculateDagreReflowDisplacement: () => import_canvas27.calculateDagreReflowDisplacement,
-  calculateDirectionalDisplacement: () => import_canvas27.calculateDirectionalDisplacement,
-  canCombineShapeNodes: () => import_canvas25.canCombineShapeNodes,
-  canOffsetShapeNodes: () => import_canvas26.canOffsetShapeNodes,
-  canOutlineShapeNodeStrokes: () => import_canvas26.canOutlineShapeNodeStrokes,
-  canvasHeight: () => import_canvas27.canvasHeight,
-  centerNodes: () => import_canvas27.centerNodes,
-  centre: () => import_canvas27.centre,
-  clampAnimationValue: () => import_canvas30.clampAnimationValue,
-  clampLayoutSize: () => import_canvas28.clampLayoutSize,
-  combineCanvasComponentsAsVariants: () => import_canvas31.combineCanvasComponentsAsVariants,
-  combineShapeNodes: () => import_canvas25.combineShapeNodes,
-  computeNodesBoundingBox: () => import_canvas27.computeNodesBoundingBox,
-  computeSnapGuides: () => import_canvas24.computeSnapGuides,
-  connectedOnly: () => import_canvas27.connectedOnly,
-  copyKeyframes: () => import_canvas30.copyKeyframes,
-  countPathSegments: () => import_canvas26.countPathSegments,
-  createAnimationPlayer: () => import_canvas30.createAnimationPlayer,
-  createBezierTrajectory: () => import_canvas27.createBezierTrajectory,
-  createCanvasAnimationController: () => import_canvas30.createCanvasAnimationController,
-  createCanvasAutoLayoutController: () => import_canvas28.createCanvasAutoLayoutController,
-  createCanvasComponent: () => import_canvas31.createCanvasComponent,
-  createCanvasComponentsController: () => import_canvas31.createCanvasComponentsController,
-  createCanvasDrawController: () => import_canvas31.createCanvasDrawController,
-  createCanvasInstance: () => import_canvas31.createCanvasInstance,
-  createCanvasScenesStore: () => import_canvas24.createCanvasScenesStore,
-  createDefaultStrokeStyle: () => import_canvas31.createDefaultStrokeStyle,
-  createFanOutTrajectory: () => import_canvas27.createFanOutTrajectory,
-  createGuideIndex: () => import_canvas24.createGuideIndex,
-  createNodeGuideIndex: () => import_canvas24.createNodeGuideIndex,
-  cubicBezierAt: () => import_canvas30.cubicBezierAt,
-  cubicPointAt: () => import_canvas23.cubicPointAt,
-  cubicsToPathData: () => import_canvas23.cubicsToPathData,
-  dashContours: () => import_canvas26.dashContours,
-  defaultEasing: () => import_canvas27.defaultEasing,
-  deleteKeyframes: () => import_canvas30.deleteKeyframes,
-  detachCanvasInstance: () => import_canvas31.detachCanvasInstance,
-  detachTokenBindings: () => import_canvas29.detachTokenBindings,
-  distanceToBezierPath: () => import_canvas26.distanceToBezierPath,
-  distributeNodes: () => import_canvas24.distributeNodes,
-  dividePaths: () => import_canvas26.dividePaths,
-  dividePolygons: () => import_canvas25.dividePolygons,
-  easingFromInfluence: () => import_canvas30.easingFromInfluence,
-  easingLabel: () => import_canvas30.easingLabel,
-  easingToCss: () => import_canvas30.easingToCss,
-  ensureLayout: () => import_canvas27.ensureLayout,
-  estimateCanvasHeight: () => import_canvas27.estimateCanvasHeight,
-  estimateNodeSize: () => import_canvas27.estimateNodeSize,
-  evaluateAnimation: () => import_canvas30.evaluateAnimation,
-  evaluateEasing: () => import_canvas30.evaluateEasing,
-  evaluateTrack: () => import_canvas30.evaluateTrack,
-  excludePaths: () => import_canvas26.excludePaths,
-  exportCssAnimation: () => import_canvas30.exportCssAnimation,
-  findConnectorSnap: () => import_canvas24.findConnectorSnap,
-  findStrokesAtPoint: () => import_canvas31.findStrokesAtPoint,
-  fitCubicRun: () => import_canvas23.fitCubicRun,
-  fitCubics: () => import_canvas23.fitCubics,
-  fitFreehandPath: () => import_canvas23.fitFreehandPath,
-  fitPathData: () => import_canvas23.fitPathData,
-  fitViewportToNodes: () => import_canvas24.fitViewportToNodes,
-  fitViewportToRect: () => import_canvas24.fitViewportToRect,
-  flattenSvgPath: () => import_canvas25.flattenSvgPath,
-  flowSide: () => import_canvas27.flowSide,
-  formatAnimationTime: () => import_canvas30.formatAnimationTime,
-  formatOklab: () => import_canvas30.formatOklab,
-  getAbsolutePosition: () => import_canvas24.getAbsolutePosition,
-  getAnimatableProperty: () => import_canvas30.getAnimatableProperty,
-  getAnimatedProperties: () => import_canvas30.getAnimatedProperties,
-  getAnimatedValue: () => import_canvas30.getAnimatedValue,
-  getAnimationDuration: () => import_canvas30.getAnimationDuration,
-  getAnimationTrack: () => import_canvas30.getAnimationTrack,
-  getAutoLayout: () => import_canvas28.getAutoLayout,
-  getAutoLayoutGrid: () => import_canvas28.getAutoLayoutGrid,
-  getAutoLayoutInsertTarget: () => import_canvas28.getAutoLayoutInsertTarget,
-  getBindableTokenProperties: () => import_canvas29.getBindableTokenProperties,
-  getCanvasComponentDragId: () => import_canvas31.getCanvasComponentDragId,
-  getCanvasTokenProperty: () => import_canvas29.getCanvasTokenProperty,
-  getCenteredNodePosition: () => import_canvas27.getCenteredNodePosition,
-  getChildLayout: () => import_canvas28.getChildLayout,
-  getComponentSourceId: () => import_canvas31.getComponentSourceId,
-  getCssPropertyAnimations: () => import_canvas30.getCssPropertyAnimations,
-  getEffectiveTokenModes: () => import_canvas29.getEffectiveTokenModes,
-  getFlowChildren: () => import_canvas28.getFlowChildren,
-  getInstanceData: () => import_canvas31.getInstanceData,
-  getInstanceStatus: () => import_canvas31.getInstanceStatus,
-  getKeyframeTimes: () => import_canvas30.getKeyframeTimes,
-  getLayoutParent: () => import_canvas28.getLayoutParent,
-  getLayoutSizing: () => import_canvas28.getLayoutSizing,
-  getLayoutedNodes: () => import_canvas27.getLayoutedNodes,
-  getNextVariantValues: () => import_canvas31.getNextVariantValues,
-  getNodeAnimation: () => import_canvas30.getNodeAnimation,
-  getNodeOverrides: () => import_canvas31.getNodeOverrides,
-  getNodeRect: () => import_canvas24.getNodeRect,
-  getNodeShape: () => import_canvas25.getNodeShape,
-  getNodeSize: () => import_canvas24.getNodeSize,
-  getNodeTokenBindings: () => import_canvas29.getNodeTokenBindings,
-  getNodeTokenModes: () => import_canvas29.getNodeTokenModes,
-  getResizingNodeRect: () => import_canvas23.getResizingNodeRect,
-  getShapeRenderData: () => import_canvas25.getShapeRenderData,
-  getShapeSvg: () => import_canvas25.getShapeSvg,
-  getTimelineRows: () => import_canvas30.getTimelineRows,
-  getTimelineTicks: () => import_canvas30.getTimelineTicks,
-  getTokenPropertyScope: () => import_canvas29.getTokenPropertyScope,
-  getTokensForProperty: () => import_canvas29.getTokensForProperty,
-  gradientToSvgDef: () => import_canvas31.gradientToSvgDef,
-  handlePoint: () => import_canvas24.handlePoint,
-  hasVisibleStroke: () => import_canvas26.hasVisibleStroke,
-  inferResizeHandle: () => import_canvas23.inferResizeHandle,
-  inspectCanvasInstance: () => import_canvas31.inspectCanvasInstance,
-  inspectNodeTokens: () => import_canvas29.inspectNodeTokens,
-  interpolateAnimationValue: () => import_canvas30.interpolateAnimationValue,
-  intersectPaths: () => import_canvas26.intersectPaths,
-  intersectPolygons: () => import_canvas25.intersectPolygons,
-  invertNodeUpdates: () => import_canvas24.invertNodeUpdates,
-  isAnimationEasing: () => import_canvas30.isAnimationEasing,
-  isAnimationKeyframe: () => import_canvas30.isAnimationKeyframe,
-  isAutoLayoutFrame: () => import_canvas28.isAutoLayoutFrame,
-  isCanvasComponent: () => import_canvas31.isCanvasComponent,
-  isCanvasComponentSet: () => import_canvas31.isCanvasComponentSet,
-  isCanvasGradient: () => import_canvas31.isCanvasGradient,
-  isCanvasInstance: () => import_canvas31.isCanvasInstance,
-  isCssExportExact: () => import_canvas30.isCssExportExact,
-  isEventFromTextInput: () => import_canvas27.isEventFromTextInput,
-  isKeyframeSelected: () => import_canvas30.isKeyframeSelected,
-  isLocked: () => import_canvas24.isLocked,
-  isMeasureModifierHeld: () => import_canvas23.isMeasureModifierHeld,
-  isNodeAnimated: () => import_canvas30.isNodeAnimated,
-  isShapeDescription: () => import_canvas25.isShapeDescription,
-  isShapeNode: () => import_canvas25.isShapeNode,
-  isStraightCubic: () => import_canvas23.isStraightCubic,
-  isValidCanvasNode: () => import_canvas27.isValidCanvasNode,
-  isValidUrl: () => import_canvas27.isValidUrl,
-  layoutAll: () => import_canvas28.layoutAll,
-  layoutBounds: () => import_canvas27.layoutBounds,
-  layoutFrame: () => import_canvas28.layoutFrame,
-  layoutUp: () => import_canvas28.layoutUp,
-  layoutUpMany: () => import_canvas28.layoutUpMany,
-  linearPositionTrajectory: () => import_canvas27.linearPositionTrajectory,
-  linearTrajectory: () => import_canvas27.linearTrajectory,
-  listCanvasComponents: () => import_canvas31.listCanvasComponents,
-  lockNodes: () => import_canvas24.lockNodes,
-  makeSizingCoherent: () => import_canvas28.makeSizingCoherent,
-  matchArrangeShortcut: () => import_canvas24.matchArrangeShortcut,
-  matchSize: () => import_canvas24.matchSize,
-  measureBetween: () => import_canvas23.measureBetween,
-  measureLabel: () => import_canvas23.measureLabel,
-  measureSelection: () => import_canvas23.measureSelection,
-  measureToLine: () => import_canvas23.measureToLine,
-  mergeNodeUpdates: () => import_canvas28.mergeNodeUpdates,
+  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,
   mermaidNodeStyle: () => mermaidNodeStyle,
-  mixColorsOklab: () => import_canvas30.mixColorsOklab,
-  moveKeyframes: () => import_canvas30.moveKeyframes,
-  moveLayoutChild: () => import_canvas28.moveLayoutChild,
-  multiPolygonArea: () => import_canvas25.multiPolygonArea,
-  multiPolygonBounds: () => import_canvas25.multiPolygonBounds,
-  nearestHandlePositions: () => import_canvas24.nearestHandlePositions,
-  normalizeBezierPath: () => import_canvas26.normalizeBezierPath,
-  normalizeKeyframes: () => import_canvas30.normalizeKeyframes,
-  offsetPath: () => import_canvas26.offsetPath,
-  offsetShapeNodes: () => import_canvas26.offsetShapeNodes,
-  oklabToRgb: () => import_canvas30.oklabToRgb,
-  oppositePosition: () => import_canvas24.oppositePosition,
-  outlineShapeNodeStrokes: () => import_canvas26.outlineShapeNodeStrokes,
-  outlineStroke: () => import_canvas26.outlineStroke,
-  overlaps: () => import_canvas27.overlaps,
-  parseCanvasClipboardData: () => import_canvas27.parseCanvasClipboardData,
-  parseCanvasScenes: () => import_canvas24.parseCanvasScenes,
-  parseCssEasing: () => import_canvas30.parseCssEasing,
-  parseCssGradient: () => import_canvas31.parseCssGradient,
-  parseKeyframeClipboard: () => import_canvas30.parseKeyframeClipboard,
-  parseOklab: () => import_canvas30.parseOklab,
-  parseSvgPath: () => import_canvas25.parseSvgPath,
-  pasteKeyframes: () => import_canvas30.pasteKeyframes,
-  pathBoolean: () => import_canvas26.pathBoolean,
-  placeBeside: () => import_canvas27.placeBeside,
-  playWebAnimations: () => import_canvas30.playWebAnimations,
-  pointInBezierPath: () => import_canvas26.pointInBezierPath,
-  pointInMultiPolygon: () => import_canvas25.pointInMultiPolygon,
-  pointInRings: () => import_canvas25.pointInRings,
-  polygonArea: () => import_canvas25.polygonArea,
-  polygonBoolean: () => import_canvas25.polygonBoolean,
-  polygonToSvgPath: () => import_canvas25.polygonToSvgPath,
-  positionToSide: () => import_canvas24.positionToSide,
-  pruneCanvasTokenModes: () => import_canvas29.pruneCanvasTokenModes,
-  pushCanvasInstanceOverrides: () => import_canvas31.pushCanvasInstanceOverrides,
-  readAnimatableValue: () => import_canvas30.readAnimatableValue,
-  readNodeStyleProperty: () => import_canvas29.readNodeStyleProperty,
-  readStyleSize: () => import_canvas24.readStyleSize,
-  realClock: () => import_canvas27.realClock,
-  recordAnimationChanges: () => import_canvas30.recordAnimationChanges,
-  relayoutUpdates: () => import_canvas28.relayoutUpdates,
-  remapPastedNodes: () => import_canvas27.remapPastedNodes,
-  removeCanvasVariant: () => import_canvas31.removeCanvasVariant,
-  removeTrack: () => import_canvas30.removeTrack,
-  renameCanvasVariantProperty: () => import_canvas31.renameCanvasVariantProperty,
-  renameCanvasVariantValue: () => import_canvas31.renameCanvasVariantValue,
-  reorderNodes: () => import_canvas24.reorderNodes,
-  repositionNodesTo: () => import_canvas27.repositionNodesTo,
-  resetCanvasInstanceOverrides: () => import_canvas31.resetCanvasInstanceOverrides,
-  resizeHandleAxes: () => import_canvas23.resizeHandleAxes,
-  resolveCanvasGradient: () => import_canvas31.resolveCanvasGradient,
-  resolveCanvasTokens: () => import_canvas29.resolveCanvasTokens,
-  resolveEasing: () => import_canvas30.resolveEasing,
-  resolvePadding: () => import_canvas28.resolvePadding,
-  restoreCanvasMainComponent: () => import_canvas31.restoreCanvasMainComponent,
-  revertShapeCombination: () => import_canvas25.revertShapeCombination,
-  rgbToOklab: () => import_canvas30.rgbToOklab,
-  ringSignedArea: () => import_canvas25.ringSignedArea,
-  runMultiNodeTransition: () => import_canvas27.runMultiNodeTransition,
-  sampleAnimationFrames: () => import_canvas30.sampleAnimationFrames,
-  scaleKeyframes: () => import_canvas30.scaleKeyframes,
-  serializeCanvasNodes: () => import_canvas27.serializeCanvasNodes,
-  setCanvasComponentProperty: () => import_canvas31.setCanvasComponentProperty,
-  setCanvasInstanceProperties: () => import_canvas31.setCanvasInstanceProperties,
-  setCanvasTokenMode: () => import_canvas29.setCanvasTokenMode,
-  setCanvasVariantProperties: () => import_canvas31.setCanvasVariantProperties,
-  setKeyframe: () => import_canvas30.setKeyframe,
-  setKeyframeEasing: () => import_canvas30.setKeyframeEasing,
-  setMotionPath: () => import_canvas30.setMotionPath,
-  setTrackEnabled: () => import_canvas30.setTrackEnabled,
-  shapeNodeToBezierPath: () => import_canvas26.shapeNodeToBezierPath,
-  shapeNodeToPolygon: () => import_canvas25.shapeNodeToPolygon,
-  shapeToBezierPath: () => import_canvas26.shapeToBezierPath,
-  shapeToPolygon: () => import_canvas25.shapeToPolygon,
-  sideToPosition: () => import_canvas24.sideToPosition,
-  simplifyRing: () => import_canvas25.simplifyRing,
-  snapKeyframeDelta: () => import_canvas30.snapKeyframeDelta,
-  snapNodeDrag: () => import_canvas24.snapNodeDrag,
-  snapNodeResize: () => import_canvas23.snapNodeResize,
-  snapResize: () => import_canvas23.snapResize,
-  snapTimeToFrame: () => import_canvas30.snapTimeToFrame,
-  snapToGrid: () => import_canvas23.snapToGrid,
-  springAt: () => import_canvas30.springAt,
-  streamlinePoints: () => import_canvas31.streamlinePoints,
-  strokeOutlineRings: () => import_canvas26.strokeOutlineRings,
-  strokePointsToPathData: () => import_canvas31.strokePointsToPathData,
-  strokeToShapeNode: () => import_canvas31.strokeToShapeNode,
-  subtractPaths: () => import_canvas26.subtractPaths,
-  subtractPolygons: () => import_canvas25.subtractPolygons,
-  swapCanvasInstance: () => import_canvas31.swapCanvasInstance,
-  syncAllCanvasInstances: () => import_canvas31.syncAllCanvasInstances,
-  syncCanvasComponents: () => import_canvas31.syncCanvasComponents,
-  syncCanvasInstance: () => import_canvas31.syncCanvasInstance,
-  timeToX: () => import_canvas30.timeToX,
-  toBezierPath: () => import_canvas26.toBezierPath,
-  toWebAnimations: () => import_canvas30.toWebAnimations,
-  toggleLockNodes: () => import_canvas24.toggleLockNodes,
-  transformBezierPath: () => import_canvas26.transformBezierPath,
-  unionPolygons: () => import_canvas25.unionPolygons,
-  unitePaths: () => import_canvas26.unitePaths,
-  unlockNodes: () => import_canvas24.unlockNodes,
-  updateKeyframe: () => import_canvas30.updateKeyframe,
+  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,
   useCanvasAnimation: () => useCanvasAnimation,
   useCanvasArrange: () => useCanvasArrange,
   useCanvasArrangeShortcuts: () => useCanvasArrangeShortcuts,
   useCanvasAutoLayout: () => useCanvasAutoLayout,
+  useCanvasCapture: () => useCanvasCapture,
   useCanvasClipboard: () => useCanvasClipboard,
   useCanvasComponents: () => useCanvasComponents,
   useCanvasDocking: () => useCanvasDocking,
@@ -354,13 +355,13 @@ __export(canvas_exports, {
   useMermaidStream: () => useMermaidStream,
   usePresenceState: () => usePresenceState,
   useStreamingCanvas: () => useStreamingCanvas,
-  withNodeAnimation: () => import_canvas30.withNodeAnimation,
-  withStyleSize: () => import_canvas24.withStyleSize,
-  wouldCreateComponentCycle: () => import_canvas31.wouldCreateComponentCycle,
-  wrapAnimationTime: () => import_canvas30.wrapAnimationTime,
-  writeNodeStyleProperty: () => import_canvas29.writeNodeStyleProperty,
-  xToTime: () => import_canvas30.xToTime,
-  xorPolygons: () => import_canvas25.xorPolygons
+  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
 });
 module.exports = __toCommonJS(canvas_exports);
 
@@ -1234,6 +1235,31 @@ function useCanvasScenes(options = {}) {
   };
 }
 
+// src/canvas/useCanvasCapture.ts
+var import_react10 = require("react");
+var import_canvas8 = require("@pixerate/editor/canvas");
+var import_tools = require("@pixerate/editor/tools");
+function useCanvasCapture(options) {
+  const optionsRef = (0, import_react10.useRef)(options);
+  optionsRef.current = options;
+  return (0, import_react10.useMemo)(() => {
+    const latest = () => optionsRef.current;
+    return (0, import_canvas8.createCanvasCaptureToolProvider)({
+      ...options,
+      element: () => {
+        const el = latest().element;
+        if (typeof el === "function") return el();
+        if (el && "current" in el) return el.current;
+        return el;
+      },
+      getViewport: () => latest().getViewport(),
+      getNodes: () => latest().getNodes(),
+      getNodeRect: (node, nodes) => (latest().getNodeRect ?? import_canvas8.canvasNodeCaptureRect)(node, nodes),
+      rasterize: (element, raster) => (latest().rasterize ?? import_tools.rasterizeElement)(element, raster)
+    });
+  }, [options.id, options.namespace]);
+}
+
 // src/canvas/CanvasGuidesLayer.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var DEFAULT_VIEWPORT = { x: 0, y: 0, zoom: 1 };
@@ -1318,17 +1344,17 @@ function CanvasGuidesLayer({
 }
 
 // src/canvas/useCanvasDraw.ts
-var import_react10 = require("react");
-var import_canvas8 = require("@pixerate/editor/canvas");
+var import_react11 = require("react");
+var import_canvas9 = require("@pixerate/editor/canvas");
 function useCanvasDraw(options) {
-  const nodesRef = (0, import_react10.useRef)(options.nodes);
+  const nodesRef = (0, import_react11.useRef)(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = (0, import_react10.useRef)(options);
+  const optionsRef = (0, import_react11.useRef)(options);
   optionsRef.current = options;
-  const [tool, setToolState] = (0, import_react10.useState)(options.initialTool ?? "select");
-  const [activeStroke, setActiveStroke] = (0, import_react10.useState)(null);
-  const controller = (0, import_react10.useMemo)(
-    () => (0, import_canvas8.createCanvasDrawController)({
+  const [tool, setToolState] = (0, import_react11.useState)(options.initialTool ?? "select");
+  const [activeStroke, setActiveStroke] = (0, import_react11.useState)(null);
+  const controller = (0, import_react11.useMemo)(
+    () => (0, import_canvas9.createCanvasDrawController)({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
         nodesRef.current = next;
@@ -1349,13 +1375,13 @@ function useCanvasDraw(options) {
     }),
     []
   );
-  const [style, setStyleState] = (0, import_react10.useState)(controller.style);
-  (0, import_react10.useEffect)(() => {
+  const [style, setStyleState] = (0, import_react11.useState)(controller.style);
+  (0, import_react11.useEffect)(() => {
     if (options.initialTool && options.initialTool !== controller.tool) {
       controller.setTool(options.initialTool);
     }
   }, [options.initialTool, controller]);
-  return (0, import_react10.useMemo)(
+  return (0, import_react11.useMemo)(
     () => ({
       tool,
       style,
@@ -1374,8 +1400,8 @@ function useCanvasDraw(options) {
 }
 
 // src/canvas/CanvasDrawLayer.tsx
-var import_react11 = require("react");
-var import_canvas9 = require("@pixerate/editor/canvas");
+var import_react12 = require("react");
+var import_canvas10 = require("@pixerate/editor/canvas");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var DEFAULT_VIEWPORT2 = { x: 0, y: 0, zoom: 1 };
 function CanvasDrawLayer({
@@ -1386,10 +1412,10 @@ function CanvasDrawLayer({
   cursor,
   eraserRadius = 12
 }) {
-  const svgRef = (0, import_react11.useRef)(null);
-  const [spaceHeld, setSpaceHeld] = (0, import_react11.useState)(false);
-  const [eraserPos, setEraserPos] = (0, import_react11.useState)(null);
-  (0, import_react11.useEffect)(() => {
+  const svgRef = (0, import_react12.useRef)(null);
+  const [spaceHeld, setSpaceHeld] = (0, import_react12.useState)(false);
+  const [eraserPos, setEraserPos] = (0, import_react12.useState)(null);
+  (0, import_react12.useEffect)(() => {
     function onKeyDown(e) {
       if (e.code === "Space" && !e.repeat) {
         const tag = e.target?.tagName;
@@ -1411,7 +1437,7 @@ function CanvasDrawLayer({
       window.removeEventListener("keyup", onKeyUp);
     };
   }, []);
-  const clientToFlow = (0, import_react11.useCallback)(
+  const clientToFlow = (0, import_react12.useCallback)(
     (clientX, clientY) => {
       if (!svgRef.current) return [0, 0];
       const rect = svgRef.current.getBoundingClientRect();
@@ -1462,9 +1488,9 @@ function CanvasDrawLayer({
     setEraserPos(null);
   };
   const resolvedCursor = cursor ? cursor : spaceHeld ? "grab" : draw.tool === "eraser" ? "crosshair" : draw.tool === "pen" || draw.tool === "highlighter" ? "crosshair" : "default";
-  const strokePath = draw.activeStroke ? (0, import_canvas9.strokePointsToPathData)(draw.activeStroke.points) : null;
-  const activeGradient = draw.activeStroke ? (0, import_canvas9.resolveCanvasGradient)(draw.activeStroke.style.gradient ?? draw.activeStroke.style.color) : null;
-  const resolvedGradientDef = activeGradient ? (0, import_canvas9.gradientToSvgDef)(activeGradient, "active-draw-stroke-gradient") : null;
+  const strokePath = draw.activeStroke ? (0, import_canvas10.strokePointsToPathData)(draw.activeStroke.points) : null;
+  const activeGradient = draw.activeStroke ? (0, import_canvas10.resolveCanvasGradient)(draw.activeStroke.style.gradient ?? draw.activeStroke.style.color) : null;
+  const resolvedGradientDef = activeGradient ? (0, import_canvas10.gradientToSvgDef)(activeGradient, "active-draw-stroke-gradient") : null;
   const strokePaint = resolvedGradientDef ? `url(#${resolvedGradientDef.id})` : draw.activeStroke ? draw.activeStroke.style.color : "currentColor";
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "svg",
@@ -1524,20 +1550,20 @@ function CanvasDrawLayer({
 }
 
 // src/canvas/useCanvasMeasure.ts
-var import_react12 = require("react");
-var import_canvas10 = require("@pixerate/editor/canvas");
+var import_react13 = require("react");
+var import_canvas11 = require("@pixerate/editor/canvas");
 var EMPTY = { guides: [], target: null, selection: null };
 function useCanvasMeasure(options) {
   const { nodes, enabled = true, requireModifier = true, targetElement, rectOptions } = options;
-  const [hoveredId, setHoveredId] = (0, import_react12.useState)(null);
-  const [modifier, setModifier] = (0, import_react12.useState)(false);
-  const optionsRef = (0, import_react12.useRef)(options);
+  const [hoveredId, setHoveredId] = (0, import_react13.useState)(null);
+  const [modifier, setModifier] = (0, import_react13.useState)(false);
+  const optionsRef = (0, import_react13.useRef)(options);
   optionsRef.current = options;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!enabled) return;
     const target = targetElement ?? (typeof window !== "undefined" ? window : null);
     if (!target) return;
-    const onKey = (event) => setModifier((0, import_canvas10.isMeasureModifierHeld)(event));
+    const onKey = (event) => setModifier((0, import_canvas11.isMeasureModifierHeld)(event));
     const onBlur = () => setModifier(false);
     target.addEventListener("keydown", onKey);
     target.addEventListener("keyup", onKey);
@@ -1550,16 +1576,16 @@ function useCanvasMeasure(options) {
     };
   }, [enabled, targetElement]);
   const active = enabled && (!requireModifier || modifier);
-  const result = (0, import_react12.useMemo)(() => {
+  const result = (0, import_react13.useMemo)(() => {
     if (!active) return EMPTY;
     const ids = optionsRef.current.getSelectedIds?.() ?? nodes.filter((n) => n.selected).map((n) => n.id);
-    return (0, import_canvas10.measureSelection)(nodes, ids, hoveredId, rectOptions);
+    return (0, import_canvas11.measureSelection)(nodes, ids, hoveredId, rectOptions);
   }, [active, nodes, hoveredId, rectOptions]);
-  const onNodeMouseEnter = (0, import_react12.useCallback)((event, node) => {
+  const onNodeMouseEnter = (0, import_react13.useCallback)((event, node) => {
     setHoveredId(node.id);
     if (event && typeof event.altKey === "boolean") setModifier(event.altKey);
   }, []);
-  const onNodeMouseLeave = (0, import_react12.useCallback)((_event, node) => {
+  const onNodeMouseLeave = (0, import_react13.useCallback)((_event, node) => {
     setHoveredId((current) => current === node.id ? null : current);
   }, []);
   return {
@@ -1579,16 +1605,16 @@ function useCanvasMeasure(options) {
 }
 
 // src/canvas/index.ts
-var import_canvas23 = require("@pixerate/editor/canvas");
 var import_canvas24 = require("@pixerate/editor/canvas");
+var import_canvas25 = require("@pixerate/editor/canvas");
 
 // src/canvas/ShapeNode.tsx
-var import_canvas11 = require("@pixerate/editor/canvas");
+var import_canvas12 = require("@pixerate/editor/canvas");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function ShapeNode({ id, data, width, height, selected, className = "", children }) {
   const shape = data?.shape;
-  if (!(0, import_canvas11.isShapeDescription)(shape)) return null;
-  const render = (0, import_canvas11.getShapeRenderData)(shape, { width, height }, { id: id || data?.id });
+  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)(
     "div",
     {
@@ -1638,22 +1664,22 @@ function ShapeNode({ id, data, width, height, selected, className = "", children
 }
 
 // src/canvas/index.ts
-var import_canvas25 = require("@pixerate/editor/canvas");
 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");
 
 // src/canvas/useCanvasAutoLayout.ts
-var import_react13 = require("react");
-var import_canvas12 = require("@pixerate/editor/canvas");
+var import_react14 = require("react");
+var import_canvas13 = require("@pixerate/editor/canvas");
 function useCanvasAutoLayout(options) {
-  const [guides, setGuides] = (0, import_react13.useState)([]);
-  const nodesRef = (0, import_react13.useRef)(options.nodes);
+  const [guides, setGuides] = (0, import_react14.useState)([]);
+  const nodesRef = (0, import_react14.useRef)(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = (0, import_react13.useRef)(options);
+  const optionsRef = (0, import_react14.useRef)(options);
   optionsRef.current = options;
-  const controller = (0, import_react13.useMemo)(
-    () => (0, import_canvas12.createCanvasAutoLayoutController)({
+  const controller = (0, import_react14.useMemo)(
+    () => (0, import_canvas13.createCanvasAutoLayoutController)({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
         nodesRef.current = next;
@@ -1678,10 +1704,10 @@ function useCanvasAutoLayout(options) {
     }),
     []
   );
-  (0, import_react13.useLayoutEffect)(() => {
+  (0, import_react14.useLayoutEffect)(() => {
     if (controller.hasPending) controller.flush();
   }, [options.nodes, controller]);
-  return (0, import_react13.useMemo)(
+  return (0, import_react14.useMemo)(
     () => ({
       ...controller,
       /** Drop marker of the active reorder drag (flow coordinates). */
@@ -1695,47 +1721,47 @@ function useCanvasAutoLayout(options) {
 }
 
 // src/canvas/useCanvasTokens.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 useCanvasTokens(options) {
   const { store, nodes, setNodes, modes, properties } = options;
-  const state = (0, import_react14.useSyncExternalStore)(store.subscribe, store.getState, store.getState);
-  const latest = (0, import_react14.useRef)({ nodes, setNodes, modes, properties });
+  const state = (0, import_react15.useSyncExternalStore)(store.subscribe, store.getState, store.getState);
+  const latest = (0, import_react15.useRef)({ nodes, setNodes, modes, properties });
   latest.current = { nodes, setNodes, modes, properties };
   const opts = () => ({ modes: latest.current.modes, properties: latest.current.properties });
-  (0, import_react14.useEffect)(
+  (0, import_react15.useEffect)(
     () => store.subscribe((event) => {
       if (event.deletedVariableIds.length === 0) return;
-      latest.current.setNodes((prev) => (0, import_canvas13.detachTokenBindings)(prev, event.previous, event.deletedVariableIds, opts()));
+      latest.current.setNodes((prev) => (0, import_canvas14.detachTokenBindings)(prev, event.previous, event.deletedVariableIds, opts()));
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [store]
   );
   const modesKey = JSON.stringify(modes ?? {});
-  (0, import_react14.useEffect)(() => {
-    const next = (0, import_canvas13.resolveCanvasTokens)(nodes, state, opts());
+  (0, import_react15.useEffect)(() => {
+    const next = (0, import_canvas14.resolveCanvasTokens)(nodes, state, opts());
     if (next !== nodes) setNodes(next);
   }, [nodes, state, modesKey, properties]);
-  const bind = (0, import_react14.useCallback)(
+  const bind = (0, import_react15.useCallback)(
     (ids, propertyKey, variableId) => {
-      const next = (0, import_canvas13.bindCanvasToken)(latest.current.nodes, ids, propertyKey, variableId, store.getState(), opts());
+      const next = (0, import_canvas14.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_react14.useCallback)(
+  const setMode = (0, import_react15.useCallback)(
     (ids, collectionId, modeId) => {
-      const next = (0, import_canvas13.setCanvasTokenMode)(latest.current.nodes, ids, collectionId, modeId, store.getState(), opts());
+      const next = (0, import_canvas14.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_react14.useCallback)(
+  const modesOf = (0, import_react15.useCallback)(
     (nodeId) => {
       const node = latest.current.nodes.find((n) => n.id === nodeId);
-      return node ? (0, import_canvas13.getEffectiveTokenModes)(node, latest.current.nodes, store.getState(), opts()) : {};
+      return node ? (0, import_canvas14.getEffectiveTokenModes)(node, latest.current.nodes, store.getState(), opts()) : {};
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [store]
@@ -1744,7 +1770,7 @@ function useCanvasTokens(options) {
 }
 
 // src/canvas/TokenBindingPicker.tsx
-var import_canvas14 = require("@pixerate/editor/canvas");
+var import_canvas15 = require("@pixerate/editor/canvas");
 var import_tokens = require("@pixerate/editor/tokens");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function TokenBindingPicker({
@@ -1760,14 +1786,14 @@ function TokenBindingPicker({
   const selected = nodes.filter((n) => selectedIds.includes(n.id));
   const first = selected[0];
   if (!first) return null;
-  let rows = (0, import_canvas14.getBindableTokenProperties)(first, options);
+  let rows = (0, import_canvas15.getBindableTokenProperties)(first, options);
   if (properties) rows = properties.map((key) => rows.find((p) => p.key === key)).filter((p) => !!p);
-  const modes = (0, import_canvas14.getEffectiveTokenModes)(first, nodes, state, options);
+  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: [
     rows.map((property) => {
-      const ids = new Set(selected.map((n) => (0, import_canvas14.getNodeTokenBindings)(n)[property.key] ?? ""));
+      const ids = new Set(selected.map((n) => (0, import_canvas15.getNodeTokenBindings)(n)[property.key] ?? ""));
       const value = ids.size === 1 ? [...ids][0] : "__mixed";
-      const candidates = (0, import_canvas14.getTokensForProperty)(state, property, first);
+      const candidates = (0, import_canvas15.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 }),
@@ -1780,7 +1806,7 @@ function TokenBindingPicker({
             onChange: (e) => {
               const id = e.currentTarget.value || null;
               try {
-                onChange((0, import_canvas14.bindCanvasToken)(nodes, selectedIds, property.key, id, state, options));
+                onChange((0, import_canvas15.bindCanvasToken)(nodes, selectedIds, property.key, id, state, options));
               } catch (error) {
                 onError?.(error);
               }
@@ -1822,9 +1848,9 @@ function TokenModeSwitcher({
 }) {
   const first = nodes.find((n) => nodeIds.includes(n.id));
   if (!first) return null;
-  const own = (0, import_canvas14.getNodeTokenModes)(first);
+  const own = (0, import_canvas15.getNodeTokenModes)(first);
   const parent = first.parentId ? nodes.find((n) => n.id === first.parentId) : void 0;
-  const inherited = parent ? (0, import_canvas14.getEffectiveTokenModes)(parent, nodes, state, options) : { ...options.modes };
+  const inherited = parent ? (0, import_canvas15.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) => {
     const auto = (0, import_tokens.getCurrentMode)(collection, inherited);
@@ -1837,7 +1863,7 @@ function TokenModeSwitcher({
           "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_canvas14.setCanvasTokenMode)(nodes, nodeIds, collection.id, e.currentTarget.value || null, state, options)),
+          onChange: (e) => onChange((0, import_canvas15.setCanvasTokenMode)(nodes, nodeIds, collection.id, e.currentTarget.value || null, state, options)),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("option", { value: "", children: [
               "Auto (",
@@ -1853,18 +1879,18 @@ function TokenModeSwitcher({
 }
 
 // src/canvas/index.ts
-var import_canvas29 = require("@pixerate/editor/canvas");
+var import_canvas30 = require("@pixerate/editor/canvas");
 
 // src/canvas/useCanvasAnimation.ts
-var import_react15 = require("react");
-var import_canvas15 = require("@pixerate/editor/canvas");
+var import_react16 = require("react");
+var import_canvas16 = require("@pixerate/editor/canvas");
 function useCanvasAnimation(options) {
-  const nodesRef = (0, import_react15.useRef)(options.nodes);
+  const nodesRef = (0, import_react16.useRef)(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = (0, import_react15.useRef)(options);
+  const optionsRef = (0, import_react16.useRef)(options);
   optionsRef.current = options;
-  const controller = (0, import_react15.useMemo)(
-    () => (0, import_canvas15.createCanvasAnimationController)({
+  const controller = (0, import_react16.useMemo)(
+    () => (0, import_canvas16.createCanvasAnimationController)({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
         nodesRef.current = next;
@@ -1890,26 +1916,26 @@ function useCanvasAnimation(options) {
     }),
     []
   );
-  (0, import_react15.useEffect)(() => () => controller.destroy(), [controller]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => () => controller.destroy(), [controller]);
+  (0, import_react16.useEffect)(() => {
     if (options.loop !== void 0) controller.setLoop(options.loop);
   }, [controller, options.loop]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (options.playbackRate !== void 0) controller.setPlaybackRate(options.playbackRate);
   }, [controller, options.playbackRate]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (options.recording !== void 0) controller.setRecording(options.recording);
   }, [controller, options.recording]);
-  const state = (0, import_react15.useSyncExternalStore)(
+  const state = (0, import_react16.useSyncExternalStore)(
     (listener) => controller.subscribe(listener),
     () => controller.getState(),
     () => controller.getState()
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     controller.refresh();
   }, [controller, options.nodes]);
-  const displayNodes = (0, import_react15.useMemo)(() => controller.display(options.nodes), [controller, options.nodes, state.time]);
-  return (0, import_react15.useMemo)(
+  const displayNodes = (0, import_react16.useMemo)(() => controller.display(options.nodes), [controller, options.nodes, state.time]);
+  return (0, import_react16.useMemo)(
     () => ({
       ...controller,
       state,
@@ -1930,8 +1956,8 @@ function useCanvasAnimation(options) {
 }
 
 // src/canvas/AnimationTimeline.tsx
-var import_react16 = require("react");
-var import_canvas16 = require("@pixerate/editor/canvas");
+var import_react17 = require("react");
+var import_canvas17 = require("@pixerate/editor/canvas");
 var import_jsx_runtime6 = 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";
@@ -1939,15 +1965,15 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
   const { state } = animation;
   const duration = state.duration;
   const rows = animation.timelineRows(nodeIds ?? void 0, labelOf ? { labelOf } : {});
-  const ticks = (0, import_canvas16.getTimelineTicks)(duration, width);
+  const ticks = (0, import_canvas17.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_react16.useRef)(null);
-  (0, import_react16.useEffect)(() => {
+  const dragRef = (0, import_react17.useRef)(null);
+  (0, import_react17.useEffect)(() => {
     const onKey = (event) => {
       if (event.key === "Escape" && dragRef.current) {
         dragRef.current = null;
@@ -1960,8 +1986,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_canvas16.xToTime)(event.clientX - left, duration, width));
-    const move = (e) => animation.scrub((0, import_canvas16.xToTime)(e.clientX - left, duration, width));
+    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));
     const up = () => {
       window.removeEventListener("pointermove", move);
       window.removeEventListener("pointerup", up);
@@ -2001,7 +2027,7 @@ 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_canvas16.timeToX)(state.time, duration, width);
+  const playheadX = (0, import_canvas17.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: [
@@ -2020,9 +2046,9 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
       ),
       /* @__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_canvas16.formatAnimationTime)(state.time),
+        (0, import_canvas17.formatAnimationTime)(state.time),
         " / ",
-        (0, import_canvas16.formatAnimationTime)(duration)
+        (0, import_canvas17.formatAnimationTime)(duration)
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "select",
@@ -2035,7 +2061,7 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           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_canvas16.ANIMATION_EASING_PRESETS.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: preset, children: import_canvas16.ANIMATION_EASING_LABELS[preset] }, preset)),
+            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
           ]
         }
@@ -2086,17 +2112,17 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
       ] }),
       /* @__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_canvas16.timeToX)(state.drag.target, duration, width) } }) : null,
+        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)(
           "button",
           {
             type: "button",
             "data-keyframe": k.ref.time,
             "aria-pressed": k.selected,
-            "aria-label": `${row.label} keyframe at ${(0, import_canvas16.formatAnimationTime)(k.ref.time)}`,
-            title: `${(0, import_canvas16.formatAnimationTime)(k.time)} \xB7 ${String(k.value)}`,
+            "aria-label": `${row.label} keyframe at ${(0, import_canvas17.formatAnimationTime)(k.ref.time)}`,
+            title: `${(0, import_canvas17.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_canvas16.timeToX)(k.time, duration, width) },
+            style: { left: (0, import_canvas17.timeToX)(k.time, duration, width) },
             onPointerDown: onKeyDown(k.ref)
           },
           k.ref.time
@@ -2107,18 +2133,18 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
 }
 
 // src/canvas/index.ts
-var import_canvas30 = require("@pixerate/editor/canvas");
+var import_canvas31 = require("@pixerate/editor/canvas");
 
 // src/canvas/useCanvasComponents.ts
-var import_react17 = require("react");
-var import_canvas17 = require("@pixerate/editor/canvas");
+var import_react18 = require("react");
+var import_canvas18 = require("@pixerate/editor/canvas");
 function useCanvasComponents(options) {
-  const nodesRef = (0, import_react17.useRef)(options.nodes);
+  const nodesRef = (0, import_react18.useRef)(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = (0, import_react17.useRef)(options);
+  const optionsRef = (0, import_react18.useRef)(options);
   optionsRef.current = options;
-  const controller = (0, import_react17.useMemo)(
-    () => (0, import_canvas17.createCanvasComponentsController)({
+  const controller = (0, import_react18.useMemo)(
+    () => (0, import_canvas18.createCanvasComponentsController)({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
         nodesRef.current = next;
@@ -2146,15 +2172,15 @@ function useCanvasComponents(options) {
     }),
     []
   );
-  (0, import_react17.useLayoutEffect)(() => {
+  (0, import_react18.useLayoutEffect)(() => {
     if (optionsRef.current.autoSync !== false) controller.sync();
   }, [options.nodes, controller]);
   return controller;
 }
 
 // src/canvas/CanvasComponentsPanel.tsx
-var import_react18 = require("react");
-var import_canvas18 = require("@pixerate/editor/canvas");
+var import_react19 = require("react");
+var import_canvas19 = require("@pixerate/editor/canvas");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function InlineField({ value, label, onCommit }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -2188,11 +2214,11 @@ function CanvasComponentsPanel({
   search = true,
   className = ""
 }) {
-  const [query, setQuery] = (0, import_react18.useState)("");
-  const [propsOpen, setPropsOpen] = (0, import_react18.useState)(null);
-  const [menuFor, setMenuFor] = (0, import_react18.useState)(null);
-  const [editing, setEditing] = (0, import_react18.useState)(null);
-  const { components: all, sets } = (0, import_canvas18.listCanvasComponents)(nodes);
+  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 q = query.trim().toLowerCase();
   const match = (name) => !q || name.toLowerCase().includes(q);
   const lone = all.filter((c) => !c.setId && match(c.name));
@@ -2215,7 +2241,7 @@ function CanvasComponentsPanel({
       onClick: () => onInsert(id),
       onContextMenu,
       onDragStart: (e) => {
-        e.dataTransfer.setData(import_canvas18.CANVAS_COMPONENT_DRAG_TYPE, id);
+        e.dataTransfer.setData(import_canvas19.CANVAS_COMPONENT_DRAG_TYPE, id);
         e.dataTransfer.setData("text/plain", name);
         e.dataTransfer.effectAllowed = "copy";
       },
@@ -2409,13 +2435,13 @@ function CanvasInstanceInspector({
   onError,
   className = ""
 }) {
-  const info = nodeId ? (0, import_canvas18.inspectCanvasInstance)(nodes, nodeId) : void 0;
+  const info = nodeId ? (0, import_canvas19.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_canvas18.listCanvasComponents)(nodes).components;
+  const allComponents = (0, import_canvas19.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: [
@@ -2518,11 +2544,11 @@ function CanvasInstanceInspector({
 }
 
 // src/canvas/index.ts
-var import_canvas31 = require("@pixerate/editor/canvas");
+var import_canvas32 = require("@pixerate/editor/canvas");
 
 // src/canvas/MermaidFamilyScene.tsx
-var import_react19 = require("react");
-var import_canvas19 = require("@pixerate/editor/canvas");
+var import_react20 = require("react");
+var import_canvas20 = require("@pixerate/editor/canvas");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function MermaidFamilyScene({
   scene,
@@ -2536,7 +2562,7 @@ function MermaidFamilyScene({
   style,
   title
 }) {
-  const uid = (0, import_react19.useId)().replace(/:/g, "");
+  const uid = (0, import_react20.useId)().replace(/:/g, "");
   const marker = (kind) => kind ? `url(#${uid}-${kind})` : void 0;
   const x = scene.x - padding;
   const y = scene.y - padding;
@@ -2629,7 +2655,7 @@ function MermaidFamilyScene({
                   x: mark.x,
                   y: mark.y,
                   textAnchor: mark.anchor,
-                  dominantBaseline: (0, import_canvas19.diagramTextBaseline)(mark.baseline),
+                  dominantBaseline: (0, import_canvas20.diagramTextBaseline)(mark.baseline),
                   transform: mark.rotate ? `rotate(${mark.rotate} ${mark.x} ${mark.y})` : void 0,
                   style: {
                     fill: mark.selected ? selectionColor : mark.fill,
@@ -2650,14 +2676,14 @@ function MermaidFamilyScene({
 }
 
 // src/canvas/useMermaidDiagram.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_diagram = require("@pixerate/editor/diagram");
-var import_canvas20 = require("@pixerate/editor/canvas");
+var import_canvas21 = require("@pixerate/editor/canvas");
 function useDiagramState(controller) {
-  return (0, import_react20.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
+  return (0, import_react21.useSyncExternalStore)(controller.subscribe, controller.getState, controller.getState);
 }
 function useMermaidDiagram(controllerOrOptions = {}, view = {}) {
-  const own = (0, import_react20.useRef)(null);
+  const own = (0, import_react21.useRef)(null);
   let controller;
   if (controllerOrOptions instanceof import_diagram.DiagramController) controller = controllerOrOptions;
   else {
@@ -2667,24 +2693,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_react20.useMemo)(
-    () => (0, import_canvas20.mermaidToCanvas)(state.document, { ...layoutOptions, editable: state.editable }),
+  const canvas = (0, import_react21.useMemo)(
+    () => (0, import_canvas21.mermaidToCanvas)(state.document, { ...layoutOptions, editable: state.editable }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.document, state.editable]
   );
-  const scene = (0, import_react20.useMemo)(
-    () => state.document.tier === "editable" ? (0, import_canvas20.familySceneFromLayout)(state.document.family, state.document.graph, canvas.layout, { theme: { ...import_canvas20.CSS_VARIABLE_DIAGRAM_SCENE_THEME, ...sceneTheme }, selection: state.selection }) : null,
+  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,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.document, canvas.layout, state.selection]
   );
-  const layoutRef = (0, import_react20.useRef)(canvas.layout);
+  const layoutRef = (0, import_react21.useRef)(canvas.layout);
   layoutRef.current = canvas.layout;
-  const actions = (0, import_react20.useMemo)(
+  const actions = (0, import_react21.useMemo)(
     () => ({
       apply: (ops, label) => controller.apply(ops, label),
       load: (source, options) => controller.load(source, options),
       moveNodes: (moved, all = moved) => {
-        const op = (0, import_canvas20.mermaidMovesFromCanvas)(layoutRef.current, moved, all, { stored: controller.getDocument().meta.layout ?? {} });
+        const op = (0, import_canvas21.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"),
@@ -2703,7 +2729,7 @@ function useMermaidDiagram(controllerOrOptions = {}, view = {}) {
         "Rename"
       ),
       renameTarget: (target, label) => {
-        const op = (0, import_canvas20.diagramRenameOp)(controller.getDocument(), target, label);
+        const op = (0, import_canvas21.diagramRenameOp)(controller.getDocument(), target, label);
         return op ? controller.apply(op, "Rename") : null;
       },
       select: (ids) => controller.select(ids),
@@ -2716,13 +2742,13 @@ function useMermaidDiagram(controllerOrOptions = {}, view = {}) {
 }
 function useMermaidStream(source, options = {}) {
   const { complete = false, duration = 300, ...layoutOptions } = options;
-  const stream = (0, import_react20.useRef)(null);
-  if (!stream.current) stream.current = new import_canvas20.DiagramStream(layoutOptions);
-  const result = (0, import_react20.useMemo)(() => stream.current.update(source, complete), [source, complete]);
-  const [shown, setShown] = (0, import_react20.useState)({ layout: result.layout, settled: true });
-  const shownRef = (0, import_react20.useRef)(shown.layout);
+  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);
   shownRef.current = shown.layout;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const target = result.layout;
     if (!target) return setShown({ layout: null, settled: true });
     const from = shownRef.current;
@@ -2732,14 +2758,14 @@ function useMermaidStream(source, options = {}) {
     const start = performance.now();
     const step = () => {
       const t = Math.min(1, (performance.now() - start) / duration);
-      setShown({ layout: (0, import_canvas20.blendDiagramLayout)(from, target, (0, import_canvas20.easeDiagramTween)(t)), settled: t >= 1 });
+      setShown({ layout: (0, import_canvas21.blendDiagramLayout)(from, target, (0, import_canvas21.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_react20.useMemo)(() => {
+  const canvas = (0, import_react21.useMemo)(() => {
     if (!doc || !shown.layout) return { nodes: [], edges: [] };
     const placed = new Set(Object.keys(shown.layout.positions));
     const graph = {
@@ -2748,23 +2774,23 @@ 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_canvas20.mermaidToCanvas)({ ...doc, graph }, { layout: shown.layout });
+    return (0, import_canvas21.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_canvas21 = require("@pixerate/editor/canvas");
+var import_canvas22 = require("@pixerate/editor/canvas");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function mermaidNodeStyle(styles = {}, selected = false) {
-  const paint = (0, import_canvas21.mermaidNodePaint)(styles, selected);
+  const paint = (0, import_canvas22.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_canvas21.mermaidNodeMembers)(node.data);
+  const members = (0, import_canvas22.mermaidNodeMembers)(node.data);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
@@ -2773,13 +2799,13 @@ 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_canvas21.mermaidShapePaths)(node.shape, width, height).map((path, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: path.d, style: { ...import_canvas21.MERMAID_SHAPE_PAINT[path.paint], vectorEffect: "non-scaling-stroke" } }, i)) }),
+        /* @__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)(
           "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_canvas21.mermaidLabelLines)(node.label).map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontWeight: members.length ? 600 : void 0 }, children: line }, i)),
+              (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)) })
             ]
           }
@@ -2807,7 +2833,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_canvas21.mermaidLabelLines)(group.label).join(" ") }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "6px 10px", fontSize: 12, fontWeight: 600 }, children: (0, import_canvas22.mermaidLabelLines)(group.label).join(" ") }),
         children
       ]
     }
@@ -2815,15 +2841,15 @@ function MermaidDiagramGroup({ data, selected, className = "", children }) {
 }
 
 // src/canvas/MermaidThumbnail.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_diagram2 = require("@pixerate/editor/diagram");
-var import_canvas22 = require("@pixerate/editor/canvas");
+var import_canvas23 = require("@pixerate/editor/canvas");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function MermaidThumbnail({ source, className = "", fallback = null, ...options }) {
-  const doc = (0, import_react21.useMemo)(() => typeof source === "string" ? (0, import_diagram2.parseMermaid)(source) : source, [source]);
+  const doc = (0, import_react22.useMemo)(() => typeof source === "string" ? (0, import_diagram2.parseMermaid)(source) : source, [source]);
   const key = JSON.stringify(options);
-  const drawn = (0, import_react21.useMemo)(
-    () => doc.tier === "editable" && doc.graph.nodes.length ? (0, import_canvas22.mermaidThumbnailSvg)(doc, options) : null,
+  const drawn = (0, import_react22.useMemo)(
+    () => doc.tier === "editable" && doc.graph.nodes.length ? (0, import_canvas23.mermaidThumbnailSvg)(doc, options) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [doc, key]
   );
@@ -2832,12 +2858,12 @@ function MermaidThumbnail({ source, className = "", fallback = null, ...options
 }
 
 // src/canvas/useDiagramDirector.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_diagram3 = require("@pixerate/editor/diagram");
 function useDiagramDirector(controller, options) {
-  const placement = (0, import_react22.useRef)(options.placement);
+  const placement = (0, import_react23.useRef)(options.placement);
   placement.current = options.placement;
-  const ref = (0, import_react22.useRef)(null);
+  const ref = (0, import_react23.useRef)(null);
   if (!ref.current) {
     const presence = new import_diagram3.PresenceStore();
     ref.current = {
@@ -2848,7 +2874,7 @@ function useDiagramDirector(controller, options) {
   return ref.current;
 }
 function usePresenceState(presence) {
-  return (0, import_react22.useSyncExternalStore)(presence.subscribe, presence.getState, presence.getState);
+  return (0, import_react23.useSyncExternalStore)(presence.subscribe, presence.getState, presence.getState);
 }
 
 // src/canvas/DiagramPresenceLayer.tsx
@@ -3180,6 +3206,7 @@ function DiagramPresenceLayer({ presence, viewport, className = "" }) {
   useCanvasArrange,
   useCanvasArrangeShortcuts,
   useCanvasAutoLayout,
+  useCanvasCapture,
   useCanvasClipboard,
   useCanvasComponents,
   useCanvasDocking,