@pixerate/editor-react 0.19.1 → 0.21.0

package/dist/canvas/index.cjs

@@ -20,300 +20,307 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/canvas/index.ts
 var canvas_exports = {};
 __export(canvas_exports, {
-  ANIMATABLE_PROPERTIES: () => import_canvas24.ANIMATABLE_PROPERTIES,
-  ANIMATION_DATA_KEY: () => import_canvas24.ANIMATION_DATA_KEY,
-  ANIMATION_EASING_LABELS: () => import_canvas24.ANIMATION_EASING_LABELS,
-  ANIMATION_EASING_PRESETS: () => import_canvas24.ANIMATION_EASING_PRESETS,
-  ANIMATION_TIME_EPSILON: () => import_canvas24.ANIMATION_TIME_EPSILON,
-  AUTO_LAYOUT_DATA_KEY: () => import_canvas22.AUTO_LAYOUT_DATA_KEY,
+  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,
   AgentPresenceLayer: () => AgentPresenceLayer,
-  AnimationEditError: () => import_canvas24.AnimationEditError,
-  AnimationPlayer: () => import_canvas24.AnimationPlayer,
+  AnimationEditError: () => import_canvas26.AnimationEditError,
+  AnimationPlayer: () => import_canvas26.AnimationPlayer,
   AnimationTimeline: () => AnimationTimeline,
-  CANVAS_COMPONENT_DRAG_TYPE: () => import_canvas25.CANVAS_COMPONENT_DRAG_TYPE,
-  CANVAS_TOKEN_PROPERTIES: () => import_canvas23.CANVAS_TOKEN_PROPERTIES,
-  CHILD_LAYOUT_DATA_KEY: () => import_canvas22.CHILD_LAYOUT_DATA_KEY,
-  CONNECTION_LINE_TYPES: () => import_canvas18.CONNECTION_LINE_TYPES,
-  CSS_ANIMATION_PROPERTIES: () => import_canvas24.CSS_ANIMATION_PROPERTIES,
-  CUBIC_BEZIER_PRESETS: () => import_canvas24.CUBIC_BEZIER_PRESETS,
+  CANVAS_COMPONENT_DRAG_TYPE: () => import_canvas27.CANVAS_COMPONENT_DRAG_TYPE,
+  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,
   CanvasComponentsPanel: () => CanvasComponentsPanel,
+  CanvasDrawLayer: () => CanvasDrawLayer,
   CanvasGuidesLayer: () => CanvasGuidesLayer,
   CanvasInstanceInspector: () => CanvasInstanceInspector,
-  CanvasScenesStore: () => import_canvas18.CanvasScenesStore,
-  DEFAULT_ARRANGE_SHORTCUTS: () => import_canvas18.DEFAULT_ARRANGE_SHORTCUTS,
-  MAX_KEYFRAME_REFS: () => import_canvas24.MAX_KEYFRAME_REFS,
-  ManualClock: () => import_canvas21.ManualClock,
-  RESIZE_HANDLES: () => import_canvas17.RESIZE_HANDLES,
-  SHAPE_DATA_KEY: () => import_canvas19.SHAPE_DATA_KEY,
-  SHAPE_KINDS: () => import_canvas19.SHAPE_KINDS,
-  SHAPE_NODE_TYPE: () => import_canvas19.SHAPE_NODE_TYPE,
-  SHAPE_OPERATIONS: () => import_canvas19.SHAPE_OPERATIONS,
+  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,
   ShapeNode: () => ShapeNode,
-  TOKEN_BINDINGS_DATA_KEY: () => import_canvas23.TOKEN_BINDINGS_DATA_KEY,
-  TOKEN_MODES_DATA_KEY: () => import_canvas23.TOKEN_MODES_DATA_KEY,
+  TOKEN_BINDINGS_DATA_KEY: () => import_canvas25.TOKEN_BINDINGS_DATA_KEY,
+  TOKEN_MODES_DATA_KEY: () => import_canvas25.TOKEN_MODES_DATA_KEY,
   TokenBindingPicker: () => TokenBindingPicker,
   TokenModeSwitcher: () => TokenModeSwitcher,
-  addCanvasVariant: () => import_canvas25.addCanvasVariant,
-  addKeyframesAtTime: () => import_canvas24.addKeyframesAtTime,
-  alignNodes: () => import_canvas18.alignNodes,
-  animateNode: () => import_canvas24.animateNode,
-  applyAnimation: () => import_canvas24.applyAnimation,
-  applyAnimationOverrides: () => import_canvas24.applyAnimationOverrides,
-  applyConstraints: () => import_canvas22.applyConstraints,
-  applyNodeUpdates: () => import_canvas18.applyNodeUpdates,
-  applyShapeCombination: () => import_canvas19.applyShapeCombination,
-  applyShapeReplacement: () => import_canvas20.applyShapeReplacement,
-  bezierPathArea: () => import_canvas20.bezierPathArea,
-  bezierPathBounds: () => import_canvas20.bezierPathBounds,
-  bezierPathLength: () => import_canvas20.bezierPathLength,
-  bezierPathPointAtLength: () => import_canvas20.bezierPathPointAtLength,
-  bezierPathSignedArea: () => import_canvas20.bezierPathSignedArea,
-  bezierPathToSvg: () => import_canvas20.bezierPathToSvg,
-  bindCanvasComponentProperty: () => import_canvas25.bindCanvasComponentProperty,
-  bindCanvasToken: () => import_canvas23.bindCanvasToken,
-  blendLayout: () => import_canvas21.blendLayout,
-  boundsOf: () => import_canvas21.boundsOf,
-  calculateDagreReflowDisplacement: () => import_canvas21.calculateDagreReflowDisplacement,
-  calculateDirectionalDisplacement: () => import_canvas21.calculateDirectionalDisplacement,
-  canCombineShapeNodes: () => import_canvas19.canCombineShapeNodes,
-  canOffsetShapeNodes: () => import_canvas20.canOffsetShapeNodes,
-  canOutlineShapeNodeStrokes: () => import_canvas20.canOutlineShapeNodeStrokes,
-  canvasHeight: () => import_canvas21.canvasHeight,
-  centerNodes: () => import_canvas21.centerNodes,
-  centre: () => import_canvas21.centre,
-  clampAnimationValue: () => import_canvas24.clampAnimationValue,
-  clampLayoutSize: () => import_canvas22.clampLayoutSize,
-  combineCanvasComponentsAsVariants: () => import_canvas25.combineCanvasComponentsAsVariants,
-  combineShapeNodes: () => import_canvas19.combineShapeNodes,
-  computeNodesBoundingBox: () => import_canvas21.computeNodesBoundingBox,
-  computeSnapGuides: () => import_canvas18.computeSnapGuides,
-  connectedOnly: () => import_canvas21.connectedOnly,
-  copyKeyframes: () => import_canvas24.copyKeyframes,
-  countPathSegments: () => import_canvas20.countPathSegments,
-  createAnimationPlayer: () => import_canvas24.createAnimationPlayer,
-  createBezierTrajectory: () => import_canvas21.createBezierTrajectory,
-  createCanvasAnimationController: () => import_canvas24.createCanvasAnimationController,
-  createCanvasAutoLayoutController: () => import_canvas22.createCanvasAutoLayoutController,
-  createCanvasComponent: () => import_canvas25.createCanvasComponent,
-  createCanvasComponentsController: () => import_canvas25.createCanvasComponentsController,
-  createCanvasInstance: () => import_canvas25.createCanvasInstance,
-  createCanvasScenesStore: () => import_canvas18.createCanvasScenesStore,
-  createFanOutTrajectory: () => import_canvas21.createFanOutTrajectory,
-  createGuideIndex: () => import_canvas18.createGuideIndex,
-  createNodeGuideIndex: () => import_canvas18.createNodeGuideIndex,
-  cubicBezierAt: () => import_canvas24.cubicBezierAt,
-  cubicPointAt: () => import_canvas17.cubicPointAt,
-  cubicsToPathData: () => import_canvas17.cubicsToPathData,
-  dashContours: () => import_canvas20.dashContours,
-  defaultEasing: () => import_canvas21.defaultEasing,
-  deleteKeyframes: () => import_canvas24.deleteKeyframes,
-  detachCanvasInstance: () => import_canvas25.detachCanvasInstance,
-  detachTokenBindings: () => import_canvas23.detachTokenBindings,
-  distanceToBezierPath: () => import_canvas20.distanceToBezierPath,
-  distributeNodes: () => import_canvas18.distributeNodes,
-  dividePaths: () => import_canvas20.dividePaths,
-  dividePolygons: () => import_canvas19.dividePolygons,
-  easingFromInfluence: () => import_canvas24.easingFromInfluence,
-  easingLabel: () => import_canvas24.easingLabel,
-  easingToCss: () => import_canvas24.easingToCss,
-  ensureLayout: () => import_canvas21.ensureLayout,
-  estimateCanvasHeight: () => import_canvas21.estimateCanvasHeight,
-  estimateNodeSize: () => import_canvas21.estimateNodeSize,
-  evaluateAnimation: () => import_canvas24.evaluateAnimation,
-  evaluateEasing: () => import_canvas24.evaluateEasing,
-  evaluateTrack: () => import_canvas24.evaluateTrack,
-  excludePaths: () => import_canvas20.excludePaths,
-  exportCssAnimation: () => import_canvas24.exportCssAnimation,
-  findConnectorSnap: () => import_canvas18.findConnectorSnap,
-  fitCubicRun: () => import_canvas17.fitCubicRun,
-  fitCubics: () => import_canvas17.fitCubics,
-  fitFreehandPath: () => import_canvas17.fitFreehandPath,
-  fitPathData: () => import_canvas17.fitPathData,
-  fitViewportToNodes: () => import_canvas18.fitViewportToNodes,
-  fitViewportToRect: () => import_canvas18.fitViewportToRect,
-  flattenSvgPath: () => import_canvas19.flattenSvgPath,
-  flowSide: () => import_canvas21.flowSide,
-  formatAnimationTime: () => import_canvas24.formatAnimationTime,
-  formatOklab: () => import_canvas24.formatOklab,
-  getAbsolutePosition: () => import_canvas18.getAbsolutePosition,
-  getAnimatableProperty: () => import_canvas24.getAnimatableProperty,
-  getAnimatedProperties: () => import_canvas24.getAnimatedProperties,
-  getAnimatedValue: () => import_canvas24.getAnimatedValue,
-  getAnimationDuration: () => import_canvas24.getAnimationDuration,
-  getAnimationTrack: () => import_canvas24.getAnimationTrack,
-  getAutoLayout: () => import_canvas22.getAutoLayout,
-  getAutoLayoutGrid: () => import_canvas22.getAutoLayoutGrid,
-  getAutoLayoutInsertTarget: () => import_canvas22.getAutoLayoutInsertTarget,
-  getBindableTokenProperties: () => import_canvas23.getBindableTokenProperties,
-  getCanvasComponentDragId: () => import_canvas25.getCanvasComponentDragId,
-  getCanvasTokenProperty: () => import_canvas23.getCanvasTokenProperty,
-  getCenteredNodePosition: () => import_canvas21.getCenteredNodePosition,
-  getChildLayout: () => import_canvas22.getChildLayout,
-  getComponentSourceId: () => import_canvas25.getComponentSourceId,
-  getCssPropertyAnimations: () => import_canvas24.getCssPropertyAnimations,
-  getEffectiveTokenModes: () => import_canvas23.getEffectiveTokenModes,
-  getFlowChildren: () => import_canvas22.getFlowChildren,
-  getInstanceData: () => import_canvas25.getInstanceData,
-  getInstanceStatus: () => import_canvas25.getInstanceStatus,
-  getKeyframeTimes: () => import_canvas24.getKeyframeTimes,
-  getLayoutParent: () => import_canvas22.getLayoutParent,
-  getLayoutSizing: () => import_canvas22.getLayoutSizing,
-  getLayoutedNodes: () => import_canvas21.getLayoutedNodes,
-  getNextVariantValues: () => import_canvas25.getNextVariantValues,
-  getNodeAnimation: () => import_canvas24.getNodeAnimation,
-  getNodeOverrides: () => import_canvas25.getNodeOverrides,
-  getNodeRect: () => import_canvas18.getNodeRect,
-  getNodeShape: () => import_canvas19.getNodeShape,
-  getNodeSize: () => import_canvas18.getNodeSize,
-  getNodeTokenBindings: () => import_canvas23.getNodeTokenBindings,
-  getNodeTokenModes: () => import_canvas23.getNodeTokenModes,
-  getResizingNodeRect: () => import_canvas17.getResizingNodeRect,
-  getShapeRenderData: () => import_canvas19.getShapeRenderData,
-  getShapeSvg: () => import_canvas19.getShapeSvg,
-  getTimelineRows: () => import_canvas24.getTimelineRows,
-  getTimelineTicks: () => import_canvas24.getTimelineTicks,
-  getTokenPropertyScope: () => import_canvas23.getTokenPropertyScope,
-  getTokensForProperty: () => import_canvas23.getTokensForProperty,
-  handlePoint: () => import_canvas18.handlePoint,
-  hasVisibleStroke: () => import_canvas20.hasVisibleStroke,
-  inferResizeHandle: () => import_canvas17.inferResizeHandle,
-  inspectCanvasInstance: () => import_canvas25.inspectCanvasInstance,
-  inspectNodeTokens: () => import_canvas23.inspectNodeTokens,
-  interpolateAnimationValue: () => import_canvas24.interpolateAnimationValue,
-  intersectPaths: () => import_canvas20.intersectPaths,
-  intersectPolygons: () => import_canvas19.intersectPolygons,
-  invertNodeUpdates: () => import_canvas18.invertNodeUpdates,
-  isAnimationEasing: () => import_canvas24.isAnimationEasing,
-  isAnimationKeyframe: () => import_canvas24.isAnimationKeyframe,
-  isAutoLayoutFrame: () => import_canvas22.isAutoLayoutFrame,
-  isCanvasComponent: () => import_canvas25.isCanvasComponent,
-  isCanvasComponentSet: () => import_canvas25.isCanvasComponentSet,
-  isCanvasInstance: () => import_canvas25.isCanvasInstance,
-  isCssExportExact: () => import_canvas24.isCssExportExact,
-  isEventFromTextInput: () => import_canvas21.isEventFromTextInput,
-  isKeyframeSelected: () => import_canvas24.isKeyframeSelected,
-  isLocked: () => import_canvas18.isLocked,
-  isMeasureModifierHeld: () => import_canvas17.isMeasureModifierHeld,
-  isNodeAnimated: () => import_canvas24.isNodeAnimated,
-  isShapeDescription: () => import_canvas19.isShapeDescription,
-  isShapeNode: () => import_canvas19.isShapeNode,
-  isStraightCubic: () => import_canvas17.isStraightCubic,
-  isValidCanvasNode: () => import_canvas21.isValidCanvasNode,
-  isValidUrl: () => import_canvas21.isValidUrl,
-  layoutAll: () => import_canvas22.layoutAll,
-  layoutBounds: () => import_canvas21.layoutBounds,
-  layoutFrame: () => import_canvas22.layoutFrame,
-  layoutUp: () => import_canvas22.layoutUp,
-  layoutUpMany: () => import_canvas22.layoutUpMany,
-  linearPositionTrajectory: () => import_canvas21.linearPositionTrajectory,
-  linearTrajectory: () => import_canvas21.linearTrajectory,
-  listCanvasComponents: () => import_canvas25.listCanvasComponents,
-  lockNodes: () => import_canvas18.lockNodes,
-  makeSizingCoherent: () => import_canvas22.makeSizingCoherent,
-  matchArrangeShortcut: () => import_canvas18.matchArrangeShortcut,
-  matchSize: () => import_canvas18.matchSize,
-  measureBetween: () => import_canvas17.measureBetween,
-  measureLabel: () => import_canvas17.measureLabel,
-  measureSelection: () => import_canvas17.measureSelection,
-  measureToLine: () => import_canvas17.measureToLine,
-  mergeNodeUpdates: () => import_canvas22.mergeNodeUpdates,
-  mixColorsOklab: () => import_canvas24.mixColorsOklab,
-  moveKeyframes: () => import_canvas24.moveKeyframes,
-  moveLayoutChild: () => import_canvas22.moveLayoutChild,
-  multiPolygonArea: () => import_canvas19.multiPolygonArea,
-  multiPolygonBounds: () => import_canvas19.multiPolygonBounds,
-  nearestHandlePositions: () => import_canvas18.nearestHandlePositions,
-  normalizeBezierPath: () => import_canvas20.normalizeBezierPath,
-  normalizeKeyframes: () => import_canvas24.normalizeKeyframes,
-  offsetPath: () => import_canvas20.offsetPath,
-  offsetShapeNodes: () => import_canvas20.offsetShapeNodes,
-  oklabToRgb: () => import_canvas24.oklabToRgb,
-  oppositePosition: () => import_canvas18.oppositePosition,
-  outlineShapeNodeStrokes: () => import_canvas20.outlineShapeNodeStrokes,
-  outlineStroke: () => import_canvas20.outlineStroke,
-  overlaps: () => import_canvas21.overlaps,
-  parseCanvasClipboardData: () => import_canvas21.parseCanvasClipboardData,
-  parseCanvasScenes: () => import_canvas18.parseCanvasScenes,
-  parseCssEasing: () => import_canvas24.parseCssEasing,
-  parseKeyframeClipboard: () => import_canvas24.parseKeyframeClipboard,
-  parseOklab: () => import_canvas24.parseOklab,
-  parseSvgPath: () => import_canvas19.parseSvgPath,
-  pasteKeyframes: () => import_canvas24.pasteKeyframes,
-  pathBoolean: () => import_canvas20.pathBoolean,
-  placeBeside: () => import_canvas21.placeBeside,
-  playWebAnimations: () => import_canvas24.playWebAnimations,
-  pointInBezierPath: () => import_canvas20.pointInBezierPath,
-  pointInMultiPolygon: () => import_canvas19.pointInMultiPolygon,
-  pointInRings: () => import_canvas19.pointInRings,
-  polygonArea: () => import_canvas19.polygonArea,
-  polygonBoolean: () => import_canvas19.polygonBoolean,
-  polygonToSvgPath: () => import_canvas19.polygonToSvgPath,
-  positionToSide: () => import_canvas18.positionToSide,
-  pruneCanvasTokenModes: () => import_canvas23.pruneCanvasTokenModes,
-  pushCanvasInstanceOverrides: () => import_canvas25.pushCanvasInstanceOverrides,
-  readAnimatableValue: () => import_canvas24.readAnimatableValue,
-  readNodeStyleProperty: () => import_canvas23.readNodeStyleProperty,
-  readStyleSize: () => import_canvas18.readStyleSize,
-  realClock: () => import_canvas21.realClock,
-  recordAnimationChanges: () => import_canvas24.recordAnimationChanges,
-  relayoutUpdates: () => import_canvas22.relayoutUpdates,
-  remapPastedNodes: () => import_canvas21.remapPastedNodes,
-  removeCanvasVariant: () => import_canvas25.removeCanvasVariant,
-  removeTrack: () => import_canvas24.removeTrack,
-  renameCanvasVariantProperty: () => import_canvas25.renameCanvasVariantProperty,
-  renameCanvasVariantValue: () => import_canvas25.renameCanvasVariantValue,
-  reorderNodes: () => import_canvas18.reorderNodes,
-  repositionNodesTo: () => import_canvas21.repositionNodesTo,
-  resetCanvasInstanceOverrides: () => import_canvas25.resetCanvasInstanceOverrides,
-  resizeHandleAxes: () => import_canvas17.resizeHandleAxes,
-  resolveCanvasTokens: () => import_canvas23.resolveCanvasTokens,
-  resolveEasing: () => import_canvas24.resolveEasing,
-  resolvePadding: () => import_canvas22.resolvePadding,
-  restoreCanvasMainComponent: () => import_canvas25.restoreCanvasMainComponent,
-  revertShapeCombination: () => import_canvas19.revertShapeCombination,
-  rgbToOklab: () => import_canvas24.rgbToOklab,
-  ringSignedArea: () => import_canvas19.ringSignedArea,
-  runMultiNodeTransition: () => import_canvas21.runMultiNodeTransition,
-  sampleAnimationFrames: () => import_canvas24.sampleAnimationFrames,
-  scaleKeyframes: () => import_canvas24.scaleKeyframes,
-  serializeCanvasNodes: () => import_canvas21.serializeCanvasNodes,
-  setCanvasComponentProperty: () => import_canvas25.setCanvasComponentProperty,
-  setCanvasInstanceProperties: () => import_canvas25.setCanvasInstanceProperties,
-  setCanvasTokenMode: () => import_canvas23.setCanvasTokenMode,
-  setCanvasVariantProperties: () => import_canvas25.setCanvasVariantProperties,
-  setKeyframe: () => import_canvas24.setKeyframe,
-  setKeyframeEasing: () => import_canvas24.setKeyframeEasing,
-  setMotionPath: () => import_canvas24.setMotionPath,
-  setTrackEnabled: () => import_canvas24.setTrackEnabled,
-  shapeNodeToBezierPath: () => import_canvas20.shapeNodeToBezierPath,
-  shapeNodeToPolygon: () => import_canvas19.shapeNodeToPolygon,
-  shapeToBezierPath: () => import_canvas20.shapeToBezierPath,
-  shapeToPolygon: () => import_canvas19.shapeToPolygon,
-  sideToPosition: () => import_canvas18.sideToPosition,
-  simplifyRing: () => import_canvas19.simplifyRing,
-  snapKeyframeDelta: () => import_canvas24.snapKeyframeDelta,
-  snapNodeDrag: () => import_canvas18.snapNodeDrag,
-  snapNodeResize: () => import_canvas17.snapNodeResize,
-  snapResize: () => import_canvas17.snapResize,
-  snapTimeToFrame: () => import_canvas24.snapTimeToFrame,
-  snapToGrid: () => import_canvas17.snapToGrid,
-  springAt: () => import_canvas24.springAt,
-  strokeOutlineRings: () => import_canvas20.strokeOutlineRings,
-  subtractPaths: () => import_canvas20.subtractPaths,
-  subtractPolygons: () => import_canvas19.subtractPolygons,
-  swapCanvasInstance: () => import_canvas25.swapCanvasInstance,
-  syncAllCanvasInstances: () => import_canvas25.syncAllCanvasInstances,
-  syncCanvasComponents: () => import_canvas25.syncCanvasComponents,
-  syncCanvasInstance: () => import_canvas25.syncCanvasInstance,
-  timeToX: () => import_canvas24.timeToX,
-  toBezierPath: () => import_canvas20.toBezierPath,
-  toWebAnimations: () => import_canvas24.toWebAnimations,
-  toggleLockNodes: () => import_canvas18.toggleLockNodes,
-  transformBezierPath: () => import_canvas20.transformBezierPath,
-  unionPolygons: () => import_canvas19.unionPolygons,
-  unitePaths: () => import_canvas20.unitePaths,
-  unlockNodes: () => import_canvas18.unlockNodes,
-  updateKeyframe: () => import_canvas24.updateKeyframe,
+  addCanvasVariant: () => import_canvas27.addCanvasVariant,
+  addKeyframesAtTime: () => import_canvas26.addKeyframesAtTime,
+  alignNodes: () => import_canvas20.alignNodes,
+  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,
+  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,
+  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,
+  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,
+  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,
   useCanvasAnimation: () => useCanvasAnimation,
   useCanvasArrange: () => useCanvasArrange,
   useCanvasArrangeShortcuts: () => useCanvasArrangeShortcuts,
@@ -321,6 +328,7 @@ __export(canvas_exports, {
   useCanvasClipboard: () => useCanvasClipboard,
   useCanvasComponents: () => useCanvasComponents,
   useCanvasDocking: () => useCanvasDocking,
+  useCanvasDraw: () => useCanvasDraw,
   useCanvasExplosion: () => useCanvasExplosion,
   useCanvasGraph: () => useCanvasGraph,
   useCanvasLayout: () => useCanvasLayout,
@@ -329,13 +337,13 @@ __export(canvas_exports, {
   useCanvasShortcuts: () => useCanvasShortcuts,
   useCanvasTokens: () => useCanvasTokens,
   useStreamingCanvas: () => useStreamingCanvas,
-  withNodeAnimation: () => import_canvas24.withNodeAnimation,
-  withStyleSize: () => import_canvas18.withStyleSize,
-  wouldCreateComponentCycle: () => import_canvas25.wouldCreateComponentCycle,
-  wrapAnimationTime: () => import_canvas24.wrapAnimationTime,
-  writeNodeStyleProperty: () => import_canvas23.writeNodeStyleProperty,
-  xToTime: () => import_canvas24.xToTime,
-  xorPolygons: () => import_canvas19.xorPolygons
+  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
 });
 module.exports = __toCommonJS(canvas_exports);
 
@@ -1292,21 +1300,219 @@ function CanvasGuidesLayer({
   );
 }
 
-// src/canvas/useCanvasMeasure.ts
+// src/canvas/useCanvasDraw.ts
 var import_react10 = require("react");
 var import_canvas8 = require("@pixerate/editor/canvas");
+function useCanvasDraw(options) {
+  const nodesRef = (0, import_react10.useRef)(options.nodes);
+  nodesRef.current = options.nodes;
+  const optionsRef = (0, import_react10.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)({
+      getNodes: () => nodesRef.current,
+      setNodes: (next) => {
+        nodesRef.current = next;
+        optionsRef.current.setNodes(next);
+      },
+      get history() {
+        return optionsRef.current.history;
+      },
+      tool: options.initialTool ?? "select",
+      style: options.initialStyle,
+      drawOptions: options.drawOptions,
+      generateNodeId: options.generateNodeId,
+      onToolChange: setToolState,
+      onStyleChange: (s) => setStyleState(s),
+      onActiveStrokeChange: setActiveStroke,
+      onStrokeComplete: (n) => optionsRef.current.onStrokeComplete?.(n),
+      onNodesErase: (erased) => optionsRef.current.onNodesErase?.(erased)
+    }),
+    []
+  );
+  const [style, setStyleState] = (0, import_react10.useState)(controller.style);
+  (0, import_react10.useEffect)(() => {
+    if (options.initialTool && options.initialTool !== controller.tool) {
+      controller.setTool(options.initialTool);
+    }
+  }, [options.initialTool, controller]);
+  return (0, import_react10.useMemo)(
+    () => ({
+      tool,
+      style,
+      activeStroke,
+      isDrawing: activeStroke !== null,
+      setTool: controller.setTool,
+      setStyle: controller.setStyle,
+      startStroke: controller.startStroke,
+      continueStroke: controller.continueStroke,
+      endStroke: controller.endStroke,
+      cancelStroke: controller.cancelStroke,
+      eraseAt: controller.eraseAt
+    }),
+    [tool, style, activeStroke, controller]
+  );
+}
+
+// src/canvas/CanvasDrawLayer.tsx
+var import_react11 = require("react");
+var import_canvas9 = require("@pixerate/editor/canvas");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DEFAULT_VIEWPORT2 = { x: 0, y: 0, zoom: 1 };
+function CanvasDrawLayer({
+  draw,
+  viewport = DEFAULT_VIEWPORT2,
+  className = "",
+  style,
+  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)(() => {
+    function onKeyDown(e) {
+      if (e.code === "Space" && !e.repeat) {
+        const tag = e.target?.tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || e.target?.isContentEditable) {
+          return;
+        }
+        setSpaceHeld(true);
+      }
+    }
+    function onKeyUp(e) {
+      if (e.code === "Space") {
+        setSpaceHeld(false);
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
+    };
+  }, []);
+  const clientToFlow = (0, import_react11.useCallback)(
+    (clientX, clientY) => {
+      if (!svgRef.current) return [0, 0];
+      const rect = svgRef.current.getBoundingClientRect();
+      const screenX = clientX - rect.left;
+      const screenY = clientY - rect.top;
+      const flowX = (screenX - viewport.x) / viewport.zoom;
+      const flowY = (screenY - viewport.y) / viewport.zoom;
+      return [flowX, flowY];
+    },
+    [viewport.x, viewport.y, viewport.zoom]
+  );
+  const isDrawingMode = draw.tool !== "select";
+  const interactive = isDrawingMode && !spaceHeld;
+  const handlePointerDown = (e) => {
+    if (!interactive || e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    e.target.setPointerCapture?.(e.pointerId);
+    const flowPt = clientToFlow(e.clientX, e.clientY);
+    draw.startStroke(flowPt);
+    if (draw.tool === "eraser") {
+      setEraserPos([e.clientX, e.clientY]);
+    }
+  };
+  const handlePointerMove = (e) => {
+    if (draw.tool === "eraser" && !spaceHeld) {
+      setEraserPos([e.clientX, e.clientY]);
+    }
+    if (!interactive) return;
+    if (e.buttons === 1) {
+      e.preventDefault();
+      e.stopPropagation();
+      const flowPt = clientToFlow(e.clientX, e.clientY);
+      draw.continueStroke(flowPt);
+    }
+  };
+  const handlePointerUp = (e) => {
+    if (!interactive || e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      e.target.releasePointerCapture?.(e.pointerId);
+    } catch {
+    }
+    draw.endStroke();
+  };
+  const handlePointerLeave = () => {
+    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;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "svg",
+    {
+      ref: svgRef,
+      className: `pixerate-canvas-draw-layer ${className}`,
+      style: {
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: interactive ? "all" : "none",
+        cursor: interactive ? resolvedCursor : void 0,
+        overflow: "visible",
+        zIndex: 20,
+        touchAction: "none",
+        ...style
+      },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerLeave: handlePointerLeave,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { transform: `translate(${viewport.x}, ${viewport.y}) scale(${viewport.zoom})`, children: draw.activeStroke && strokePath && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            d: strokePath,
+            fill: "none",
+            stroke: draw.activeStroke.style.color,
+            strokeWidth: draw.activeStroke.style.width,
+            opacity: draw.activeStroke.style.opacity,
+            strokeLinecap: draw.activeStroke.style.cap ?? "round",
+            strokeLinejoin: draw.activeStroke.style.join ?? "round"
+          }
+        ) }),
+        draw.tool === "eraser" && eraserPos && svgRef.current && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "circle",
+          {
+            cx: eraserPos[0] - svgRef.current.getBoundingClientRect().left,
+            cy: eraserPos[1] - svgRef.current.getBoundingClientRect().top,
+            r: eraserRadius,
+            fill: "rgba(239, 68, 68, 0.15)",
+            stroke: "rgba(239, 68, 68, 0.8)",
+            strokeWidth: 1.5,
+            strokeDasharray: "3 3",
+            pointerEvents: "none"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/canvas/useCanvasMeasure.ts
+var import_react12 = require("react");
+var import_canvas10 = 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_react10.useState)(null);
-  const [modifier, setModifier] = (0, import_react10.useState)(false);
-  const optionsRef = (0, import_react10.useRef)(options);
+  const [hoveredId, setHoveredId] = (0, import_react12.useState)(null);
+  const [modifier, setModifier] = (0, import_react12.useState)(false);
+  const optionsRef = (0, import_react12.useRef)(options);
   optionsRef.current = options;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!enabled) return;
     const target = targetElement ?? (typeof window !== "undefined" ? window : null);
     if (!target) return;
-    const onKey = (event) => setModifier((0, import_canvas8.isMeasureModifierHeld)(event));
+    const onKey = (event) => setModifier((0, import_canvas10.isMeasureModifierHeld)(event));
     const onBlur = () => setModifier(false);
     target.addEventListener("keydown", onKey);
     target.addEventListener("keyup", onKey);
@@ -1319,16 +1525,16 @@ function useCanvasMeasure(options) {
     };
   }, [enabled, targetElement]);
   const active = enabled && (!requireModifier || modifier);
-  const result = (0, import_react10.useMemo)(() => {
+  const result = (0, import_react12.useMemo)(() => {
     if (!active) return EMPTY;
     const ids = optionsRef.current.getSelectedIds?.() ?? nodes.filter((n) => n.selected).map((n) => n.id);
-    return (0, import_canvas8.measureSelection)(nodes, ids, hoveredId, rectOptions);
+    return (0, import_canvas10.measureSelection)(nodes, ids, hoveredId, rectOptions);
   }, [active, nodes, hoveredId, rectOptions]);
-  const onNodeMouseEnter = (0, import_react10.useCallback)((event, node) => {
+  const onNodeMouseEnter = (0, import_react12.useCallback)((event, node) => {
     setHoveredId(node.id);
     if (event && typeof event.altKey === "boolean") setModifier(event.altKey);
   }, []);
-  const onNodeMouseLeave = (0, import_react10.useCallback)((_event, node) => {
+  const onNodeMouseLeave = (0, import_react12.useCallback)((_event, node) => {
     setHoveredId((current) => current === node.id ? null : current);
   }, []);
   return {
@@ -1348,17 +1554,17 @@ function useCanvasMeasure(options) {
 }
 
 // src/canvas/index.ts
-var import_canvas17 = require("@pixerate/editor/canvas");
-var import_canvas18 = require("@pixerate/editor/canvas");
+var import_canvas19 = require("@pixerate/editor/canvas");
+var import_canvas20 = require("@pixerate/editor/canvas");
 
 // src/canvas/ShapeNode.tsx
-var import_canvas9 = require("@pixerate/editor/canvas");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_canvas11 = require("@pixerate/editor/canvas");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function ShapeNode({ data, width, height, selected, className = "", children }) {
   const shape = data?.shape;
-  if (!(0, import_canvas9.isShapeDescription)(shape)) return null;
-  const render = (0, import_canvas9.getShapeRenderData)(shape, { width, height });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  if (!(0, import_canvas11.isShapeDescription)(shape)) return null;
+  const render = (0, import_canvas11.getShapeRenderData)(shape, { width, height });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       className: `pixerate-shape-node ${className}`.trim(),
@@ -1366,7 +1572,7 @@ function ShapeNode({ data, width, height, selected, className = "", children })
       "data-selected": selected ? "true" : void 0,
       style: { position: "relative", width: "100%", height: "100%" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "svg",
           {
             viewBox: render.viewBox,
@@ -1375,7 +1581,7 @@ function ShapeNode({ data, width, height, selected, className = "", children })
             height: "100%",
             style: { display: "block", overflow: "visible" },
             "aria-hidden": "true",
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "path",
               {
                 d: render.d,
@@ -1397,22 +1603,22 @@ function ShapeNode({ data, width, height, selected, className = "", children })
 }
 
 // src/canvas/index.ts
-var import_canvas19 = require("@pixerate/editor/canvas");
-var import_canvas20 = require("@pixerate/editor/canvas");
 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");
 
 // src/canvas/useCanvasAutoLayout.ts
-var import_react11 = require("react");
-var import_canvas10 = require("@pixerate/editor/canvas");
+var import_react13 = require("react");
+var import_canvas12 = require("@pixerate/editor/canvas");
 function useCanvasAutoLayout(options) {
-  const [guides, setGuides] = (0, import_react11.useState)([]);
-  const nodesRef = (0, import_react11.useRef)(options.nodes);
+  const [guides, setGuides] = (0, import_react13.useState)([]);
+  const nodesRef = (0, import_react13.useRef)(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = (0, import_react11.useRef)(options);
+  const optionsRef = (0, import_react13.useRef)(options);
   optionsRef.current = options;
-  const controller = (0, import_react11.useMemo)(
-    () => (0, import_canvas10.createCanvasAutoLayoutController)({
+  const controller = (0, import_react13.useMemo)(
+    () => (0, import_canvas12.createCanvasAutoLayoutController)({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
         nodesRef.current = next;
@@ -1437,10 +1643,10 @@ function useCanvasAutoLayout(options) {
     }),
     []
   );
-  (0, import_react11.useLayoutEffect)(() => {
+  (0, import_react13.useLayoutEffect)(() => {
     if (controller.hasPending) controller.flush();
   }, [options.nodes, controller]);
-  return (0, import_react11.useMemo)(
+  return (0, import_react13.useMemo)(
     () => ({
       ...controller,
       /** Drop marker of the active reorder drag (flow coordinates). */
@@ -1454,47 +1660,47 @@ function useCanvasAutoLayout(options) {
 }
 
 // src/canvas/useCanvasTokens.ts
-var import_react12 = require("react");
-var import_canvas11 = require("@pixerate/editor/canvas");
+var import_react14 = require("react");
+var import_canvas13 = require("@pixerate/editor/canvas");
 function useCanvasTokens(options) {
   const { store, nodes, setNodes, modes, properties } = options;
-  const state = (0, import_react12.useSyncExternalStore)(store.subscribe, store.getState, store.getState);
-  const latest = (0, import_react12.useRef)({ nodes, setNodes, modes, properties });
+  const state = (0, import_react14.useSyncExternalStore)(store.subscribe, store.getState, store.getState);
+  const latest = (0, import_react14.useRef)({ nodes, setNodes, modes, properties });
   latest.current = { nodes, setNodes, modes, properties };
   const opts = () => ({ modes: latest.current.modes, properties: latest.current.properties });
-  (0, import_react12.useEffect)(
+  (0, import_react14.useEffect)(
     () => store.subscribe((event) => {
       if (event.deletedVariableIds.length === 0) return;
-      latest.current.setNodes((prev) => (0, import_canvas11.detachTokenBindings)(prev, event.previous, event.deletedVariableIds, opts()));
+      latest.current.setNodes((prev) => (0, import_canvas13.detachTokenBindings)(prev, event.previous, event.deletedVariableIds, opts()));
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [store]
   );
   const modesKey = JSON.stringify(modes ?? {});
-  (0, import_react12.useEffect)(() => {
-    const next = (0, import_canvas11.resolveCanvasTokens)(nodes, state, opts());
+  (0, import_react14.useEffect)(() => {
+    const next = (0, import_canvas13.resolveCanvasTokens)(nodes, state, opts());
     if (next !== nodes) setNodes(next);
   }, [nodes, state, modesKey, properties]);
-  const bind = (0, import_react12.useCallback)(
+  const bind = (0, import_react14.useCallback)(
     (ids, propertyKey, variableId) => {
-      const next = (0, import_canvas11.bindCanvasToken)(latest.current.nodes, ids, propertyKey, variableId, store.getState(), opts());
+      const next = (0, import_canvas13.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_react12.useCallback)(
+  const setMode = (0, import_react14.useCallback)(
     (ids, collectionId, modeId) => {
-      const next = (0, import_canvas11.setCanvasTokenMode)(latest.current.nodes, ids, collectionId, modeId, store.getState(), opts());
+      const next = (0, import_canvas13.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_react12.useCallback)(
+  const modesOf = (0, import_react14.useCallback)(
     (nodeId) => {
       const node = latest.current.nodes.find((n) => n.id === nodeId);
-      return node ? (0, import_canvas11.getEffectiveTokenModes)(node, latest.current.nodes, store.getState(), opts()) : {};
+      return node ? (0, import_canvas13.getEffectiveTokenModes)(node, latest.current.nodes, store.getState(), opts()) : {};
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [store]
@@ -1503,9 +1709,9 @@ function useCanvasTokens(options) {
 }
 
 // src/canvas/TokenBindingPicker.tsx
-var import_canvas12 = require("@pixerate/editor/canvas");
+var import_canvas14 = require("@pixerate/editor/canvas");
 var import_tokens = require("@pixerate/editor/tokens");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function TokenBindingPicker({
   state,
   nodes,
@@ -1519,18 +1725,18 @@ function TokenBindingPicker({
   const selected = nodes.filter((n) => selectedIds.includes(n.id));
   const first = selected[0];
   if (!first) return null;
-  let rows = (0, import_canvas12.getBindableTokenProperties)(first, options);
+  let rows = (0, import_canvas14.getBindableTokenProperties)(first, options);
   if (properties) rows = properties.map((key) => rows.find((p) => p.key === key)).filter((p) => !!p);
-  const modes = (0, import_canvas12.getEffectiveTokenModes)(first, nodes, state, options);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { "data-token-binding-picker": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: [
+  const modes = (0, import_canvas14.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_canvas12.getNodeTokenBindings)(n)[property.key] ?? ""));
+      const ids = new Set(selected.map((n) => (0, import_canvas14.getNodeTokenBindings)(n)[property.key] ?? ""));
       const value = ids.size === 1 ? [...ids][0] : "__mixed";
-      const candidates = (0, import_canvas12.getTokensForProperty)(state, property, first);
+      const candidates = (0, import_canvas14.getTokensForProperty)(state, property, first);
       const resolved = value && value !== "__mixed" ? (0, import_tokens.resolveToken)(state, value, modes) : null;
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center gap-2", "data-token-property": property.key, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-28 shrink-0 text-muted-foreground", children: property.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center gap-2", "data-token-property": property.key, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-28 shrink-0 text-muted-foreground", children: property.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "select",
           {
             "aria-label": `${property.label} variable`,
@@ -1539,17 +1745,17 @@ function TokenBindingPicker({
             onChange: (e) => {
               const id = e.currentTarget.value || null;
               try {
-                onChange((0, import_canvas12.bindCanvasToken)(nodes, selectedIds, property.key, id, state, options));
+                onChange((0, import_canvas14.bindCanvasToken)(nodes, selectedIds, property.key, id, state, options));
               } catch (error) {
                 onError?.(error);
               }
             },
             children: [
-              value === "__mixed" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "__mixed", children: "Mixed" }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "", children: "None" }),
+              value === "__mixed" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "__mixed", children: "Mixed" }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: "None" }),
               candidates.map((v) => {
                 const collection = state.collections.find((c) => c.id === v.collectionId);
-                return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("option", { value: v.id, children: [
+                return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("option", { value: v.id, children: [
                   v.name,
                   collection && state.collections.length > 1 ? ` (${collection.name})` : ""
                 ] }, v.id);
@@ -1557,17 +1763,17 @@ function TokenBindingPicker({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-16 shrink-0 truncate text-right text-muted-foreground", "data-token-resolved": "", children: resolved?.ok ? property.type === "color" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-16 shrink-0 truncate text-right text-muted-foreground", "data-token-resolved": "", children: resolved?.ok ? property.type === "color" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "span",
           {
             className: "inline-block h-3 w-3 rounded border border-border align-middle",
             style: { background: String(resolved.value) },
             title: String(resolved.value)
           }
-        ) : String(resolved.value) : resolved ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { title: resolved.message, children: "\u26A0" }) : null })
+        ) : String(resolved.value) : resolved ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { title: resolved.message, children: "\u26A0" }) : null })
       ] }, property.key);
     }),
-    state.collections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-muted-foreground", children: "No variables yet." }) : null
+    state.collections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-muted-foreground", children: "No variables yet." }) : null
   ] });
 }
 function TokenModeSwitcher({
@@ -1581,29 +1787,29 @@ function TokenModeSwitcher({
 }) {
   const first = nodes.find((n) => nodeIds.includes(n.id));
   if (!first) return null;
-  const own = (0, import_canvas12.getNodeTokenModes)(first);
+  const own = (0, import_canvas14.getNodeTokenModes)(first);
   const parent = first.parentId ? nodes.find((n) => n.id === first.parentId) : void 0;
-  const inherited = parent ? (0, import_canvas12.getEffectiveTokenModes)(parent, nodes, state, options) : { ...options.modes };
+  const inherited = parent ? (0, import_canvas14.getEffectiveTokenModes)(parent, nodes, state, options) : { ...options.modes };
   const collections = state.collections.filter((c) => showSingleMode || c.modes.length > 1);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-token-mode-switcher": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: collections.map((collection) => {
+  return /* @__PURE__ */ (0, import_jsx_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);
     const explicit = collection.modes.some((m) => m.id === own[collection.id]) ? own[collection.id] : "";
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center gap-2", "data-token-collection": collection.id, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-28 shrink-0 truncate text-muted-foreground", children: collection.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center gap-2", "data-token-collection": collection.id, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-28 shrink-0 truncate text-muted-foreground", children: collection.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "select",
         {
           "aria-label": `${collection.name} mode`,
           className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
           value: explicit,
-          onChange: (e) => onChange((0, import_canvas12.setCanvasTokenMode)(nodes, nodeIds, collection.id, e.currentTarget.value || null, state, options)),
+          onChange: (e) => onChange((0, import_canvas14.setCanvasTokenMode)(nodes, nodeIds, collection.id, e.currentTarget.value || null, state, options)),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("option", { value: "", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("option", { value: "", children: [
               "Auto (",
               auto.name,
               ")"
             ] }),
-            collection.modes.map((m) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: m.id, children: m.name }, m.id))
+            collection.modes.map((m) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: m.id, children: m.name }, m.id))
           ]
         }
       )
@@ -1612,18 +1818,18 @@ function TokenModeSwitcher({
 }
 
 // src/canvas/index.ts
-var import_canvas23 = require("@pixerate/editor/canvas");
+var import_canvas25 = require("@pixerate/editor/canvas");
 
 // src/canvas/useCanvasAnimation.ts
-var import_react13 = require("react");
-var import_canvas13 = require("@pixerate/editor/canvas");
+var import_react15 = require("react");
+var import_canvas15 = require("@pixerate/editor/canvas");
 function useCanvasAnimation(options) {
-  const nodesRef = (0, import_react13.useRef)(options.nodes);
+  const nodesRef = (0, import_react15.useRef)(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = (0, import_react13.useRef)(options);
+  const optionsRef = (0, import_react15.useRef)(options);
   optionsRef.current = options;
-  const controller = (0, import_react13.useMemo)(
-    () => (0, import_canvas13.createCanvasAnimationController)({
+  const controller = (0, import_react15.useMemo)(
+    () => (0, import_canvas15.createCanvasAnimationController)({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
         nodesRef.current = next;
@@ -1649,26 +1855,26 @@ function useCanvasAnimation(options) {
     }),
     []
   );
-  (0, import_react13.useEffect)(() => () => controller.destroy(), [controller]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => () => controller.destroy(), [controller]);
+  (0, import_react15.useEffect)(() => {
     if (options.loop !== void 0) controller.setLoop(options.loop);
   }, [controller, options.loop]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (options.playbackRate !== void 0) controller.setPlaybackRate(options.playbackRate);
   }, [controller, options.playbackRate]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (options.recording !== void 0) controller.setRecording(options.recording);
   }, [controller, options.recording]);
-  const state = (0, import_react13.useSyncExternalStore)(
+  const state = (0, import_react15.useSyncExternalStore)(
     (listener) => controller.subscribe(listener),
     () => controller.getState(),
     () => controller.getState()
   );
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     controller.refresh();
   }, [controller, options.nodes]);
-  const displayNodes = (0, import_react13.useMemo)(() => controller.display(options.nodes), [controller, options.nodes, state.time]);
-  return (0, import_react13.useMemo)(
+  const displayNodes = (0, import_react15.useMemo)(() => controller.display(options.nodes), [controller, options.nodes, state.time]);
+  return (0, import_react15.useMemo)(
     () => ({
       ...controller,
       state,
@@ -1689,24 +1895,24 @@ function useCanvasAnimation(options) {
 }
 
 // src/canvas/AnimationTimeline.tsx
-var import_react14 = require("react");
-var import_canvas14 = require("@pixerate/editor/canvas");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_canvas16 = 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";
 function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8, labelOf, className = "" }) {
   const { state } = animation;
   const duration = state.duration;
   const rows = animation.timelineRows(nodeIds ?? void 0, labelOf ? { labelOf } : {});
-  const ticks = (0, import_canvas14.getTimelineTicks)(duration, width);
+  const ticks = (0, import_canvas16.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_react14.useRef)(null);
-  (0, import_react14.useEffect)(() => {
+  const dragRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
     const onKey = (event) => {
       if (event.key === "Escape" && dragRef.current) {
         dragRef.current = null;
@@ -1719,8 +1925,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_canvas14.xToTime)(event.clientX - left, duration, width));
-    const move = (e) => animation.scrub((0, import_canvas14.xToTime)(e.clientX - left, duration, width));
+    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));
     const up = () => {
       window.removeEventListener("pointermove", move);
       window.removeEventListener("pointerup", up);
@@ -1760,12 +1966,12 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
     }
   };
   const btn = "rounded border border-border px-2 py-0.5 text-xs hover:bg-muted disabled:opacity-50";
-  const playheadX = (0, import_canvas14.timeToX)(state.time, duration, width);
+  const playheadX = (0, import_canvas16.timeToX)(state.time, duration, width);
   const labelWidth = 120;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsxs)("div", { className: "flex flex-wrap items-center gap-2", role: "toolbar", "aria-label": "Animation", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: btn, "data-action": "toggle-play", "aria-label": state.playing ? "Pause" : "Play", onClick: () => animation.toggle(), children: state.playing ? "\u275A\u275A" : "\u25B6" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-animation-timeline": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, tabIndex: 0, onKeyDown: onTimelineKey, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap items-center gap-2", role: "toolbar", "aria-label": "Animation", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: btn, "data-action": "toggle-play", "aria-label": state.playing ? "Pause" : "Play", onClick: () => animation.toggle(), children: state.playing ? "\u275A\u275A" : "\u25B6" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "button",
         {
           type: "button",
@@ -1777,13 +1983,13 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           children: "\u25CF Rec"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: btn, "data-action": "add-keyframe", onClick: () => animation.addKeyframe(), children: "\u25C6 Key" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { "data-time": "", className: "tabular-nums text-muted-foreground", children: [
-        (0, import_canvas14.formatAnimationTime)(state.time),
+      /* @__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_canvas14.formatAnimationTime)(duration)
+        (0, import_canvas16.formatAnimationTime)(duration)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "select",
         {
           "aria-label": "Easing",
@@ -1793,13 +1999,13 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           disabled: state.selection.length === 0,
           onChange: (e) => e.target.value && e.target.value !== "custom" && animation.setEasing(e.target.value),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "", children: "Easing\u2026" }),
-            import_canvas14.ANIMATION_EASING_PRESETS.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: preset, children: import_canvas14.ANIMATION_EASING_LABELS[preset] }, preset)),
-            selectedEasing === "custom" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "custom", children: "Custom" }) : null
+            /* @__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)),
+            selectedEasing === "custom" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "custom", children: "Custom" }) : null
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "select",
         {
           "aria-label": "Loop",
@@ -1807,13 +2013,13 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           className: "rounded border border-border bg-background px-1 py-0.5",
           value: state.loop,
           onChange: (e) => animation.setLoop(e.target.value),
-          children: Object.keys(LOOP_LABELS).map((mode) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: mode, children: LOOP_LABELS[mode] }, mode))
+          children: Object.keys(LOOP_LABELS).map((mode) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: mode, children: LOOP_LABELS[mode] }, mode))
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { width: labelWidth }, className: "shrink-0" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: labelWidth }, className: "shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "div",
         {
           "data-timeline-ruler": "",
@@ -1821,15 +2027,15 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
           style: { width },
           onPointerDown: onRulerDown,
           children: [
-            ticks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "absolute top-0 -translate-x-1/2 text-[10px] text-muted-foreground", style: { left: tick.x }, children: tick.label }, tick.time)),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-playhead": "", className: "absolute top-0 h-5 w-px bg-red-500", style: { left: playheadX } })
+            ticks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute top-0 -translate-x-1/2 text-[10px] text-muted-foreground", style: { left: tick.x }, children: tick.label }, tick.time)),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-playhead": "", className: "absolute top-0 h-5 w-px bg-red-500", style: { left: playheadX } })
           ]
         }
       )
     ] }),
-    rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-muted-foreground", "data-timeline-empty": "", children: "Select an animated node, or press \u25C6 Key to add a keyframe." }) : rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center", "data-track": row.id, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex shrink-0 items-center gap-1 truncate pr-2", style: { width: labelWidth }, title: `${row.nodeLabel} \xB7 ${row.label}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-muted-foreground", "data-timeline-empty": "", children: "Select an animated node, or press \u25C6 Key to add a keyframe." }) : rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center", "data-track": row.id, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex shrink-0 items-center gap-1 truncate pr-2", style: { width: labelWidth }, title: `${row.nodeLabel} \xB7 ${row.label}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "input",
           {
             type: "checkbox",
@@ -1838,24 +2044,24 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
             onChange: (e) => animation.setTrackEnabled(row.nodeId, row.property, e.target.checked)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "truncate", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "truncate", children: [
           rows.filter((r) => r.nodeId === row.nodeId).length < rows.length ? `${row.nodeLabel} \xB7 ` : "",
           row.label
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { "data-lane": "", className: `relative h-5 rounded bg-muted/40 ${row.enabled ? "" : "opacity-50"}`, style: { width }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsx)("div", { "data-snap-target": "", className: "pointer-events-none absolute top-0 h-5 w-px bg-sky-400", style: { left: (0, import_canvas14.timeToX)(state.drag.target, duration, width) } }) : null,
-        row.keyframes.map((k) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__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,
+        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_canvas14.formatAnimationTime)(k.ref.time)}`,
-            title: `${(0, import_canvas14.formatAnimationTime)(k.time)} \xB7 ${String(k.value)}`,
+            "aria-label": `${row.label} keyframe at ${(0, import_canvas16.formatAnimationTime)(k.ref.time)}`,
+            title: `${(0, import_canvas16.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_canvas14.timeToX)(k.time, duration, width) },
+            style: { left: (0, import_canvas16.timeToX)(k.time, duration, width) },
             onPointerDown: onKeyDown(k.ref)
           },
           k.ref.time
@@ -1866,18 +2072,18 @@ function AnimationTimeline({ animation, nodeIds, width = 360, snapThreshold = 8,
 }
 
 // src/canvas/index.ts
-var import_canvas24 = require("@pixerate/editor/canvas");
+var import_canvas26 = require("@pixerate/editor/canvas");
 
 // src/canvas/useCanvasComponents.ts
-var import_react15 = require("react");
-var import_canvas15 = require("@pixerate/editor/canvas");
+var import_react17 = require("react");
+var import_canvas17 = require("@pixerate/editor/canvas");
 function useCanvasComponents(options) {
-  const nodesRef = (0, import_react15.useRef)(options.nodes);
+  const nodesRef = (0, import_react17.useRef)(options.nodes);
   nodesRef.current = options.nodes;
-  const optionsRef = (0, import_react15.useRef)(options);
+  const optionsRef = (0, import_react17.useRef)(options);
   optionsRef.current = options;
-  const controller = (0, import_react15.useMemo)(
-    () => (0, import_canvas15.createCanvasComponentsController)({
+  const controller = (0, import_react17.useMemo)(
+    () => (0, import_canvas17.createCanvasComponentsController)({
       getNodes: () => nodesRef.current,
       setNodes: (next) => {
         nodesRef.current = next;
@@ -1905,18 +2111,18 @@ function useCanvasComponents(options) {
     }),
     []
   );
-  (0, import_react15.useLayoutEffect)(() => {
+  (0, import_react17.useLayoutEffect)(() => {
     if (optionsRef.current.autoSync !== false) controller.sync();
   }, [options.nodes, controller]);
   return controller;
 }
 
 // src/canvas/CanvasComponentsPanel.tsx
-var import_react16 = require("react");
-var import_canvas16 = require("@pixerate/editor/canvas");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_canvas18 = require("@pixerate/editor/canvas");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function InlineField({ value, label, onCommit }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "input",
     {
       type: "text",
@@ -1947,11 +2153,11 @@ function CanvasComponentsPanel({
   search = true,
   className = ""
 }) {
-  const [query, setQuery] = (0, import_react16.useState)("");
-  const [propsOpen, setPropsOpen] = (0, import_react16.useState)(null);
-  const [menuFor, setMenuFor] = (0, import_react16.useState)(null);
-  const [editing, setEditing] = (0, import_react16.useState)(null);
-  const { components: all, sets } = (0, import_canvas16.listCanvasComponents)(nodes);
+  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 q = query.trim().toLowerCase();
   const match = (name) => !q || name.toLowerCase().includes(q);
   const lone = all.filter((c) => !c.setId && match(c.name));
@@ -1962,7 +2168,7 @@ function CanvasComponentsPanel({
   };
   const small = "shrink-0 rounded px-1 text-[10px] text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40";
   const menuItem = "rounded px-2 py-0.5 text-left hover:bg-muted disabled:opacity-40";
-  const item = (id, name, count, extra = {}, onContextMenu) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  const item = (id, name, count, extra = {}, onContextMenu) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "button",
     {
       type: "button",
@@ -1974,22 +2180,22 @@ function CanvasComponentsPanel({
       onClick: () => onInsert(id),
       onContextMenu,
       onDragStart: (e) => {
-        e.dataTransfer.setData(import_canvas16.CANVAS_COMPONENT_DRAG_TYPE, id);
+        e.dataTransfer.setData(import_canvas18.CANVAS_COMPONENT_DRAG_TYPE, id);
         e.dataTransfer.setData("text/plain", name);
         e.dataTransfer.effectAllowed = "copy";
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "truncate", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": true, className: "mr-1 text-muted-foreground", children: "\u25C7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "truncate", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": true, className: "mr-1 text-muted-foreground", children: "\u25C7" }),
           name
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-[10px] text-muted-foreground", "data-instance-count": "", children: count })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[10px] text-muted-foreground", "data-instance-count": "", children: count })
       ]
     },
     id
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-components-panel": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: [
-    search ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-components-panel": "", className: `flex flex-col gap-1 text-xs text-foreground ${className}`, children: [
+    search ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "input",
       {
         type: "search",
@@ -1999,11 +2205,11 @@ function CanvasComponentsPanel({
         onInput: (e) => setQuery(e.target.value)
       }
     ) : null,
-    shownSets.map((set) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-component-set": set.id, className: "flex flex-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-1", children: [
+    shownSets.map((set) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-component-set": set.id, className: "flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1", children: [
         item(set.id, set.name, set.variants.reduce((sum, v) => sum + v.instanceCount, 0), { "data-kind": "set" }),
-        components ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        components ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               type: "button",
@@ -2015,7 +2221,7 @@ function CanvasComponentsPanel({
               children: "+\xA0Variant"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               type: "button",
@@ -2030,8 +2236,8 @@ function CanvasComponentsPanel({
           )
         ] }) : null
       ] }),
-      components && propsOpen === set.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-variant-properties": set.id, className: "ml-3 flex flex-col gap-1 border-l border-border py-1 pl-2", children: set.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-variant-option": option.name, className: "flex flex-col gap-0.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      components && propsOpen === set.id ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "data-variant-properties": set.id, className: "ml-3 flex flex-col gap-1 border-l border-border py-1 pl-2", children: set.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-variant-option": option.name, className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           InlineField,
           {
             value: option.name,
@@ -2039,7 +2245,7 @@ function CanvasComponentsPanel({
             onCommit: (next) => report(components.renameVariantProperty(option.name, next, set.id))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ml-2 flex flex-wrap gap-1", children: option.values.map((value) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ml-2 flex flex-wrap gap-1", children: option.values.map((value) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           InlineField,
           {
             value,
@@ -2049,8 +2255,8 @@ function CanvasComponentsPanel({
           value
         )) })
       ] }, option.name)) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ml-3 flex flex-col border-l border-border pl-1", children: set.variants.map((v) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-variant-row": v.id, className: "flex flex-col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ml-3 flex flex-col border-l border-border pl-1", children: set.variants.map((v) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-variant-row": v.id, className: "flex flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1", children: [
           item(
             v.id,
             v.name,
@@ -2061,7 +2267,7 @@ function CanvasComponentsPanel({
               setMenuFor(v.id);
             } : void 0
           ),
-          components ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          components ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               type: "button",
@@ -2075,8 +2281,8 @@ function CanvasComponentsPanel({
             }
           ) : null
         ] }),
-        components && menuFor === v.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { role: "menu", "data-variant-menu": v.id, className: "ml-2 flex flex-col rounded border border-border bg-background p-1 shadow", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        components && menuFor === v.id ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { role: "menu", "data-variant-menu": v.id, className: "ml-2 flex flex-col rounded border border-border bg-background p-1 shadow", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               type: "button",
@@ -2090,7 +2296,7 @@ function CanvasComponentsPanel({
               children: "Edit values\u2026"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               type: "button",
@@ -2104,7 +2310,7 @@ function CanvasComponentsPanel({
               children: "Duplicate"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               type: "button",
@@ -2121,7 +2327,7 @@ function CanvasComponentsPanel({
             }
           )
         ] }) : null,
-        components && editing === v.id ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        components && editing === v.id ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "form",
           {
             "data-variant-editor": v.id,
@@ -2135,9 +2341,9 @@ function CanvasComponentsPanel({
               if (report(components.setVariantProperties(values, v.id))) setEditing(null);
             },
             children: [
-              set.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-16 shrink-0 truncate text-muted-foreground", children: option.name }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              set.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-16 shrink-0 truncate text-muted-foreground", children: option.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "input",
                   {
                     type: "text",
@@ -2148,9 +2354,9 @@ function CanvasComponentsPanel({
                   }
                 )
               ] }, option.name)),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex gap-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "submit", className: "rounded border border-border px-2 py-0.5 hover:bg-muted", "data-action": "save-variant", children: "Save" }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "rounded px-2 py-0.5 hover:bg-muted", "data-action": "cancel-variant", onClick: () => setEditing(null), children: "Cancel" })
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "submit", className: "rounded border border-border px-2 py-0.5 hover:bg-muted", "data-action": "save-variant", children: "Save" }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "rounded px-2 py-0.5 hover:bg-muted", "data-action": "cancel-variant", onClick: () => setEditing(null), children: "Cancel" })
               ] })
             ]
           }
@@ -2158,7 +2364,7 @@ function CanvasComponentsPanel({
       ] }, v.id)) })
     ] }, set.id)),
     lone.map((c) => item(c.id, c.name, c.instanceCount, { "data-kind": "component" })),
-    all.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-muted-foreground", children: "No components yet. Select a frame and choose Create Component." }) : null
+    all.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-muted-foreground", children: "No components yet. Select a frame and choose Create Component." }) : null
   ] });
 }
 function CanvasInstanceInspector({
@@ -2168,36 +2374,36 @@ function CanvasInstanceInspector({
   onError,
   className = ""
 }) {
-  const info = nodeId ? (0, import_canvas16.inspectCanvasInstance)(nodes, nodeId) : void 0;
+  const info = nodeId ? (0, import_canvas18.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_canvas16.listCanvasComponents)(nodes).components;
+  const allComponents = (0, import_canvas18.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_runtime6.jsxs)("div", { "data-instance-inspector": "", "data-instance-id": info.id, className: `flex flex-col gap-2 text-xs text-foreground ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate font-medium", "data-instance-main": "", children: linked ? info.componentName : "Main component missing" }),
-      info.nested ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-muted-foreground", children: "Nested" }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-instance-inspector": "", "data-instance-id": info.id, className: `flex flex-col gap-2 text-xs text-foreground ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate font-medium", "data-instance-main": "", children: linked ? info.componentName : "Main component missing" }),
+      info.nested ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-muted-foreground", children: "Nested" }) : null
     ] }),
-    info.variantOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-2", "data-variant-property": option.name, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: option.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    info.variantOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-2", "data-variant-property": option.name, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: option.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "select",
         {
           "aria-label": `${option.name} variant`,
           className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
           value: info.variant[option.name] ?? "",
           onChange: (e) => setProp(option.name, e.currentTarget.value),
-          children: option.values.map((v) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: v, children: v }, v))
+          children: option.values.map((v) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: v, children: v }, v))
         }
       )
     ] }, option.name)),
-    info.properties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-2", "data-component-property": p.name, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: p.name }),
-      p.type === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "checkbox", "aria-label": p.name, checked: p.value === true, onChange: (e) => setProp(p.name, e.currentTarget.checked) }) : p.type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    info.properties.map((p) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-2", "data-component-property": p.name, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "w-24 shrink-0 truncate text-muted-foreground", children: p.name }),
+      p.type === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "checkbox", "aria-label": p.name, checked: p.value === true, onChange: (e) => setProp(p.name, e.currentTarget.checked) }) : p.type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "input",
         {
           type: "text",
@@ -2212,22 +2418,22 @@ function CanvasInstanceInspector({
           }
         },
         String(p.value)
-      ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "select",
         {
           "aria-label": p.name,
           className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
           value: String(p.value),
           onChange: (e) => setProp(p.name, e.currentTarget.value),
-          children: allComponents.filter((c) => !p.preferred?.length || p.preferred.includes(c.id) || c.id === p.value).map((c) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: c.id, children: c.name }, c.id))
+          children: allComponents.filter((c) => !p.preferred?.length || p.preferred.includes(c.id) || c.id === p.value).map((c) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: c.id, children: c.name }, c.id))
         }
       )
     ] }, p.name)),
-    info.overrides.length ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-1", "data-instance-overrides": "", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-muted-foreground", children: "Overrides" }),
-      info.overrides.map((o) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap items-center gap-1", "data-override-layer": o.id, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "mr-1 truncate", children: o.name }),
-        o.groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    info.overrides.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-1", "data-instance-overrides": "", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-muted-foreground", children: "Overrides" }),
+      info.overrides.map((o) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap items-center gap-1", "data-override-layer": o.id, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mr-1 truncate", children: o.name }),
+        o.groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "button",
           {
             type: "button",
@@ -2244,11 +2450,11 @@ function CanvasInstanceInspector({
         ))
       ] }, o.id))
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-      linked ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: btn, "data-action": "reset", onClick: () => report(components.resetOverrides(info.id)), children: "Reset all" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: btn, "data-action": "go-to-main", onClick: () => components.goToMainComponent(info.id), children: "Go to main" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+      linked ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: btn, "data-action": "reset", onClick: () => report(components.resetOverrides(info.id)), children: "Reset all" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: btn, "data-action": "go-to-main", onClick: () => components.goToMainComponent(info.id), children: "Go to main" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "button",
           {
             type: "button",
@@ -2259,8 +2465,8 @@ function CanvasInstanceInspector({
             children: "Push changes"
           }
         )
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: btn, "data-action": "restore", onClick: () => report(components.restoreMainComponent(info.rootId)), children: "Restore main component" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: btn, "data-action": "restore", onClick: () => report(components.restoreMainComponent(info.rootId)), children: "Restore main component" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "button",
@@ -2277,7 +2483,7 @@ function CanvasInstanceInspector({
 }
 
 // src/canvas/index.ts
-var import_canvas25 = require("@pixerate/editor/canvas");
+var import_canvas27 = require("@pixerate/editor/canvas");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ANIMATABLE_PROPERTIES,
@@ -2297,6 +2503,7 @@ var import_canvas25 = require("@pixerate/editor/canvas");
   CSS_ANIMATION_PROPERTIES,
   CUBIC_BEZIER_PRESETS,
   CanvasComponentsPanel,
+  CanvasDrawLayer,
   CanvasGuidesLayer,
   CanvasInstanceInspector,
   CanvasScenesStore,
@@ -2356,8 +2563,10 @@ var import_canvas25 = require("@pixerate/editor/canvas");
   createCanvasAutoLayoutController,
   createCanvasComponent,
   createCanvasComponentsController,
+  createCanvasDrawController,
   createCanvasInstance,
   createCanvasScenesStore,
+  createDefaultStrokeStyle,
   createFanOutTrajectory,
   createGuideIndex,
   createNodeGuideIndex,
@@ -2385,6 +2594,7 @@ var import_canvas25 = require("@pixerate/editor/canvas");
   excludePaths,
   exportCssAnimation,
   findConnectorSnap,
+  findStrokesAtPoint,
   fitCubicRun,
   fitCubics,
   fitFreehandPath,
@@ -2558,7 +2768,10 @@ var import_canvas25 = require("@pixerate/editor/canvas");
   snapTimeToFrame,
   snapToGrid,
   springAt,
+  streamlinePoints,
   strokeOutlineRings,
+  strokePointsToPathData,
+  strokeToShapeNode,
   subtractPaths,
   subtractPolygons,
   swapCanvasInstance,
@@ -2581,6 +2794,7 @@ var import_canvas25 = require("@pixerate/editor/canvas");
   useCanvasClipboard,
   useCanvasComponents,
   useCanvasDocking,
+  useCanvasDraw,
   useCanvasExplosion,
   useCanvasGraph,
   useCanvasLayout,