@pixerate/editor-react 0.17.0 → 0.18.1

package/dist/canvas/index.d.cts

@@ -2,8 +2,8 @@ import * as React$1 from 'react';
 import React__default from 'react';
 import { AgentPresence } from '@pixerate/editor/agent';
 import * as _pixerate_editor_canvas from '@pixerate/editor/canvas';
-import { CanvasNode, CanvasEdge, IncrementalLayoutOptions, XYPosition, GraphDifferences, Rect, CanvasLayoutOptions, Side, PlaceBesideOptions, getCenteredNodePosition, CanvasDockingCallbacks, DockStrategy, ExplodeNodeOptions, CollapseNodeOptions, ExplosionSnapshot, ArrangeHistoryTarget, SnapGuidesOptions, NodeRectOptions, AutoLayoutOptions, GuideLine, CanvasArrangeAction, ArrangeShortcutBinding, CanvasScenesOptions, CanvasViewport, CanvasScenesStore, CanvasScene, FitViewportOptions, ShapeDescription, AutoLayoutMeasure, CanvasTokenOptions } from '@pixerate/editor/canvas';
-export { AUTO_LAYOUT_DATA_KEY, AlignEdge, ArrangeShortcutBinding, AutoLayout, AutoLayoutAlignContent, AutoLayoutAlignCross, AutoLayoutAlignMain, AutoLayoutCellAlign, AutoLayoutChild, AutoLayoutConstraints, AutoLayoutGrid, AutoLayoutGridArea, AutoLayoutGridCell, AutoLayoutGridGeometry, AutoLayoutGridTrack, AutoLayoutHorizontalConstraint, AutoLayoutInsertTarget, AutoLayoutMeasure, AutoLayoutMode, AutoLayoutOptions, AutoLayoutPadding, AutoLayoutSize, AutoLayoutSizing, AutoLayoutSizingPair, AutoLayoutVerticalConstraint, BezierCommand, BezierPath, BezierPathInput, CANVAS_TOKEN_PROPERTIES, CHILD_LAYOUT_DATA_KEY, CONNECTION_LINE_TYPES, CanvasArrangeAction, CanvasAutoLayoutController, CanvasAutoLayoutControllerOptions, CanvasClipboardPayload, CanvasConnectionLineType, CanvasDockingCallbacks, CanvasEdge, CanvasHeightOptions, CanvasLayoutOptions, CanvasNode, CanvasNodeUpdate, CanvasScene, CanvasScenesState, CanvasScenesStore, CanvasTokenBindingInfo, CanvasTokenOptions, CanvasTokenProperty, CanvasViewport, Clock, CollapseNodeOptions, CombineShapeNodesOptions, CombineShapeNodesRefusal, CombineShapeNodesResult, ConnectorSnap, ConnectorSnapTarget, CubicSegment, DEFAULT_ARRANGE_SHORTCUTS, DirectionalDisplacementOptions, DisplacementDirection, DistributeAxis, DistributeMode, DividePathsResult, DockStrategy, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, GraphDifferences, GuideIndex, GuideLine, IncrementalLayoutOptions, ManualClock, MeasureGuide, MeasureSelectionOptions, MeasureSelectionResult, MultiPolygon, NodeTransition, OffsetPathOptions, OffsetShapeNodesOptions, OutlineShapeStrokesOptions, OutlineStrokeOptions, PathBooleanResult, PathCommand, PathOperand, PathOperandInput, PathOpsOptions, PathShape, PlaceBesideOptions, Point, PolygonBooleanOperation, PolygonBooleanOptions, PolygonFillRule, PolygonInput, PolygonOperand, PolygonPiece, PolygonRing, PolygonToPathOptions, PolygonWithHoles, Position, RESIZE_HANDLES, Rect, RectShape, ReflowDisplacementOptions, RegularPolygonShape, ResizeHandle, SHAPE_DATA_KEY, SHAPE_KINDS, SHAPE_NODE_TYPE, SHAPE_OPERATIONS, ShapeDescription, ShapeKind, ShapeNodePolygonOptions, ShapeOperation, ShapePaint, ShapePathEditOperation, ShapePathEditRefusal, ShapePathEditResult, ShapeRenderData, ShapeSize, Side, SizeDimension, SnapGuidesOptions, SnapNodeResizeOptions, SnapNodeResizeResult, SnapResizeOptions, SnapResizeResult, SnapResult, StarShape, StrokeCap, StrokeJoin, TOKEN_BINDINGS_DATA_KEY, TOKEN_MODES_DATA_KEY, TrajectoryFunction, TrajectoryPoint, XYPosition, ZOrderOperation, alignNodes, applyConstraints, applyNodeUpdates, applyShapeCombination, applyShapeReplacement, bezierPathArea, bezierPathBounds, bezierPathLength, bezierPathPointAtLength, bezierPathSignedArea, bezierPathToSvg, bindCanvasToken, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canCombineShapeNodes, canOffsetShapeNodes, canOutlineShapeNodeStrokes, canvasHeight, centerNodes, centre, clampLayoutSize, combineShapeNodes, computeNodesBoundingBox, computeSnapGuides, connectedOnly, countPathSegments, createBezierTrajectory, createCanvasAutoLayoutController, createCanvasScenesStore, createFanOutTrajectory, createGuideIndex, createNodeGuideIndex, cubicPointAt, cubicsToPathData, dashContours, defaultEasing, detachTokenBindings, distanceToBezierPath, distributeNodes, dividePaths, dividePolygons, ensureLayout, estimateCanvasHeight, estimateNodeSize, excludePaths, findConnectorSnap, fitCubicRun, fitCubics, fitFreehandPath, fitPathData, fitViewportToNodes, fitViewportToRect, flattenSvgPath, flowSide, getAbsolutePosition, getAutoLayout, getAutoLayoutGrid, getAutoLayoutInsertTarget, getBindableTokenProperties, getCanvasTokenProperty, getCenteredNodePosition, getChildLayout, getEffectiveTokenModes, getFlowChildren, getLayoutParent, getLayoutSizing, getLayoutedNodes, getNodeRect, getNodeShape, getNodeSize, getNodeTokenBindings, getNodeTokenModes, getResizingNodeRect, getShapeRenderData, getShapeSvg, getTokenPropertyScope, getTokensForProperty, handlePoint, hasVisibleStroke, inferResizeHandle, inspectNodeTokens, intersectPaths, intersectPolygons, invertNodeUpdates, isAutoLayoutFrame, isEventFromTextInput, isLocked, isMeasureModifierHeld, isShapeDescription, isShapeNode, isStraightCubic, isValidCanvasNode, isValidUrl, layoutAll, layoutBounds, layoutFrame, layoutUp, layoutUpMany, linearPositionTrajectory, linearTrajectory, lockNodes, makeSizingCoherent, matchArrangeShortcut, matchSize, measureBetween, measureLabel, measureSelection, measureToLine, mergeNodeUpdates, moveLayoutChild, multiPolygonArea, multiPolygonBounds, nearestHandlePositions, normalizeBezierPath, offsetPath, offsetShapeNodes, oppositePosition, outlineShapeNodeStrokes, outlineStroke, overlaps, parseCanvasClipboardData, parseCanvasScenes, parseSvgPath, pathBoolean, placeBeside, pointInBezierPath, pointInMultiPolygon, pointInRings, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, pruneCanvasTokenModes, readNodeStyleProperty, readStyleSize, realClock, relayoutUpdates, remapPastedNodes, reorderNodes, repositionNodesTo, resizeHandleAxes, resolveCanvasTokens, resolvePadding, revertShapeCombination, ringSignedArea, runMultiNodeTransition, serializeCanvasNodes, setCanvasTokenMode, shapeNodeToBezierPath, shapeNodeToPolygon, shapeToBezierPath, shapeToPolygon, sideToPosition, simplifyRing, snapNodeDrag, snapNodeResize, snapResize, snapToGrid, strokeOutlineRings, subtractPaths, subtractPolygons, toBezierPath, toggleLockNodes, transformBezierPath, unionPolygons, unitePaths, unlockNodes, withStyleSize, writeNodeStyleProperty, xorPolygons } from '@pixerate/editor/canvas';
+import { CanvasNode, CanvasEdge, IncrementalLayoutOptions, XYPosition, GraphDifferences, Rect, CanvasLayoutOptions, Side, PlaceBesideOptions, getCenteredNodePosition, CanvasDockingCallbacks, DockStrategy, ExplodeNodeOptions, CollapseNodeOptions, ExplosionSnapshot, ArrangeHistoryTarget, SnapGuidesOptions, NodeRectOptions, AutoLayoutOptions, GuideLine, CanvasArrangeAction, ArrangeShortcutBinding, CanvasScenesOptions, CanvasViewport, CanvasScenesStore, CanvasScene, FitViewportOptions, ShapeDescription, AutoLayoutMeasure, CanvasTokenOptions, AnimationHistoryTarget, Clock, AnimationLoopMode, AnimatableProperty, CanvasComponentSyncOptions, CanvasComponentsController } from '@pixerate/editor/canvas';
+export { ANIMATABLE_PROPERTIES, ANIMATION_DATA_KEY, ANIMATION_EASING_LABELS, ANIMATION_EASING_PRESETS, ANIMATION_TIME_EPSILON, AUTO_LAYOUT_DATA_KEY, AlignEdge, AnimatableProperty, AnimateNodeOptions, AnimationDocument, AnimationEasing, AnimationEasingPreset, AnimationEditError, AnimationEditErrorCode, AnimationFrame, AnimationHistoryTarget, AnimationKeyframe, AnimationKeyframeClipboard, AnimationLoopMode, AnimationMotionPath, AnimationOverrides, AnimationPlayer, AnimationPlayerOptions, AnimationPlayerState, AnimationTrack, AnimationValue, AnimationValueType, ArrangeShortcutBinding, AutoLayout, AutoLayoutAlignContent, AutoLayoutAlignCross, AutoLayoutAlignMain, AutoLayoutCellAlign, AutoLayoutChild, AutoLayoutConstraints, AutoLayoutGrid, AutoLayoutGridArea, AutoLayoutGridCell, AutoLayoutGridGeometry, AutoLayoutGridTrack, AutoLayoutHorizontalConstraint, AutoLayoutInsertTarget, AutoLayoutMeasure, AutoLayoutMode, AutoLayoutOptions, AutoLayoutPadding, AutoLayoutSize, AutoLayoutSizing, AutoLayoutSizingPair, AutoLayoutVerticalConstraint, BezierCommand, BezierPath, BezierPathInput, CANVAS_COMPONENT_DRAG_TYPE, CANVAS_TOKEN_PROPERTIES, CHILD_LAYOUT_DATA_KEY, CONNECTION_LINE_TYPES, CSS_ANIMATION_PROPERTIES, CUBIC_BEZIER_PRESETS, CanvasAnimationController, CanvasAnimationControllerOptions, CanvasAnimationState, CanvasArrangeAction, CanvasAutoLayoutController, CanvasAutoLayoutControllerOptions, CanvasClipboardPayload, CanvasComponentInfo, CanvasComponentPropertyDef, CanvasComponentPropertyField, CanvasComponentResult, CanvasComponentSetInfo, CanvasComponentSyncOptions, CanvasComponentsController, CanvasComponentsControllerOptions, CanvasConnectionLineType, CanvasDockingCallbacks, CanvasEdge, CanvasHeightOptions, CanvasInstanceInfo, CanvasLayoutOptions, CanvasNode, CanvasNodeUpdate, CanvasScene, CanvasScenesState, CanvasScenesStore, CanvasTokenBindingInfo, CanvasTokenOptions, CanvasTokenProperty, CanvasViewport, Clock, CollapseNodeOptions, CombineShapeNodesOptions, CombineShapeNodesRefusal, CombineShapeNodesResult, ConnectorSnap, ConnectorSnapTarget, CssAnimationExport, CssExportOptions, CubicBezierEasing, CubicSegment, DEFAULT_ARRANGE_SHORTCUTS, DirectionalDisplacementOptions, DisplacementDirection, DistributeAxis, DistributeMode, DividePathsResult, DockStrategy, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, GraphDifferences, GuideIndex, GuideLine, IncrementalLayoutOptions, KeyframeDragState, KeyframePatch, KeyframeRef, KeyframeSnap, MAX_KEYFRAME_REFS, ManualClock, MeasureGuide, MeasureSelectionOptions, MeasureSelectionResult, MultiPolygon, NodeAnimation, NodeTransition, OffsetPathOptions, OffsetShapeNodesOptions, OklabColor, OutlineShapeStrokesOptions, OutlineStrokeOptions, PathBooleanResult, PathCommand, PathOperand, PathOperandInput, PathOpsOptions, PathShape, PlaceBesideOptions, Point, PolygonBooleanOperation, PolygonBooleanOptions, PolygonFillRule, PolygonInput, PolygonOperand, PolygonPiece, PolygonRing, PolygonToPathOptions, PolygonWithHoles, Position, RESIZE_HANDLES, Rect, RectShape, ReflowDisplacementOptions, RegularPolygonShape, ResizeHandle, SHAPE_DATA_KEY, SHAPE_KINDS, SHAPE_NODE_TYPE, SHAPE_OPERATIONS, ShapeDescription, ShapeKind, ShapeNodePolygonOptions, ShapeOperation, ShapePaint, ShapePathEditOperation, ShapePathEditRefusal, ShapePathEditResult, ShapeRenderData, ShapeSize, Side, SizeDimension, SnapGuidesOptions, SnapNodeResizeOptions, SnapNodeResizeResult, SnapResizeOptions, SnapResizeResult, SnapResult, SpringEasing, StarShape, StrokeCap, StrokeJoin, TOKEN_BINDINGS_DATA_KEY, TOKEN_MODES_DATA_KEY, TimelineKeyframe, TimelineRow, TrajectoryFunction, TrajectoryPoint, WebAnimationSpec, XYPosition, ZOrderOperation, addKeyframesAtTime, alignNodes, animateNode, applyAnimation, applyAnimationOverrides, applyConstraints, applyNodeUpdates, applyShapeCombination, applyShapeReplacement, bezierPathArea, bezierPathBounds, bezierPathLength, bezierPathPointAtLength, bezierPathSignedArea, bezierPathToSvg, bindCanvasComponentProperty, bindCanvasToken, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canCombineShapeNodes, canOffsetShapeNodes, canOutlineShapeNodeStrokes, 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, fitFreehandPath, fitPathData, fitViewportToNodes, 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, getNodeTokenBindings, getNodeTokenModes, 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, isValidCanvasNode, isValidUrl, layoutAll, layoutBounds, layoutFrame, layoutUp, layoutUpMany, linearPositionTrajectory, linearTrajectory, listCanvasComponents, lockNodes, makeSizingCoherent, matchArrangeShortcut, matchSize, measureBetween, measureLabel, 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, polygonArea, polygonBoolean, 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, withNodeAnimation, withStyleSize, wouldCreateComponentCycle, wrapAnimationTime, writeNodeStyleProperty, xToTime, xorPolygons } from '@pixerate/editor/canvas';
 import { TokenState, TokenStore, TokenModeContext } from '@pixerate/editor/tokens';
 
 interface AgentPresenceLayerProps {
@@ -478,4 +478,215 @@ interface TokenModeSwitcherProps<TNode extends CanvasNode = CanvasNode> {
  */
 declare function TokenModeSwitcher<TNode extends CanvasNode = CanvasNode>({ state, nodes, nodeIds, onChange, options, showSingleMode, className, }: TokenModeSwitcherProps<TNode>): React__default.JSX.Element | null;
 
-export { AgentPresenceLayer, type AgentPresenceLayerProps, type CanvasArrange, type CanvasAutoLayout, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, type CanvasMeasure, type CanvasScenes, type CanvasTokens, ShapeNode, type ShapeNodeProps, TokenBindingPicker, type TokenBindingPickerProps, TokenModeSwitcher, type TokenModeSwitcherProps, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasClipboardOptions, type UseCanvasDockingOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseCanvasTokensOptions, type UseStreamingCanvasOptions, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasAutoLayout, useCanvasClipboard, useCanvasDocking, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useCanvasTokens, useStreamingCanvas };
+interface UseCanvasAnimationOptions<TNode extends CanvasNode = CanvasNode> {
+    nodes: TNode[];
+    setNodes: (updater: TNode[] | ((prev: TNode[]) => TNode[])) => void;
+    /** When set, keyframe edits are undoable steps. */
+    history?: AnimationHistoryTarget;
+    /** Ids acted on without explicit ids (default: nodes with `selected: true`). */
+    getSelectedIds?: () => string[];
+    /** Playback time source (default `realClock`); pass a `ManualClock` for tests or rendering. Read once. */
+    clock?: Clock;
+    /** Fixed timeline length (ms); omitted = the last keyframe, at least `minDuration`. Read once. */
+    duration?: number;
+    minDuration?: number;
+    loop?: AnimationLoopMode;
+    playbackRate?: number;
+    fps?: number;
+    recording?: boolean;
+    properties?: readonly AnimatableProperty[];
+    onTime?: (time: number) => void;
+}
+/**
+ * React hook for keyframe animation on the canvas: a playhead player (play / pause / seek /
+ * scrub, loop, ping-pong, rate), record mode, undoable keyframe edits, multi-keyframe drags
+ * with snapping, copy / paste and CSS / Web Animations export.
+ *
+ * Render `displayNodes` (the nodes evaluated at the playhead) in React Flow and pass its edits
+ * back through `applyDisplayChanges`:
+ * `onNodesChange={(c) => animation.applyDisplayChanges(applyNodeChanges(c, animation.displayNodes))}`.
+ * Animated properties are then keyed at the playhead instead of being overwritten.
+ */
+declare function useCanvasAnimation<TNode extends CanvasNode = CanvasNode>(options: UseCanvasAnimationOptions<TNode>): {
+    state: _pixerate_editor_canvas.CanvasAnimationState;
+    time: number;
+    playing: boolean;
+    recording: boolean;
+    duration: number;
+    selection: readonly _pixerate_editor_canvas.KeyframeRef[];
+    drag: _pixerate_editor_canvas.KeyframeDragState | null;
+    /** The nodes evaluated at the playhead; render these. */
+    displayNodes: TNode[];
+    clipboard: _pixerate_editor_canvas.AnimationKeyframeClipboard | null;
+    player: _pixerate_editor_canvas.AnimationPlayer;
+    getState: () => _pixerate_editor_canvas.CanvasAnimationState;
+    subscribe(listener: (state: _pixerate_editor_canvas.CanvasAnimationState) => void): () => void;
+    refresh(): void;
+    play: () => void;
+    pause: () => void;
+    toggle: () => void;
+    stop: () => void;
+    seek: (time: number) => void;
+    scrub: (time: number) => void;
+    endScrub: () => void;
+    setLoop: (loop: AnimationLoopMode) => void;
+    setPlaybackRate: (rate: number) => void;
+    setDuration(ms: number | null): void;
+    setFps(value: number): void;
+    setRecording(on: boolean): void;
+    toggleRecording(): void;
+    nextKeyframe(ids?: Iterable<string>): number | null;
+    previousKeyframe(ids?: Iterable<string>): number | null;
+    display: (nodes?: readonly TNode[] | undefined) => TNode[];
+    applyDisplayChanges(next: TNode[]): _pixerate_editor_canvas.KeyframeRef[];
+    addKeyframe(ids?: Iterable<string>, keys?: readonly string[], time?: number): _pixerate_editor_canvas.KeyframeRef[];
+    setKeyframe(nodeId: string, property: string, value: _pixerate_editor_canvas.AnimationValue, time?: number, easing?: _pixerate_editor_canvas.AnimationEasing | string): void;
+    updateKeyframe(ref: _pixerate_editor_canvas.KeyframeRef, patch: _pixerate_editor_canvas.KeyframePatch): void;
+    deleteKeyframes(refs?: readonly _pixerate_editor_canvas.KeyframeRef[]): boolean;
+    setEasing(easing: _pixerate_editor_canvas.AnimationEasing | string | null, refs?: readonly _pixerate_editor_canvas.KeyframeRef[]): boolean;
+    setTrackEnabled(nodeId: string, property: string, enabled: boolean): void;
+    removeTrack(nodeId: string, property: string): void;
+    setMotionPath(nodeId: string, motionPath: {
+        d: string;
+        autoRotate?: boolean;
+    } | null): void;
+    animateNode(nodeId: string, opts: Omit<_pixerate_editor_canvas.AnimateNodeOptions, "properties">): _pixerate_editor_canvas.KeyframeRef[];
+    moveKeyframes(delta: number, refs?: readonly _pixerate_editor_canvas.KeyframeRef[]): number;
+    scaleKeyframes(factor: number, refs?: readonly _pixerate_editor_canvas.KeyframeRef[], pivot?: number): number;
+    copyKeyframes(refs?: readonly _pixerate_editor_canvas.KeyframeRef[]): _pixerate_editor_canvas.AnimationKeyframeClipboard | null;
+    pasteKeyframes(data?: _pixerate_editor_canvas.AnimationKeyframeClipboard | null, nodeIds?: readonly string[], time?: number): _pixerate_editor_canvas.KeyframeRef[];
+    selectKeyframes(refs: readonly _pixerate_editor_canvas.KeyframeRef[], mode?: "replace" | "add" | "toggle"): void;
+    clearSelection(): void;
+    beginKeyframeDrag(refs?: readonly _pixerate_editor_canvas.KeyframeRef[]): void;
+    updateKeyframeDrag(delta: number, opts?: {
+        snap?: boolean;
+        thresholdMs?: number;
+    }): _pixerate_editor_canvas.KeyframeDragState | null;
+    endKeyframeDrag(): number;
+    cancelKeyframeDrag(): void;
+    timelineRows(ids?: Iterable<string>, opts?: Omit<_pixerate_editor_canvas.TimelineRowsOptions, "selection" | "dragDelta">): _pixerate_editor_canvas.TimelineRow[];
+    sampleFrames(opts?: _pixerate_editor_canvas.SampleAnimationOptions): _pixerate_editor_canvas.AnimationFrame[];
+    exportCss(nodeId: string, opts?: _pixerate_editor_canvas.CssExportOptions & {
+        name?: string;
+        selector?: string;
+    }): _pixerate_editor_canvas.CssAnimationExport;
+    toWebAnimations(nodeId: string, opts?: _pixerate_editor_canvas.CssExportOptions): _pixerate_editor_canvas.WebAnimationSpec[];
+    destroy(): void;
+};
+type CanvasAnimation<TNode extends CanvasNode = CanvasNode> = ReturnType<typeof useCanvasAnimation<TNode>>;
+
+interface AnimationTimelineProps {
+    /** The `useCanvasAnimation` result. */
+    animation: CanvasAnimation<any>;
+    /** Nodes whose tracks are listed (default: the selected nodes). */
+    nodeIds?: readonly string[];
+    /** Width of the keyframe lanes in px (default 360). */
+    width?: number;
+    /** Snap distance in screen px while dragging keyframes (default 8; hold Alt to turn snapping off). */
+    snapThreshold?: number;
+    labelOf?: (node: CanvasNode) => string;
+    className?: string;
+}
+/**
+ * Compact timeline: play / pause, record toggle, playhead ruler (drag to scrub), one lane per
+ * animated property of the selected nodes with draggable keyframe diamonds (snapping to other
+ * keys, the playhead and frames; Shift-click adds to the selection, Escape cancels a drag,
+ * Delete removes), an easing picker for the selected keyframes and the loop mode.
+ */
+declare function AnimationTimeline({ animation, nodeIds, width, snapThreshold, labelOf, className }: AnimationTimelineProps): React__default.JSX.Element;
+
+interface UseCanvasComponentsOptions<TNode extends CanvasNode = CanvasNode> extends CanvasComponentSyncOptions {
+    nodes: TNode[];
+    setNodes: (updater: TNode[] | ((prev: TNode[]) => TNode[])) => void;
+    /** When set, every component action is one undoable step. */
+    history?: ArrangeHistoryTarget;
+    /** The selection (default: nodes with `selected`). */
+    getSelectedIds?: () => string[];
+    /** Called by `goToMainComponent` with the main (e.g. to pan the viewport to it). */
+    onReveal?: (node: TNode) => void;
+    /** Sync instances with their mains after every node change (default `true`). */
+    autoSync?: boolean;
+}
+/**
+ * React hook for Figma-style components and instances on a React Flow canvas. After every
+ * node change it records edits inside instances as overrides and rebuilds the instances of
+ * edited main components (keeping overrides). Its actions (`createComponent`,
+ * `createInstance`, `combineAsVariants`, `detachInstance`, `resetOverrides`, `pushOverrides`,
+ * `swapInstance`, `setInstanceProperties`, `restoreMainComponent`, …) are undoable steps
+ * with a `history`, and each has a `can…` check returning `true` or the reason it can't run.
+ */
+declare function useCanvasComponents<TNode extends CanvasNode = CanvasNode>(options: UseCanvasComponentsOptions<TNode>): {
+    sync: () => TNode[];
+    syncAll(): TNode[];
+    createComponent(ids?: Iterable<string>, createOptions?: Omit<_pixerate_editor_canvas.CreateCanvasComponentOptions, keyof CanvasComponentSyncOptions>): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canCreateComponent: (ids?: Iterable<string>) => string | true;
+    combineAsVariants(ids?: Iterable<string>, combineOptions?: {
+        id?: string;
+        name?: string;
+        padding?: number;
+    }): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canCombineAsVariants: (ids?: Iterable<string>) => string | true;
+    createInstance(componentId: string, createOptions?: Omit<_pixerate_editor_canvas.CreateCanvasInstanceOptions, keyof CanvasComponentSyncOptions>): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canCreateInstance(componentId?: string, parentId?: string): true | string;
+    detachInstance(ids?: Iterable<string>): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canDetachInstance(ids?: Iterable<string>): true | string;
+    resetOverrides(id?: string, group?: string): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canResetOverrides(id?: string): true | string;
+    pushOverrides(id?: string): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canPushOverrides(id?: string): true | string;
+    swapInstance(componentId: string, ids?: Iterable<string>, swapOptions?: {
+        keepTextOverridesOnly?: boolean;
+    }): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canSwapInstance(componentId?: string, ids?: Iterable<string>): true | string;
+    setInstanceProperties(properties: Record<string, unknown>, ids?: Iterable<string>): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canSetInstanceProperties(ids?: Iterable<string>): true | string;
+    restoreMainComponent(id?: string): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canRestoreMainComponent(id?: string): true | string;
+    setComponentProperty(componentId: string, name: string, def: _pixerate_editor_canvas.CanvasComponentPropertyDef | null, propertyOptions?: {
+        newName?: string;
+    }): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    bindComponentProperty(layerId: string, field: _pixerate_editor_canvas.CanvasComponentPropertyField, name: string | null): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    goToMainComponent(id?: string): string | undefined;
+    canGoToMainComponent(id?: string): true | string;
+    list: () => {
+        components: _pixerate_editor_canvas.CanvasComponentInfo[];
+        sets: _pixerate_editor_canvas.CanvasComponentSetInfo[];
+    };
+    inspect: (id?: string) => _pixerate_editor_canvas.CanvasInstanceInfo | undefined;
+    rootInstanceOf: (id: string) => string | undefined;
+};
+type CanvasComponents<TNode extends CanvasNode = CanvasNode> = ReturnType<typeof useCanvasComponents<TNode>>;
+
+interface CanvasComponentsPanelProps<TNode extends CanvasNode = CanvasNode> {
+    nodes: TNode[];
+    /** Inserts an instance of a component (or a set's default variant); called on click. */
+    onInsert: (componentId: string) => void;
+    /** Show the search field (default `true`). */
+    search?: boolean;
+    className?: string;
+}
+/**
+ * Components panel: component sets (with their variants) and lone components. Click one to
+ * insert an instance, or drag it onto the canvas (the drag carries the id as
+ * `CANVAS_COMPONENT_DRAG_TYPE`; read it with `getCanvasComponentDragId`).
+ */
+declare function CanvasComponentsPanel<TNode extends CanvasNode = CanvasNode>({ nodes, onInsert, search, className }: CanvasComponentsPanelProps<TNode>): React__default.JSX.Element;
+/** The actions the instance inspector runs (a components controller or hook satisfies it). */
+type CanvasInstanceInspectorActions = Pick<CanvasComponentsController<any>, 'setInstanceProperties' | 'resetOverrides' | 'detachInstance' | 'goToMainComponent' | 'pushOverrides' | 'restoreMainComponent'>;
+interface CanvasInstanceInspectorProps<TNode extends CanvasNode = CanvasNode> {
+    nodes: TNode[];
+    /** An instance, or a layer inside one; nothing is shown otherwise. */
+    nodeId: string | null | undefined;
+    components: CanvasInstanceInspectorActions;
+    /** Receives refusals (e.g. a property value that would nest a component in itself). */
+    onError?: (reason: string) => void;
+    className?: string;
+}
+/**
+ * Instance inspector: main component (or "missing main" with Restore), variant pickers,
+ * component property controls, the overrides of its layers (each resettable), and Reset all,
+ * Detach, Go to main and Push changes.
+ */
+declare function CanvasInstanceInspector<TNode extends CanvasNode = CanvasNode>({ nodes, nodeId, components, onError, className }: CanvasInstanceInspectorProps<TNode>): React__default.JSX.Element | null;
+
+export { AgentPresenceLayer, type AgentPresenceLayerProps, AnimationTimeline, type AnimationTimelineProps, type CanvasAnimation, type CanvasArrange, type CanvasAutoLayout, type CanvasComponents, CanvasComponentsPanel, type CanvasComponentsPanelProps, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, CanvasInstanceInspector, type CanvasInstanceInspectorActions, type CanvasInstanceInspectorProps, type CanvasMeasure, type CanvasScenes, type CanvasTokens, ShapeNode, type ShapeNodeProps, TokenBindingPicker, type TokenBindingPickerProps, TokenModeSwitcher, type TokenModeSwitcherProps, type UseCanvasAnimationOptions, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasClipboardOptions, type UseCanvasComponentsOptions, type UseCanvasDockingOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseCanvasTokensOptions, type UseStreamingCanvasOptions, useCanvasAnimation, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasAutoLayout, useCanvasClipboard, useCanvasComponents, useCanvasDocking, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useCanvasTokens, useStreamingCanvas };

package/dist/canvas/index.d.ts

@@ -2,8 +2,8 @@ import * as React$1 from 'react';
 import React__default from 'react';
 import { AgentPresence } from '@pixerate/editor/agent';
 import * as _pixerate_editor_canvas from '@pixerate/editor/canvas';
-import { CanvasNode, CanvasEdge, IncrementalLayoutOptions, XYPosition, GraphDifferences, Rect, CanvasLayoutOptions, Side, PlaceBesideOptions, getCenteredNodePosition, CanvasDockingCallbacks, DockStrategy, ExplodeNodeOptions, CollapseNodeOptions, ExplosionSnapshot, ArrangeHistoryTarget, SnapGuidesOptions, NodeRectOptions, AutoLayoutOptions, GuideLine, CanvasArrangeAction, ArrangeShortcutBinding, CanvasScenesOptions, CanvasViewport, CanvasScenesStore, CanvasScene, FitViewportOptions, ShapeDescription, AutoLayoutMeasure, CanvasTokenOptions } from '@pixerate/editor/canvas';
-export { AUTO_LAYOUT_DATA_KEY, AlignEdge, ArrangeShortcutBinding, AutoLayout, AutoLayoutAlignContent, AutoLayoutAlignCross, AutoLayoutAlignMain, AutoLayoutCellAlign, AutoLayoutChild, AutoLayoutConstraints, AutoLayoutGrid, AutoLayoutGridArea, AutoLayoutGridCell, AutoLayoutGridGeometry, AutoLayoutGridTrack, AutoLayoutHorizontalConstraint, AutoLayoutInsertTarget, AutoLayoutMeasure, AutoLayoutMode, AutoLayoutOptions, AutoLayoutPadding, AutoLayoutSize, AutoLayoutSizing, AutoLayoutSizingPair, AutoLayoutVerticalConstraint, BezierCommand, BezierPath, BezierPathInput, CANVAS_TOKEN_PROPERTIES, CHILD_LAYOUT_DATA_KEY, CONNECTION_LINE_TYPES, CanvasArrangeAction, CanvasAutoLayoutController, CanvasAutoLayoutControllerOptions, CanvasClipboardPayload, CanvasConnectionLineType, CanvasDockingCallbacks, CanvasEdge, CanvasHeightOptions, CanvasLayoutOptions, CanvasNode, CanvasNodeUpdate, CanvasScene, CanvasScenesState, CanvasScenesStore, CanvasTokenBindingInfo, CanvasTokenOptions, CanvasTokenProperty, CanvasViewport, Clock, CollapseNodeOptions, CombineShapeNodesOptions, CombineShapeNodesRefusal, CombineShapeNodesResult, ConnectorSnap, ConnectorSnapTarget, CubicSegment, DEFAULT_ARRANGE_SHORTCUTS, DirectionalDisplacementOptions, DisplacementDirection, DistributeAxis, DistributeMode, DividePathsResult, DockStrategy, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, GraphDifferences, GuideIndex, GuideLine, IncrementalLayoutOptions, ManualClock, MeasureGuide, MeasureSelectionOptions, MeasureSelectionResult, MultiPolygon, NodeTransition, OffsetPathOptions, OffsetShapeNodesOptions, OutlineShapeStrokesOptions, OutlineStrokeOptions, PathBooleanResult, PathCommand, PathOperand, PathOperandInput, PathOpsOptions, PathShape, PlaceBesideOptions, Point, PolygonBooleanOperation, PolygonBooleanOptions, PolygonFillRule, PolygonInput, PolygonOperand, PolygonPiece, PolygonRing, PolygonToPathOptions, PolygonWithHoles, Position, RESIZE_HANDLES, Rect, RectShape, ReflowDisplacementOptions, RegularPolygonShape, ResizeHandle, SHAPE_DATA_KEY, SHAPE_KINDS, SHAPE_NODE_TYPE, SHAPE_OPERATIONS, ShapeDescription, ShapeKind, ShapeNodePolygonOptions, ShapeOperation, ShapePaint, ShapePathEditOperation, ShapePathEditRefusal, ShapePathEditResult, ShapeRenderData, ShapeSize, Side, SizeDimension, SnapGuidesOptions, SnapNodeResizeOptions, SnapNodeResizeResult, SnapResizeOptions, SnapResizeResult, SnapResult, StarShape, StrokeCap, StrokeJoin, TOKEN_BINDINGS_DATA_KEY, TOKEN_MODES_DATA_KEY, TrajectoryFunction, TrajectoryPoint, XYPosition, ZOrderOperation, alignNodes, applyConstraints, applyNodeUpdates, applyShapeCombination, applyShapeReplacement, bezierPathArea, bezierPathBounds, bezierPathLength, bezierPathPointAtLength, bezierPathSignedArea, bezierPathToSvg, bindCanvasToken, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canCombineShapeNodes, canOffsetShapeNodes, canOutlineShapeNodeStrokes, canvasHeight, centerNodes, centre, clampLayoutSize, combineShapeNodes, computeNodesBoundingBox, computeSnapGuides, connectedOnly, countPathSegments, createBezierTrajectory, createCanvasAutoLayoutController, createCanvasScenesStore, createFanOutTrajectory, createGuideIndex, createNodeGuideIndex, cubicPointAt, cubicsToPathData, dashContours, defaultEasing, detachTokenBindings, distanceToBezierPath, distributeNodes, dividePaths, dividePolygons, ensureLayout, estimateCanvasHeight, estimateNodeSize, excludePaths, findConnectorSnap, fitCubicRun, fitCubics, fitFreehandPath, fitPathData, fitViewportToNodes, fitViewportToRect, flattenSvgPath, flowSide, getAbsolutePosition, getAutoLayout, getAutoLayoutGrid, getAutoLayoutInsertTarget, getBindableTokenProperties, getCanvasTokenProperty, getCenteredNodePosition, getChildLayout, getEffectiveTokenModes, getFlowChildren, getLayoutParent, getLayoutSizing, getLayoutedNodes, getNodeRect, getNodeShape, getNodeSize, getNodeTokenBindings, getNodeTokenModes, getResizingNodeRect, getShapeRenderData, getShapeSvg, getTokenPropertyScope, getTokensForProperty, handlePoint, hasVisibleStroke, inferResizeHandle, inspectNodeTokens, intersectPaths, intersectPolygons, invertNodeUpdates, isAutoLayoutFrame, isEventFromTextInput, isLocked, isMeasureModifierHeld, isShapeDescription, isShapeNode, isStraightCubic, isValidCanvasNode, isValidUrl, layoutAll, layoutBounds, layoutFrame, layoutUp, layoutUpMany, linearPositionTrajectory, linearTrajectory, lockNodes, makeSizingCoherent, matchArrangeShortcut, matchSize, measureBetween, measureLabel, measureSelection, measureToLine, mergeNodeUpdates, moveLayoutChild, multiPolygonArea, multiPolygonBounds, nearestHandlePositions, normalizeBezierPath, offsetPath, offsetShapeNodes, oppositePosition, outlineShapeNodeStrokes, outlineStroke, overlaps, parseCanvasClipboardData, parseCanvasScenes, parseSvgPath, pathBoolean, placeBeside, pointInBezierPath, pointInMultiPolygon, pointInRings, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, pruneCanvasTokenModes, readNodeStyleProperty, readStyleSize, realClock, relayoutUpdates, remapPastedNodes, reorderNodes, repositionNodesTo, resizeHandleAxes, resolveCanvasTokens, resolvePadding, revertShapeCombination, ringSignedArea, runMultiNodeTransition, serializeCanvasNodes, setCanvasTokenMode, shapeNodeToBezierPath, shapeNodeToPolygon, shapeToBezierPath, shapeToPolygon, sideToPosition, simplifyRing, snapNodeDrag, snapNodeResize, snapResize, snapToGrid, strokeOutlineRings, subtractPaths, subtractPolygons, toBezierPath, toggleLockNodes, transformBezierPath, unionPolygons, unitePaths, unlockNodes, withStyleSize, writeNodeStyleProperty, xorPolygons } from '@pixerate/editor/canvas';
+import { CanvasNode, CanvasEdge, IncrementalLayoutOptions, XYPosition, GraphDifferences, Rect, CanvasLayoutOptions, Side, PlaceBesideOptions, getCenteredNodePosition, CanvasDockingCallbacks, DockStrategy, ExplodeNodeOptions, CollapseNodeOptions, ExplosionSnapshot, ArrangeHistoryTarget, SnapGuidesOptions, NodeRectOptions, AutoLayoutOptions, GuideLine, CanvasArrangeAction, ArrangeShortcutBinding, CanvasScenesOptions, CanvasViewport, CanvasScenesStore, CanvasScene, FitViewportOptions, ShapeDescription, AutoLayoutMeasure, CanvasTokenOptions, AnimationHistoryTarget, Clock, AnimationLoopMode, AnimatableProperty, CanvasComponentSyncOptions, CanvasComponentsController } from '@pixerate/editor/canvas';
+export { ANIMATABLE_PROPERTIES, ANIMATION_DATA_KEY, ANIMATION_EASING_LABELS, ANIMATION_EASING_PRESETS, ANIMATION_TIME_EPSILON, AUTO_LAYOUT_DATA_KEY, AlignEdge, AnimatableProperty, AnimateNodeOptions, AnimationDocument, AnimationEasing, AnimationEasingPreset, AnimationEditError, AnimationEditErrorCode, AnimationFrame, AnimationHistoryTarget, AnimationKeyframe, AnimationKeyframeClipboard, AnimationLoopMode, AnimationMotionPath, AnimationOverrides, AnimationPlayer, AnimationPlayerOptions, AnimationPlayerState, AnimationTrack, AnimationValue, AnimationValueType, ArrangeShortcutBinding, AutoLayout, AutoLayoutAlignContent, AutoLayoutAlignCross, AutoLayoutAlignMain, AutoLayoutCellAlign, AutoLayoutChild, AutoLayoutConstraints, AutoLayoutGrid, AutoLayoutGridArea, AutoLayoutGridCell, AutoLayoutGridGeometry, AutoLayoutGridTrack, AutoLayoutHorizontalConstraint, AutoLayoutInsertTarget, AutoLayoutMeasure, AutoLayoutMode, AutoLayoutOptions, AutoLayoutPadding, AutoLayoutSize, AutoLayoutSizing, AutoLayoutSizingPair, AutoLayoutVerticalConstraint, BezierCommand, BezierPath, BezierPathInput, CANVAS_COMPONENT_DRAG_TYPE, CANVAS_TOKEN_PROPERTIES, CHILD_LAYOUT_DATA_KEY, CONNECTION_LINE_TYPES, CSS_ANIMATION_PROPERTIES, CUBIC_BEZIER_PRESETS, CanvasAnimationController, CanvasAnimationControllerOptions, CanvasAnimationState, CanvasArrangeAction, CanvasAutoLayoutController, CanvasAutoLayoutControllerOptions, CanvasClipboardPayload, CanvasComponentInfo, CanvasComponentPropertyDef, CanvasComponentPropertyField, CanvasComponentResult, CanvasComponentSetInfo, CanvasComponentSyncOptions, CanvasComponentsController, CanvasComponentsControllerOptions, CanvasConnectionLineType, CanvasDockingCallbacks, CanvasEdge, CanvasHeightOptions, CanvasInstanceInfo, CanvasLayoutOptions, CanvasNode, CanvasNodeUpdate, CanvasScene, CanvasScenesState, CanvasScenesStore, CanvasTokenBindingInfo, CanvasTokenOptions, CanvasTokenProperty, CanvasViewport, Clock, CollapseNodeOptions, CombineShapeNodesOptions, CombineShapeNodesRefusal, CombineShapeNodesResult, ConnectorSnap, ConnectorSnapTarget, CssAnimationExport, CssExportOptions, CubicBezierEasing, CubicSegment, DEFAULT_ARRANGE_SHORTCUTS, DirectionalDisplacementOptions, DisplacementDirection, DistributeAxis, DistributeMode, DividePathsResult, DockStrategy, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, GraphDifferences, GuideIndex, GuideLine, IncrementalLayoutOptions, KeyframeDragState, KeyframePatch, KeyframeRef, KeyframeSnap, MAX_KEYFRAME_REFS, ManualClock, MeasureGuide, MeasureSelectionOptions, MeasureSelectionResult, MultiPolygon, NodeAnimation, NodeTransition, OffsetPathOptions, OffsetShapeNodesOptions, OklabColor, OutlineShapeStrokesOptions, OutlineStrokeOptions, PathBooleanResult, PathCommand, PathOperand, PathOperandInput, PathOpsOptions, PathShape, PlaceBesideOptions, Point, PolygonBooleanOperation, PolygonBooleanOptions, PolygonFillRule, PolygonInput, PolygonOperand, PolygonPiece, PolygonRing, PolygonToPathOptions, PolygonWithHoles, Position, RESIZE_HANDLES, Rect, RectShape, ReflowDisplacementOptions, RegularPolygonShape, ResizeHandle, SHAPE_DATA_KEY, SHAPE_KINDS, SHAPE_NODE_TYPE, SHAPE_OPERATIONS, ShapeDescription, ShapeKind, ShapeNodePolygonOptions, ShapeOperation, ShapePaint, ShapePathEditOperation, ShapePathEditRefusal, ShapePathEditResult, ShapeRenderData, ShapeSize, Side, SizeDimension, SnapGuidesOptions, SnapNodeResizeOptions, SnapNodeResizeResult, SnapResizeOptions, SnapResizeResult, SnapResult, SpringEasing, StarShape, StrokeCap, StrokeJoin, TOKEN_BINDINGS_DATA_KEY, TOKEN_MODES_DATA_KEY, TimelineKeyframe, TimelineRow, TrajectoryFunction, TrajectoryPoint, WebAnimationSpec, XYPosition, ZOrderOperation, addKeyframesAtTime, alignNodes, animateNode, applyAnimation, applyAnimationOverrides, applyConstraints, applyNodeUpdates, applyShapeCombination, applyShapeReplacement, bezierPathArea, bezierPathBounds, bezierPathLength, bezierPathPointAtLength, bezierPathSignedArea, bezierPathToSvg, bindCanvasComponentProperty, bindCanvasToken, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canCombineShapeNodes, canOffsetShapeNodes, canOutlineShapeNodeStrokes, 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, fitFreehandPath, fitPathData, fitViewportToNodes, 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, getNodeTokenBindings, getNodeTokenModes, 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, isValidCanvasNode, isValidUrl, layoutAll, layoutBounds, layoutFrame, layoutUp, layoutUpMany, linearPositionTrajectory, linearTrajectory, listCanvasComponents, lockNodes, makeSizingCoherent, matchArrangeShortcut, matchSize, measureBetween, measureLabel, 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, polygonArea, polygonBoolean, 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, withNodeAnimation, withStyleSize, wouldCreateComponentCycle, wrapAnimationTime, writeNodeStyleProperty, xToTime, xorPolygons } from '@pixerate/editor/canvas';
 import { TokenState, TokenStore, TokenModeContext } from '@pixerate/editor/tokens';
 
 interface AgentPresenceLayerProps {
@@ -478,4 +478,215 @@ interface TokenModeSwitcherProps<TNode extends CanvasNode = CanvasNode> {
  */
 declare function TokenModeSwitcher<TNode extends CanvasNode = CanvasNode>({ state, nodes, nodeIds, onChange, options, showSingleMode, className, }: TokenModeSwitcherProps<TNode>): React__default.JSX.Element | null;
 
-export { AgentPresenceLayer, type AgentPresenceLayerProps, type CanvasArrange, type CanvasAutoLayout, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, type CanvasMeasure, type CanvasScenes, type CanvasTokens, ShapeNode, type ShapeNodeProps, TokenBindingPicker, type TokenBindingPickerProps, TokenModeSwitcher, type TokenModeSwitcherProps, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasClipboardOptions, type UseCanvasDockingOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseCanvasTokensOptions, type UseStreamingCanvasOptions, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasAutoLayout, useCanvasClipboard, useCanvasDocking, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useCanvasTokens, useStreamingCanvas };
+interface UseCanvasAnimationOptions<TNode extends CanvasNode = CanvasNode> {
+    nodes: TNode[];
+    setNodes: (updater: TNode[] | ((prev: TNode[]) => TNode[])) => void;
+    /** When set, keyframe edits are undoable steps. */
+    history?: AnimationHistoryTarget;
+    /** Ids acted on without explicit ids (default: nodes with `selected: true`). */
+    getSelectedIds?: () => string[];
+    /** Playback time source (default `realClock`); pass a `ManualClock` for tests or rendering. Read once. */
+    clock?: Clock;
+    /** Fixed timeline length (ms); omitted = the last keyframe, at least `minDuration`. Read once. */
+    duration?: number;
+    minDuration?: number;
+    loop?: AnimationLoopMode;
+    playbackRate?: number;
+    fps?: number;
+    recording?: boolean;
+    properties?: readonly AnimatableProperty[];
+    onTime?: (time: number) => void;
+}
+/**
+ * React hook for keyframe animation on the canvas: a playhead player (play / pause / seek /
+ * scrub, loop, ping-pong, rate), record mode, undoable keyframe edits, multi-keyframe drags
+ * with snapping, copy / paste and CSS / Web Animations export.
+ *
+ * Render `displayNodes` (the nodes evaluated at the playhead) in React Flow and pass its edits
+ * back through `applyDisplayChanges`:
+ * `onNodesChange={(c) => animation.applyDisplayChanges(applyNodeChanges(c, animation.displayNodes))}`.
+ * Animated properties are then keyed at the playhead instead of being overwritten.
+ */
+declare function useCanvasAnimation<TNode extends CanvasNode = CanvasNode>(options: UseCanvasAnimationOptions<TNode>): {
+    state: _pixerate_editor_canvas.CanvasAnimationState;
+    time: number;
+    playing: boolean;
+    recording: boolean;
+    duration: number;
+    selection: readonly _pixerate_editor_canvas.KeyframeRef[];
+    drag: _pixerate_editor_canvas.KeyframeDragState | null;
+    /** The nodes evaluated at the playhead; render these. */
+    displayNodes: TNode[];
+    clipboard: _pixerate_editor_canvas.AnimationKeyframeClipboard | null;
+    player: _pixerate_editor_canvas.AnimationPlayer;
+    getState: () => _pixerate_editor_canvas.CanvasAnimationState;
+    subscribe(listener: (state: _pixerate_editor_canvas.CanvasAnimationState) => void): () => void;
+    refresh(): void;
+    play: () => void;
+    pause: () => void;
+    toggle: () => void;
+    stop: () => void;
+    seek: (time: number) => void;
+    scrub: (time: number) => void;
+    endScrub: () => void;
+    setLoop: (loop: AnimationLoopMode) => void;
+    setPlaybackRate: (rate: number) => void;
+    setDuration(ms: number | null): void;
+    setFps(value: number): void;
+    setRecording(on: boolean): void;
+    toggleRecording(): void;
+    nextKeyframe(ids?: Iterable<string>): number | null;
+    previousKeyframe(ids?: Iterable<string>): number | null;
+    display: (nodes?: readonly TNode[] | undefined) => TNode[];
+    applyDisplayChanges(next: TNode[]): _pixerate_editor_canvas.KeyframeRef[];
+    addKeyframe(ids?: Iterable<string>, keys?: readonly string[], time?: number): _pixerate_editor_canvas.KeyframeRef[];
+    setKeyframe(nodeId: string, property: string, value: _pixerate_editor_canvas.AnimationValue, time?: number, easing?: _pixerate_editor_canvas.AnimationEasing | string): void;
+    updateKeyframe(ref: _pixerate_editor_canvas.KeyframeRef, patch: _pixerate_editor_canvas.KeyframePatch): void;
+    deleteKeyframes(refs?: readonly _pixerate_editor_canvas.KeyframeRef[]): boolean;
+    setEasing(easing: _pixerate_editor_canvas.AnimationEasing | string | null, refs?: readonly _pixerate_editor_canvas.KeyframeRef[]): boolean;
+    setTrackEnabled(nodeId: string, property: string, enabled: boolean): void;
+    removeTrack(nodeId: string, property: string): void;
+    setMotionPath(nodeId: string, motionPath: {
+        d: string;
+        autoRotate?: boolean;
+    } | null): void;
+    animateNode(nodeId: string, opts: Omit<_pixerate_editor_canvas.AnimateNodeOptions, "properties">): _pixerate_editor_canvas.KeyframeRef[];
+    moveKeyframes(delta: number, refs?: readonly _pixerate_editor_canvas.KeyframeRef[]): number;
+    scaleKeyframes(factor: number, refs?: readonly _pixerate_editor_canvas.KeyframeRef[], pivot?: number): number;
+    copyKeyframes(refs?: readonly _pixerate_editor_canvas.KeyframeRef[]): _pixerate_editor_canvas.AnimationKeyframeClipboard | null;
+    pasteKeyframes(data?: _pixerate_editor_canvas.AnimationKeyframeClipboard | null, nodeIds?: readonly string[], time?: number): _pixerate_editor_canvas.KeyframeRef[];
+    selectKeyframes(refs: readonly _pixerate_editor_canvas.KeyframeRef[], mode?: "replace" | "add" | "toggle"): void;
+    clearSelection(): void;
+    beginKeyframeDrag(refs?: readonly _pixerate_editor_canvas.KeyframeRef[]): void;
+    updateKeyframeDrag(delta: number, opts?: {
+        snap?: boolean;
+        thresholdMs?: number;
+    }): _pixerate_editor_canvas.KeyframeDragState | null;
+    endKeyframeDrag(): number;
+    cancelKeyframeDrag(): void;
+    timelineRows(ids?: Iterable<string>, opts?: Omit<_pixerate_editor_canvas.TimelineRowsOptions, "selection" | "dragDelta">): _pixerate_editor_canvas.TimelineRow[];
+    sampleFrames(opts?: _pixerate_editor_canvas.SampleAnimationOptions): _pixerate_editor_canvas.AnimationFrame[];
+    exportCss(nodeId: string, opts?: _pixerate_editor_canvas.CssExportOptions & {
+        name?: string;
+        selector?: string;
+    }): _pixerate_editor_canvas.CssAnimationExport;
+    toWebAnimations(nodeId: string, opts?: _pixerate_editor_canvas.CssExportOptions): _pixerate_editor_canvas.WebAnimationSpec[];
+    destroy(): void;
+};
+type CanvasAnimation<TNode extends CanvasNode = CanvasNode> = ReturnType<typeof useCanvasAnimation<TNode>>;
+
+interface AnimationTimelineProps {
+    /** The `useCanvasAnimation` result. */
+    animation: CanvasAnimation<any>;
+    /** Nodes whose tracks are listed (default: the selected nodes). */
+    nodeIds?: readonly string[];
+    /** Width of the keyframe lanes in px (default 360). */
+    width?: number;
+    /** Snap distance in screen px while dragging keyframes (default 8; hold Alt to turn snapping off). */
+    snapThreshold?: number;
+    labelOf?: (node: CanvasNode) => string;
+    className?: string;
+}
+/**
+ * Compact timeline: play / pause, record toggle, playhead ruler (drag to scrub), one lane per
+ * animated property of the selected nodes with draggable keyframe diamonds (snapping to other
+ * keys, the playhead and frames; Shift-click adds to the selection, Escape cancels a drag,
+ * Delete removes), an easing picker for the selected keyframes and the loop mode.
+ */
+declare function AnimationTimeline({ animation, nodeIds, width, snapThreshold, labelOf, className }: AnimationTimelineProps): React__default.JSX.Element;
+
+interface UseCanvasComponentsOptions<TNode extends CanvasNode = CanvasNode> extends CanvasComponentSyncOptions {
+    nodes: TNode[];
+    setNodes: (updater: TNode[] | ((prev: TNode[]) => TNode[])) => void;
+    /** When set, every component action is one undoable step. */
+    history?: ArrangeHistoryTarget;
+    /** The selection (default: nodes with `selected`). */
+    getSelectedIds?: () => string[];
+    /** Called by `goToMainComponent` with the main (e.g. to pan the viewport to it). */
+    onReveal?: (node: TNode) => void;
+    /** Sync instances with their mains after every node change (default `true`). */
+    autoSync?: boolean;
+}
+/**
+ * React hook for Figma-style components and instances on a React Flow canvas. After every
+ * node change it records edits inside instances as overrides and rebuilds the instances of
+ * edited main components (keeping overrides). Its actions (`createComponent`,
+ * `createInstance`, `combineAsVariants`, `detachInstance`, `resetOverrides`, `pushOverrides`,
+ * `swapInstance`, `setInstanceProperties`, `restoreMainComponent`, …) are undoable steps
+ * with a `history`, and each has a `can…` check returning `true` or the reason it can't run.
+ */
+declare function useCanvasComponents<TNode extends CanvasNode = CanvasNode>(options: UseCanvasComponentsOptions<TNode>): {
+    sync: () => TNode[];
+    syncAll(): TNode[];
+    createComponent(ids?: Iterable<string>, createOptions?: Omit<_pixerate_editor_canvas.CreateCanvasComponentOptions, keyof CanvasComponentSyncOptions>): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canCreateComponent: (ids?: Iterable<string>) => string | true;
+    combineAsVariants(ids?: Iterable<string>, combineOptions?: {
+        id?: string;
+        name?: string;
+        padding?: number;
+    }): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canCombineAsVariants: (ids?: Iterable<string>) => string | true;
+    createInstance(componentId: string, createOptions?: Omit<_pixerate_editor_canvas.CreateCanvasInstanceOptions, keyof CanvasComponentSyncOptions>): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canCreateInstance(componentId?: string, parentId?: string): true | string;
+    detachInstance(ids?: Iterable<string>): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canDetachInstance(ids?: Iterable<string>): true | string;
+    resetOverrides(id?: string, group?: string): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canResetOverrides(id?: string): true | string;
+    pushOverrides(id?: string): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canPushOverrides(id?: string): true | string;
+    swapInstance(componentId: string, ids?: Iterable<string>, swapOptions?: {
+        keepTextOverridesOnly?: boolean;
+    }): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canSwapInstance(componentId?: string, ids?: Iterable<string>): true | string;
+    setInstanceProperties(properties: Record<string, unknown>, ids?: Iterable<string>): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canSetInstanceProperties(ids?: Iterable<string>): true | string;
+    restoreMainComponent(id?: string): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canRestoreMainComponent(id?: string): true | string;
+    setComponentProperty(componentId: string, name: string, def: _pixerate_editor_canvas.CanvasComponentPropertyDef | null, propertyOptions?: {
+        newName?: string;
+    }): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    bindComponentProperty(layerId: string, field: _pixerate_editor_canvas.CanvasComponentPropertyField, name: string | null): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    goToMainComponent(id?: string): string | undefined;
+    canGoToMainComponent(id?: string): true | string;
+    list: () => {
+        components: _pixerate_editor_canvas.CanvasComponentInfo[];
+        sets: _pixerate_editor_canvas.CanvasComponentSetInfo[];
+    };
+    inspect: (id?: string) => _pixerate_editor_canvas.CanvasInstanceInfo | undefined;
+    rootInstanceOf: (id: string) => string | undefined;
+};
+type CanvasComponents<TNode extends CanvasNode = CanvasNode> = ReturnType<typeof useCanvasComponents<TNode>>;
+
+interface CanvasComponentsPanelProps<TNode extends CanvasNode = CanvasNode> {
+    nodes: TNode[];
+    /** Inserts an instance of a component (or a set's default variant); called on click. */
+    onInsert: (componentId: string) => void;
+    /** Show the search field (default `true`). */
+    search?: boolean;
+    className?: string;
+}
+/**
+ * Components panel: component sets (with their variants) and lone components. Click one to
+ * insert an instance, or drag it onto the canvas (the drag carries the id as
+ * `CANVAS_COMPONENT_DRAG_TYPE`; read it with `getCanvasComponentDragId`).
+ */
+declare function CanvasComponentsPanel<TNode extends CanvasNode = CanvasNode>({ nodes, onInsert, search, className }: CanvasComponentsPanelProps<TNode>): React__default.JSX.Element;
+/** The actions the instance inspector runs (a components controller or hook satisfies it). */
+type CanvasInstanceInspectorActions = Pick<CanvasComponentsController<any>, 'setInstanceProperties' | 'resetOverrides' | 'detachInstance' | 'goToMainComponent' | 'pushOverrides' | 'restoreMainComponent'>;
+interface CanvasInstanceInspectorProps<TNode extends CanvasNode = CanvasNode> {
+    nodes: TNode[];
+    /** An instance, or a layer inside one; nothing is shown otherwise. */
+    nodeId: string | null | undefined;
+    components: CanvasInstanceInspectorActions;
+    /** Receives refusals (e.g. a property value that would nest a component in itself). */
+    onError?: (reason: string) => void;
+    className?: string;
+}
+/**
+ * Instance inspector: main component (or "missing main" with Restore), variant pickers,
+ * component property controls, the overrides of its layers (each resettable), and Reset all,
+ * Detach, Go to main and Push changes.
+ */
+declare function CanvasInstanceInspector<TNode extends CanvasNode = CanvasNode>({ nodes, nodeId, components, onError, className }: CanvasInstanceInspectorProps<TNode>): React__default.JSX.Element | null;
+
+export { AgentPresenceLayer, type AgentPresenceLayerProps, AnimationTimeline, type AnimationTimelineProps, type CanvasAnimation, type CanvasArrange, type CanvasAutoLayout, type CanvasComponents, CanvasComponentsPanel, type CanvasComponentsPanelProps, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, CanvasInstanceInspector, type CanvasInstanceInspectorActions, type CanvasInstanceInspectorProps, type CanvasMeasure, type CanvasScenes, type CanvasTokens, ShapeNode, type ShapeNodeProps, TokenBindingPicker, type TokenBindingPickerProps, TokenModeSwitcher, type TokenModeSwitcherProps, type UseCanvasAnimationOptions, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasClipboardOptions, type UseCanvasComponentsOptions, type UseCanvasDockingOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseCanvasTokensOptions, type UseStreamingCanvasOptions, useCanvasAnimation, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasAutoLayout, useCanvasClipboard, useCanvasComponents, useCanvasDocking, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useCanvasTokens, useStreamingCanvas };