@pixerate/editor-react 0.17.0 → 0.18.1

package/dist/canvas/index.cjs

@@ -20,198 +20,300 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/canvas/index.ts
 var canvas_exports = {};
 __export(canvas_exports, {
-  AUTO_LAYOUT_DATA_KEY: () => import_canvas18.AUTO_LAYOUT_DATA_KEY,
+  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,
   AgentPresenceLayer: () => AgentPresenceLayer,
-  CANVAS_TOKEN_PROPERTIES: () => import_canvas19.CANVAS_TOKEN_PROPERTIES,
-  CHILD_LAYOUT_DATA_KEY: () => import_canvas18.CHILD_LAYOUT_DATA_KEY,
-  CONNECTION_LINE_TYPES: () => import_canvas14.CONNECTION_LINE_TYPES,
+  AnimationEditError: () => import_canvas24.AnimationEditError,
+  AnimationPlayer: () => import_canvas24.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,
+  CanvasComponentsPanel: () => CanvasComponentsPanel,
   CanvasGuidesLayer: () => CanvasGuidesLayer,
-  CanvasScenesStore: () => import_canvas14.CanvasScenesStore,
-  DEFAULT_ARRANGE_SHORTCUTS: () => import_canvas14.DEFAULT_ARRANGE_SHORTCUTS,
-  ManualClock: () => import_canvas17.ManualClock,
-  RESIZE_HANDLES: () => import_canvas13.RESIZE_HANDLES,
-  SHAPE_DATA_KEY: () => import_canvas15.SHAPE_DATA_KEY,
-  SHAPE_KINDS: () => import_canvas15.SHAPE_KINDS,
-  SHAPE_NODE_TYPE: () => import_canvas15.SHAPE_NODE_TYPE,
-  SHAPE_OPERATIONS: () => import_canvas15.SHAPE_OPERATIONS,
+  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,
   ShapeNode: () => ShapeNode,
-  TOKEN_BINDINGS_DATA_KEY: () => import_canvas19.TOKEN_BINDINGS_DATA_KEY,
-  TOKEN_MODES_DATA_KEY: () => import_canvas19.TOKEN_MODES_DATA_KEY,
+  TOKEN_BINDINGS_DATA_KEY: () => import_canvas23.TOKEN_BINDINGS_DATA_KEY,
+  TOKEN_MODES_DATA_KEY: () => import_canvas23.TOKEN_MODES_DATA_KEY,
   TokenBindingPicker: () => TokenBindingPicker,
   TokenModeSwitcher: () => TokenModeSwitcher,
-  alignNodes: () => import_canvas14.alignNodes,
-  applyConstraints: () => import_canvas18.applyConstraints,
-  applyNodeUpdates: () => import_canvas14.applyNodeUpdates,
-  applyShapeCombination: () => import_canvas15.applyShapeCombination,
-  applyShapeReplacement: () => import_canvas16.applyShapeReplacement,
-  bezierPathArea: () => import_canvas16.bezierPathArea,
-  bezierPathBounds: () => import_canvas16.bezierPathBounds,
-  bezierPathLength: () => import_canvas16.bezierPathLength,
-  bezierPathPointAtLength: () => import_canvas16.bezierPathPointAtLength,
-  bezierPathSignedArea: () => import_canvas16.bezierPathSignedArea,
-  bezierPathToSvg: () => import_canvas16.bezierPathToSvg,
-  bindCanvasToken: () => import_canvas19.bindCanvasToken,
-  blendLayout: () => import_canvas17.blendLayout,
-  boundsOf: () => import_canvas17.boundsOf,
-  calculateDagreReflowDisplacement: () => import_canvas17.calculateDagreReflowDisplacement,
-  calculateDirectionalDisplacement: () => import_canvas17.calculateDirectionalDisplacement,
-  canCombineShapeNodes: () => import_canvas15.canCombineShapeNodes,
-  canOffsetShapeNodes: () => import_canvas16.canOffsetShapeNodes,
-  canOutlineShapeNodeStrokes: () => import_canvas16.canOutlineShapeNodeStrokes,
-  canvasHeight: () => import_canvas17.canvasHeight,
-  centerNodes: () => import_canvas17.centerNodes,
-  centre: () => import_canvas17.centre,
-  clampLayoutSize: () => import_canvas18.clampLayoutSize,
-  combineShapeNodes: () => import_canvas15.combineShapeNodes,
-  computeNodesBoundingBox: () => import_canvas17.computeNodesBoundingBox,
-  computeSnapGuides: () => import_canvas14.computeSnapGuides,
-  connectedOnly: () => import_canvas17.connectedOnly,
-  countPathSegments: () => import_canvas16.countPathSegments,
-  createBezierTrajectory: () => import_canvas17.createBezierTrajectory,
-  createCanvasAutoLayoutController: () => import_canvas18.createCanvasAutoLayoutController,
-  createCanvasScenesStore: () => import_canvas14.createCanvasScenesStore,
-  createFanOutTrajectory: () => import_canvas17.createFanOutTrajectory,
-  createGuideIndex: () => import_canvas14.createGuideIndex,
-  createNodeGuideIndex: () => import_canvas14.createNodeGuideIndex,
-  cubicPointAt: () => import_canvas13.cubicPointAt,
-  cubicsToPathData: () => import_canvas13.cubicsToPathData,
-  dashContours: () => import_canvas16.dashContours,
-  defaultEasing: () => import_canvas17.defaultEasing,
-  detachTokenBindings: () => import_canvas19.detachTokenBindings,
-  distanceToBezierPath: () => import_canvas16.distanceToBezierPath,
-  distributeNodes: () => import_canvas14.distributeNodes,
-  dividePaths: () => import_canvas16.dividePaths,
-  dividePolygons: () => import_canvas15.dividePolygons,
-  ensureLayout: () => import_canvas17.ensureLayout,
-  estimateCanvasHeight: () => import_canvas17.estimateCanvasHeight,
-  estimateNodeSize: () => import_canvas17.estimateNodeSize,
-  excludePaths: () => import_canvas16.excludePaths,
-  findConnectorSnap: () => import_canvas14.findConnectorSnap,
-  fitCubicRun: () => import_canvas13.fitCubicRun,
-  fitCubics: () => import_canvas13.fitCubics,
-  fitFreehandPath: () => import_canvas13.fitFreehandPath,
-  fitPathData: () => import_canvas13.fitPathData,
-  fitViewportToNodes: () => import_canvas14.fitViewportToNodes,
-  fitViewportToRect: () => import_canvas14.fitViewportToRect,
-  flattenSvgPath: () => import_canvas15.flattenSvgPath,
-  flowSide: () => import_canvas17.flowSide,
-  getAbsolutePosition: () => import_canvas14.getAbsolutePosition,
-  getAutoLayout: () => import_canvas18.getAutoLayout,
-  getAutoLayoutGrid: () => import_canvas18.getAutoLayoutGrid,
-  getAutoLayoutInsertTarget: () => import_canvas18.getAutoLayoutInsertTarget,
-  getBindableTokenProperties: () => import_canvas19.getBindableTokenProperties,
-  getCanvasTokenProperty: () => import_canvas19.getCanvasTokenProperty,
-  getCenteredNodePosition: () => import_canvas17.getCenteredNodePosition,
-  getChildLayout: () => import_canvas18.getChildLayout,
-  getEffectiveTokenModes: () => import_canvas19.getEffectiveTokenModes,
-  getFlowChildren: () => import_canvas18.getFlowChildren,
-  getLayoutParent: () => import_canvas18.getLayoutParent,
-  getLayoutSizing: () => import_canvas18.getLayoutSizing,
-  getLayoutedNodes: () => import_canvas17.getLayoutedNodes,
-  getNodeRect: () => import_canvas14.getNodeRect,
-  getNodeShape: () => import_canvas15.getNodeShape,
-  getNodeSize: () => import_canvas14.getNodeSize,
-  getNodeTokenBindings: () => import_canvas19.getNodeTokenBindings,
-  getNodeTokenModes: () => import_canvas19.getNodeTokenModes,
-  getResizingNodeRect: () => import_canvas13.getResizingNodeRect,
-  getShapeRenderData: () => import_canvas15.getShapeRenderData,
-  getShapeSvg: () => import_canvas15.getShapeSvg,
-  getTokenPropertyScope: () => import_canvas19.getTokenPropertyScope,
-  getTokensForProperty: () => import_canvas19.getTokensForProperty,
-  handlePoint: () => import_canvas14.handlePoint,
-  hasVisibleStroke: () => import_canvas16.hasVisibleStroke,
-  inferResizeHandle: () => import_canvas13.inferResizeHandle,
-  inspectNodeTokens: () => import_canvas19.inspectNodeTokens,
-  intersectPaths: () => import_canvas16.intersectPaths,
-  intersectPolygons: () => import_canvas15.intersectPolygons,
-  invertNodeUpdates: () => import_canvas14.invertNodeUpdates,
-  isAutoLayoutFrame: () => import_canvas18.isAutoLayoutFrame,
-  isEventFromTextInput: () => import_canvas17.isEventFromTextInput,
-  isLocked: () => import_canvas14.isLocked,
-  isMeasureModifierHeld: () => import_canvas13.isMeasureModifierHeld,
-  isShapeDescription: () => import_canvas15.isShapeDescription,
-  isShapeNode: () => import_canvas15.isShapeNode,
-  isStraightCubic: () => import_canvas13.isStraightCubic,
-  isValidCanvasNode: () => import_canvas17.isValidCanvasNode,
-  isValidUrl: () => import_canvas17.isValidUrl,
-  layoutAll: () => import_canvas18.layoutAll,
-  layoutBounds: () => import_canvas17.layoutBounds,
-  layoutFrame: () => import_canvas18.layoutFrame,
-  layoutUp: () => import_canvas18.layoutUp,
-  layoutUpMany: () => import_canvas18.layoutUpMany,
-  linearPositionTrajectory: () => import_canvas17.linearPositionTrajectory,
-  linearTrajectory: () => import_canvas17.linearTrajectory,
-  lockNodes: () => import_canvas14.lockNodes,
-  makeSizingCoherent: () => import_canvas18.makeSizingCoherent,
-  matchArrangeShortcut: () => import_canvas14.matchArrangeShortcut,
-  matchSize: () => import_canvas14.matchSize,
-  measureBetween: () => import_canvas13.measureBetween,
-  measureLabel: () => import_canvas13.measureLabel,
-  measureSelection: () => import_canvas13.measureSelection,
-  measureToLine: () => import_canvas13.measureToLine,
-  mergeNodeUpdates: () => import_canvas18.mergeNodeUpdates,
-  moveLayoutChild: () => import_canvas18.moveLayoutChild,
-  multiPolygonArea: () => import_canvas15.multiPolygonArea,
-  multiPolygonBounds: () => import_canvas15.multiPolygonBounds,
-  nearestHandlePositions: () => import_canvas14.nearestHandlePositions,
-  normalizeBezierPath: () => import_canvas16.normalizeBezierPath,
-  offsetPath: () => import_canvas16.offsetPath,
-  offsetShapeNodes: () => import_canvas16.offsetShapeNodes,
-  oppositePosition: () => import_canvas14.oppositePosition,
-  outlineShapeNodeStrokes: () => import_canvas16.outlineShapeNodeStrokes,
-  outlineStroke: () => import_canvas16.outlineStroke,
-  overlaps: () => import_canvas17.overlaps,
-  parseCanvasClipboardData: () => import_canvas17.parseCanvasClipboardData,
-  parseCanvasScenes: () => import_canvas14.parseCanvasScenes,
-  parseSvgPath: () => import_canvas15.parseSvgPath,
-  pathBoolean: () => import_canvas16.pathBoolean,
-  placeBeside: () => import_canvas17.placeBeside,
-  pointInBezierPath: () => import_canvas16.pointInBezierPath,
-  pointInMultiPolygon: () => import_canvas15.pointInMultiPolygon,
-  pointInRings: () => import_canvas15.pointInRings,
-  polygonArea: () => import_canvas15.polygonArea,
-  polygonBoolean: () => import_canvas15.polygonBoolean,
-  polygonToSvgPath: () => import_canvas15.polygonToSvgPath,
-  positionToSide: () => import_canvas14.positionToSide,
-  pruneCanvasTokenModes: () => import_canvas19.pruneCanvasTokenModes,
-  readNodeStyleProperty: () => import_canvas19.readNodeStyleProperty,
-  readStyleSize: () => import_canvas14.readStyleSize,
-  realClock: () => import_canvas17.realClock,
-  relayoutUpdates: () => import_canvas18.relayoutUpdates,
-  remapPastedNodes: () => import_canvas17.remapPastedNodes,
-  reorderNodes: () => import_canvas14.reorderNodes,
-  repositionNodesTo: () => import_canvas17.repositionNodesTo,
-  resizeHandleAxes: () => import_canvas13.resizeHandleAxes,
-  resolveCanvasTokens: () => import_canvas19.resolveCanvasTokens,
-  resolvePadding: () => import_canvas18.resolvePadding,
-  revertShapeCombination: () => import_canvas15.revertShapeCombination,
-  ringSignedArea: () => import_canvas15.ringSignedArea,
-  runMultiNodeTransition: () => import_canvas17.runMultiNodeTransition,
-  serializeCanvasNodes: () => import_canvas17.serializeCanvasNodes,
-  setCanvasTokenMode: () => import_canvas19.setCanvasTokenMode,
-  shapeNodeToBezierPath: () => import_canvas16.shapeNodeToBezierPath,
-  shapeNodeToPolygon: () => import_canvas15.shapeNodeToPolygon,
-  shapeToBezierPath: () => import_canvas16.shapeToBezierPath,
-  shapeToPolygon: () => import_canvas15.shapeToPolygon,
-  sideToPosition: () => import_canvas14.sideToPosition,
-  simplifyRing: () => import_canvas15.simplifyRing,
-  snapNodeDrag: () => import_canvas14.snapNodeDrag,
-  snapNodeResize: () => import_canvas13.snapNodeResize,
-  snapResize: () => import_canvas13.snapResize,
-  snapToGrid: () => import_canvas13.snapToGrid,
-  strokeOutlineRings: () => import_canvas16.strokeOutlineRings,
-  subtractPaths: () => import_canvas16.subtractPaths,
-  subtractPolygons: () => import_canvas15.subtractPolygons,
-  toBezierPath: () => import_canvas16.toBezierPath,
-  toggleLockNodes: () => import_canvas14.toggleLockNodes,
-  transformBezierPath: () => import_canvas16.transformBezierPath,
-  unionPolygons: () => import_canvas15.unionPolygons,
-  unitePaths: () => import_canvas16.unitePaths,
-  unlockNodes: () => import_canvas14.unlockNodes,
+  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,
+  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,
+  removeTrack: () => import_canvas24.removeTrack,
+  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,
+  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,
+  useCanvasAnimation: () => useCanvasAnimation,
   useCanvasArrange: () => useCanvasArrange,
   useCanvasArrangeShortcuts: () => useCanvasArrangeShortcuts,
   useCanvasAutoLayout: () => useCanvasAutoLayout,
   useCanvasClipboard: () => useCanvasClipboard,
+  useCanvasComponents: () => useCanvasComponents,
   useCanvasDocking: () => useCanvasDocking,
   useCanvasExplosion: () => useCanvasExplosion,
   useCanvasGraph: () => useCanvasGraph,
@@ -221,9 +323,13 @@ __export(canvas_exports, {
   useCanvasShortcuts: () => useCanvasShortcuts,
   useCanvasTokens: () => useCanvasTokens,
   useStreamingCanvas: () => useStreamingCanvas,
-  withStyleSize: () => import_canvas14.withStyleSize,
-  writeNodeStyleProperty: () => import_canvas19.writeNodeStyleProperty,
-  xorPolygons: () => import_canvas15.xorPolygons
+  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
 });
 module.exports = __toCommonJS(canvas_exports);
 
@@ -1236,8 +1342,8 @@ function useCanvasMeasure(options) {
 }
 
 // src/canvas/index.ts
-var import_canvas13 = require("@pixerate/editor/canvas");
-var import_canvas14 = require("@pixerate/editor/canvas");
+var import_canvas17 = require("@pixerate/editor/canvas");
+var import_canvas18 = require("@pixerate/editor/canvas");
 
 // src/canvas/ShapeNode.tsx
 var import_canvas9 = require("@pixerate/editor/canvas");
@@ -1285,10 +1391,10 @@ function ShapeNode({ data, width, height, selected, className = "", children })
 }
 
 // src/canvas/index.ts
-var import_canvas15 = require("@pixerate/editor/canvas");
-var import_canvas16 = require("@pixerate/editor/canvas");
-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");
+var import_canvas21 = require("@pixerate/editor/canvas");
+var import_canvas22 = require("@pixerate/editor/canvas");
 
 // src/canvas/useCanvasAutoLayout.ts
 var import_react11 = require("react");
@@ -1500,17 +1606,506 @@ function TokenModeSwitcher({
 }
 
 // src/canvas/index.ts
-var import_canvas19 = require("@pixerate/editor/canvas");
+var import_canvas23 = require("@pixerate/editor/canvas");
+
+// src/canvas/useCanvasAnimation.ts
+var import_react13 = require("react");
+var import_canvas13 = require("@pixerate/editor/canvas");
+function useCanvasAnimation(options) {
+  const nodesRef = (0, import_react13.useRef)(options.nodes);
+  nodesRef.current = options.nodes;
+  const optionsRef = (0, import_react13.useRef)(options);
+  optionsRef.current = options;
+  const controller = (0, import_react13.useMemo)(
+    () => (0, import_canvas13.createCanvasAnimationController)({
+      getNodes: () => nodesRef.current,
+      setNodes: (next) => {
+        nodesRef.current = next;
+        optionsRef.current.setNodes(next);
+      },
+      get history() {
+        return optionsRef.current.history;
+      },
+      get getSelectedIds() {
+        return optionsRef.current.getSelectedIds;
+      },
+      get properties() {
+        return optionsRef.current.properties;
+      },
+      clock: options.clock,
+      duration: options.duration,
+      minDuration: options.minDuration,
+      loop: options.loop,
+      playbackRate: options.playbackRate,
+      fps: options.fps,
+      recording: options.recording,
+      onTime: (time) => optionsRef.current.onTime?.(time)
+    }),
+    []
+  );
+  (0, import_react13.useEffect)(() => () => controller.destroy(), [controller]);
+  (0, import_react13.useEffect)(() => {
+    if (options.loop !== void 0) controller.setLoop(options.loop);
+  }, [controller, options.loop]);
+  (0, import_react13.useEffect)(() => {
+    if (options.playbackRate !== void 0) controller.setPlaybackRate(options.playbackRate);
+  }, [controller, options.playbackRate]);
+  (0, import_react13.useEffect)(() => {
+    if (options.recording !== void 0) controller.setRecording(options.recording);
+  }, [controller, options.recording]);
+  const state = (0, import_react13.useSyncExternalStore)(
+    (listener) => controller.subscribe(listener),
+    () => controller.getState(),
+    () => controller.getState()
+  );
+  (0, import_react13.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)(
+    () => ({
+      ...controller,
+      state,
+      time: state.time,
+      playing: state.playing,
+      recording: state.recording,
+      duration: state.duration,
+      selection: state.selection,
+      drag: state.drag,
+      /** The nodes evaluated at the playhead; render these. */
+      displayNodes,
+      get clipboard() {
+        return controller.clipboard;
+      }
+    }),
+    [controller, state, displayNodes]
+  );
+}
+
+// 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 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 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 onKey = (event) => {
+      if (event.key === "Escape" && dragRef.current) {
+        dragRef.current = null;
+        animation.cancelKeyframeDrag();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [animation]);
+  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));
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      animation.endScrub();
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  };
+  const onKeyDown = (ref) => (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    if (event.shiftKey || event.metaKey || event.ctrlKey) {
+      animation.selectKeyframes([ref], "toggle");
+      return;
+    }
+    animation.beginKeyframeDrag([ref]);
+    dragRef.current = { startX: event.clientX };
+    const msPerPx = width > 0 ? duration / width : 0;
+    const move = (e) => {
+      if (!dragRef.current) return;
+      animation.updateKeyframeDrag((e.clientX - dragRef.current.startX) * msPerPx, { snap: !e.altKey, thresholdMs: snapThreshold * msPerPx });
+    };
+    const up = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      if (!dragRef.current) return;
+      dragRef.current = null;
+      animation.endKeyframeDrag();
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  };
+  const onTimelineKey = (event) => {
+    if ((event.key === "Delete" || event.key === "Backspace") && state.selection.length > 0) {
+      event.preventDefault();
+      animation.deleteKeyframes();
+    }
+  };
+  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 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)(
+        "button",
+        {
+          type: "button",
+          className: `${btn} ${state.recording ? "text-red-500" : ""}`,
+          "data-action": "record",
+          "aria-pressed": state.recording,
+          "aria-label": "Record keyframes",
+          onClick: () => animation.toggleRecording(),
+          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),
+        " / ",
+        (0, import_canvas14.formatAnimationTime)(duration)
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "select",
+        {
+          "aria-label": "Easing",
+          "data-easing-picker": "",
+          className: "rounded border border-border bg-background px-1 py-0.5",
+          value: selectedEasing,
+          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_runtime5.jsx)(
+        "select",
+        {
+          "aria-label": "Loop",
+          "data-loop-picker": "",
+          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))
+        }
+      )
+    ] }),
+    /* @__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)(
+        "div",
+        {
+          "data-timeline-ruler": "",
+          className: "relative h-5 cursor-ew-resize border-b border-border",
+          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 } })
+          ]
+        }
+      )
+    ] }),
+    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)(
+          "input",
+          {
+            type: "checkbox",
+            "aria-label": `Enable ${row.label}`,
+            checked: row.enabled,
+            onChange: (e) => animation.setTrackEnabled(row.nodeId, row.property, e.target.checked)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.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)(
+          "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)}`,
+            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) },
+            onPointerDown: onKeyDown(k.ref)
+          },
+          k.ref.time
+        ))
+      ] })
+    ] }, row.id))
+  ] });
+}
+
+// src/canvas/index.ts
+var import_canvas24 = require("@pixerate/editor/canvas");
+
+// src/canvas/useCanvasComponents.ts
+var import_react15 = require("react");
+var import_canvas15 = require("@pixerate/editor/canvas");
+function useCanvasComponents(options) {
+  const nodesRef = (0, import_react15.useRef)(options.nodes);
+  nodesRef.current = options.nodes;
+  const optionsRef = (0, import_react15.useRef)(options);
+  optionsRef.current = options;
+  const controller = (0, import_react15.useMemo)(
+    () => (0, import_canvas15.createCanvasComponentsController)({
+      getNodes: () => nodesRef.current,
+      setNodes: (next) => {
+        nodesRef.current = next;
+        optionsRef.current.setNodes(next);
+      },
+      get history() {
+        return optionsRef.current.history;
+      },
+      get getSelectedIds() {
+        return optionsRef.current.getSelectedIds;
+      },
+      onReveal: (node) => optionsRef.current.onReveal?.(node),
+      get idGenerator() {
+        return optionsRef.current.idGenerator;
+      },
+      get textTypes() {
+        return optionsRef.current.textTypes;
+      },
+      get layout() {
+        return optionsRef.current.layout;
+      },
+      get tokens() {
+        return optionsRef.current.tokens;
+      }
+    }),
+    []
+  );
+  (0, import_react15.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");
+function CanvasComponentsPanel({
+  nodes,
+  onInsert,
+  search = true,
+  className = ""
+}) {
+  const [query, setQuery] = (0, import_react16.useState)("");
+  const { components, sets } = (0, import_canvas16.listCanvasComponents)(nodes);
+  const q = query.trim().toLowerCase();
+  const match = (name) => !q || name.toLowerCase().includes(q);
+  const lone = components.filter((c) => !c.setId && match(c.name));
+  const shownSets = sets.filter((s) => match(s.name) || s.variants.some((v) => match(v.name)));
+  const item = (id, name, count, extra = {}) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "button",
+    {
+      type: "button",
+      draggable: true,
+      "data-component-id": id,
+      ...extra,
+      className: "flex w-full items-center justify-between gap-2 rounded px-2 py-1 text-left text-xs hover:bg-muted",
+      title: `Insert an instance of ${name}`,
+      onClick: () => onInsert(id),
+      onDragStart: (e) => {
+        e.dataTransfer.setData(import_canvas16.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" }),
+          name
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.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)(
+      "input",
+      {
+        type: "search",
+        "aria-label": "Search components",
+        placeholder: "Search components",
+        className: "rounded border border-border bg-background px-2 py-1 text-xs",
+        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: [
+      item(set.id, set.name, set.variants.reduce((sum, v) => sum + v.instanceCount, 0), { "data-kind": "set" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "ml-3 flex flex-col border-l border-border pl-1", children: set.variants.map((v) => item(v.id, v.name, v.instanceCount, { "data-kind": "variant" })) })
+    ] }, set.id)),
+    lone.map((c) => item(c.id, c.name, c.instanceCount, { "data-kind": "component" })),
+    components.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
+  ] });
+}
+function CanvasInstanceInspector({
+  nodes,
+  nodeId,
+  components,
+  onError,
+  className = ""
+}) {
+  const info = nodeId ? (0, import_canvas16.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 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
+    ] }),
+    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)(
+        "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))
+        }
+      )
+    ] }, 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)(
+        "input",
+        {
+          type: "text",
+          "aria-label": p.name,
+          defaultValue: String(p.value),
+          className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
+          onBlur: (e) => {
+            if (e.currentTarget.value !== p.value) setProp(p.name, e.currentTarget.value);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter") e.currentTarget.blur();
+          }
+        },
+        String(p.value)
+      ) : /* @__PURE__ */ (0, import_jsx_runtime6.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))
+        }
+      )
+    ] }, 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)(
+          "button",
+          {
+            type: "button",
+            className: "rounded bg-muted px-1 text-[10px]",
+            "data-override-group": g,
+            title: `Reset ${g}`,
+            onClick: () => report(components.resetOverrides(o.id, g)),
+            children: [
+              g,
+              " \xD7"
+            ]
+          },
+          g
+        ))
+      ] }, 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)(
+          "button",
+          {
+            type: "button",
+            className: btn,
+            "data-action": "push",
+            disabled: info.overrides.length === 0,
+            onClick: () => report(components.pushOverrides(info.rootId)),
+            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)(
+        "button",
+        {
+          type: "button",
+          className: btn,
+          "data-action": "detach",
+          disabled: info.nested,
+          title: info.nested ? "Detach the outer instance first" : void 0,
+          onClick: () => report(components.detachInstance([info.id])),
+          children: "Detach"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/canvas/index.ts
+var import_canvas25 = require("@pixerate/editor/canvas");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ANIMATABLE_PROPERTIES,
+  ANIMATION_DATA_KEY,
+  ANIMATION_EASING_LABELS,
+  ANIMATION_EASING_PRESETS,
+  ANIMATION_TIME_EPSILON,
   AUTO_LAYOUT_DATA_KEY,
   AgentPresenceLayer,
+  AnimationEditError,
+  AnimationPlayer,
+  AnimationTimeline,
+  CANVAS_COMPONENT_DRAG_TYPE,
   CANVAS_TOKEN_PROPERTIES,
   CHILD_LAYOUT_DATA_KEY,
   CONNECTION_LINE_TYPES,
+  CSS_ANIMATION_PROPERTIES,
+  CUBIC_BEZIER_PRESETS,
+  CanvasComponentsPanel,
   CanvasGuidesLayer,
+  CanvasInstanceInspector,
   CanvasScenesStore,
   DEFAULT_ARRANGE_SHORTCUTS,
+  MAX_KEYFRAME_REFS,
   ManualClock,
   RESIZE_HANDLES,
   SHAPE_DATA_KEY,
@@ -1522,7 +2117,11 @@ var import_canvas19 = require("@pixerate/editor/canvas");
   TOKEN_MODES_DATA_KEY,
   TokenBindingPicker,
   TokenModeSwitcher,
+  addKeyframesAtTime,
   alignNodes,
+  animateNode,
+  applyAnimation,
+  applyAnimationOverrides,
   applyConstraints,
   applyNodeUpdates,
   applyShapeCombination,
@@ -1533,6 +2132,7 @@ var import_canvas19 = require("@pixerate/editor/canvas");
   bezierPathPointAtLength,
   bezierPathSignedArea,
   bezierPathToSvg,
+  bindCanvasComponentProperty,
   bindCanvasToken,
   blendLayout,
   boundsOf,
@@ -1544,31 +2144,49 @@ var import_canvas19 = require("@pixerate/editor/canvas");
   canvasHeight,
   centerNodes,
   centre,
+  clampAnimationValue,
   clampLayoutSize,
+  combineCanvasComponentsAsVariants,
   combineShapeNodes,
   computeNodesBoundingBox,
   computeSnapGuides,
   connectedOnly,
+  copyKeyframes,
   countPathSegments,
+  createAnimationPlayer,
   createBezierTrajectory,
+  createCanvasAnimationController,
   createCanvasAutoLayoutController,
+  createCanvasComponent,
+  createCanvasComponentsController,
+  createCanvasInstance,
   createCanvasScenesStore,
   createFanOutTrajectory,
   createGuideIndex,
   createNodeGuideIndex,
+  cubicBezierAt,
   cubicPointAt,
   cubicsToPathData,
   dashContours,
   defaultEasing,
+  deleteKeyframes,
+  detachCanvasInstance,
   detachTokenBindings,
   distanceToBezierPath,
   distributeNodes,
   dividePaths,
   dividePolygons,
+  easingFromInfluence,
+  easingLabel,
+  easingToCss,
   ensureLayout,
   estimateCanvasHeight,
   estimateNodeSize,
+  evaluateAnimation,
+  evaluateEasing,
+  evaluateTrack,
   excludePaths,
+  exportCssAnimation,
   findConnectorSnap,
   fitCubicRun,
   fitCubics,
@@ -1578,19 +2196,34 @@ var import_canvas19 = require("@pixerate/editor/canvas");
   fitViewportToRect,
   flattenSvgPath,
   flowSide,
+  formatAnimationTime,
+  formatOklab,
   getAbsolutePosition,
+  getAnimatableProperty,
+  getAnimatedProperties,
+  getAnimatedValue,
+  getAnimationDuration,
+  getAnimationTrack,
   getAutoLayout,
   getAutoLayoutGrid,
   getAutoLayoutInsertTarget,
   getBindableTokenProperties,
+  getCanvasComponentDragId,
   getCanvasTokenProperty,
   getCenteredNodePosition,
   getChildLayout,
+  getComponentSourceId,
+  getCssPropertyAnimations,
   getEffectiveTokenModes,
   getFlowChildren,
+  getInstanceData,
+  getInstanceStatus,
+  getKeyframeTimes,
   getLayoutParent,
   getLayoutSizing,
   getLayoutedNodes,
+  getNodeAnimation,
+  getNodeOverrides,
   getNodeRect,
   getNodeShape,
   getNodeSize,
@@ -1599,19 +2232,31 @@ var import_canvas19 = require("@pixerate/editor/canvas");
   getResizingNodeRect,
   getShapeRenderData,
   getShapeSvg,
+  getTimelineRows,
+  getTimelineTicks,
   getTokenPropertyScope,
   getTokensForProperty,
   handlePoint,
   hasVisibleStroke,
   inferResizeHandle,
+  inspectCanvasInstance,
   inspectNodeTokens,
+  interpolateAnimationValue,
   intersectPaths,
   intersectPolygons,
   invertNodeUpdates,
+  isAnimationEasing,
+  isAnimationKeyframe,
   isAutoLayoutFrame,
+  isCanvasComponent,
+  isCanvasComponentSet,
+  isCanvasInstance,
+  isCssExportExact,
   isEventFromTextInput,
+  isKeyframeSelected,
   isLocked,
   isMeasureModifierHeld,
+  isNodeAnimated,
   isShapeDescription,
   isShapeNode,
   isStraightCubic,
@@ -1624,6 +2269,7 @@ var import_canvas19 = require("@pixerate/editor/canvas");
   layoutUpMany,
   linearPositionTrajectory,
   linearTrajectory,
+  listCanvasComponents,
   lockNodes,
   makeSizingCoherent,
   matchArrangeShortcut,
@@ -1633,22 +2279,31 @@ var import_canvas19 = require("@pixerate/editor/canvas");
   measureSelection,
   measureToLine,
   mergeNodeUpdates,
+  mixColorsOklab,
+  moveKeyframes,
   moveLayoutChild,
   multiPolygonArea,
   multiPolygonBounds,
   nearestHandlePositions,
   normalizeBezierPath,
+  normalizeKeyframes,
   offsetPath,
   offsetShapeNodes,
+  oklabToRgb,
   oppositePosition,
   outlineShapeNodeStrokes,
   outlineStroke,
   overlaps,
   parseCanvasClipboardData,
   parseCanvasScenes,
+  parseCssEasing,
+  parseKeyframeClipboard,
+  parseOklab,
   parseSvgPath,
+  pasteKeyframes,
   pathBoolean,
   placeBeside,
+  playWebAnimations,
   pointInBezierPath,
   pointInMultiPolygon,
   pointInRings,
@@ -1657,44 +2312,72 @@ var import_canvas19 = require("@pixerate/editor/canvas");
   polygonToSvgPath,
   positionToSide,
   pruneCanvasTokenModes,
+  pushCanvasInstanceOverrides,
+  readAnimatableValue,
   readNodeStyleProperty,
   readStyleSize,
   realClock,
+  recordAnimationChanges,
   relayoutUpdates,
   remapPastedNodes,
+  removeTrack,
   reorderNodes,
   repositionNodesTo,
+  resetCanvasInstanceOverrides,
   resizeHandleAxes,
   resolveCanvasTokens,
+  resolveEasing,
   resolvePadding,
+  restoreCanvasMainComponent,
   revertShapeCombination,
+  rgbToOklab,
   ringSignedArea,
   runMultiNodeTransition,
+  sampleAnimationFrames,
+  scaleKeyframes,
   serializeCanvasNodes,
+  setCanvasComponentProperty,
+  setCanvasInstanceProperties,
   setCanvasTokenMode,
+  setKeyframe,
+  setKeyframeEasing,
+  setMotionPath,
+  setTrackEnabled,
   shapeNodeToBezierPath,
   shapeNodeToPolygon,
   shapeToBezierPath,
   shapeToPolygon,
   sideToPosition,
   simplifyRing,
+  snapKeyframeDelta,
   snapNodeDrag,
   snapNodeResize,
   snapResize,
+  snapTimeToFrame,
   snapToGrid,
+  springAt,
   strokeOutlineRings,
   subtractPaths,
   subtractPolygons,
+  swapCanvasInstance,
+  syncAllCanvasInstances,
+  syncCanvasComponents,
+  syncCanvasInstance,
+  timeToX,
   toBezierPath,
+  toWebAnimations,
   toggleLockNodes,
   transformBezierPath,
   unionPolygons,
   unitePaths,
   unlockNodes,
+  updateKeyframe,
+  useCanvasAnimation,
   useCanvasArrange,
   useCanvasArrangeShortcuts,
   useCanvasAutoLayout,
   useCanvasClipboard,
+  useCanvasComponents,
   useCanvasDocking,
   useCanvasExplosion,
   useCanvasGraph,
@@ -1704,8 +2387,12 @@ var import_canvas19 = require("@pixerate/editor/canvas");
   useCanvasShortcuts,
   useCanvasTokens,
   useStreamingCanvas,
+  withNodeAnimation,
   withStyleSize,
+  wouldCreateComponentCycle,
+  wrapAnimationTime,
   writeNodeStyleProperty,
+  xToTime,
   xorPolygons
 });
 //# sourceMappingURL=index.cjs.map