@pixerate/editor-react 0.16.0 → 0.18.0

package/dist/canvas/index.d.cts

@@ -2,8 +2,9 @@ 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 } 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, CHILD_LAYOUT_DATA_KEY, CONNECTION_LINE_TYPES, CanvasArrangeAction, CanvasAutoLayoutController, CanvasAutoLayoutControllerOptions, CanvasClipboardPayload, CanvasConnectionLineType, CanvasDockingCallbacks, CanvasEdge, CanvasHeightOptions, CanvasLayoutOptions, CanvasNode, CanvasNodeUpdate, CanvasScene, CanvasScenesState, CanvasScenesStore, CanvasViewport, Clock, CollapseNodeOptions, CombineShapeNodesOptions, CombineShapeNodesRefusal, CombineShapeNodesResult, ConnectorSnap, ConnectorSnapTarget, CubicSegment, DEFAULT_ARRANGE_SHORTCUTS, DirectionalDisplacementOptions, DisplacementDirection, DistributeAxis, DistributeMode, DockStrategy, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, GraphDifferences, GuideIndex, GuideLine, IncrementalLayoutOptions, ManualClock, MeasureGuide, MeasureSelectionOptions, MeasureSelectionResult, MultiPolygon, NodeTransition, PathCommand, 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, ShapeRenderData, ShapeSize, Side, SizeDimension, SnapGuidesOptions, SnapNodeResizeOptions, SnapNodeResizeResult, SnapResizeOptions, SnapResizeResult, SnapResult, StarShape, TrajectoryFunction, TrajectoryPoint, XYPosition, ZOrderOperation, alignNodes, applyConstraints, applyNodeUpdates, applyShapeCombination, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canCombineShapeNodes, canvasHeight, centerNodes, centre, clampLayoutSize, combineShapeNodes, computeNodesBoundingBox, computeSnapGuides, connectedOnly, createBezierTrajectory, createCanvasAutoLayoutController, createCanvasScenesStore, createFanOutTrajectory, createGuideIndex, createNodeGuideIndex, cubicPointAt, cubicsToPathData, defaultEasing, distributeNodes, dividePolygons, ensureLayout, estimateCanvasHeight, estimateNodeSize, findConnectorSnap, fitCubicRun, fitCubics, fitFreehandPath, fitPathData, fitViewportToNodes, fitViewportToRect, flattenSvgPath, flowSide, getAbsolutePosition, getAutoLayout, getAutoLayoutGrid, getAutoLayoutInsertTarget, getCenteredNodePosition, getChildLayout, getFlowChildren, getLayoutParent, getLayoutSizing, getLayoutedNodes, getNodeRect, getNodeShape, getNodeSize, getResizingNodeRect, getShapeRenderData, getShapeSvg, handlePoint, inferResizeHandle, 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, oppositePosition, overlaps, parseCanvasClipboardData, parseCanvasScenes, parseSvgPath, placeBeside, pointInMultiPolygon, pointInRings, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, readStyleSize, realClock, relayoutUpdates, remapPastedNodes, reorderNodes, repositionNodesTo, resizeHandleAxes, resolvePadding, revertShapeCombination, ringSignedArea, runMultiNodeTransition, serializeCanvasNodes, shapeNodeToPolygon, shapeToPolygon, sideToPosition, simplifyRing, snapNodeDrag, snapNodeResize, snapResize, snapToGrid, subtractPolygons, toggleLockNodes, unionPolygons, unlockNodes, withStyleSize, 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 {
     presences: AgentPresence[];
@@ -197,6 +198,10 @@ declare function useCanvasArrange<TNode extends CanvasNode = CanvasNode>(options
     exclude: (ids?: Iterable<string>, o?: _pixerate_editor_canvas.CombineShapeNodesOptions) => _pixerate_editor_canvas.CombineShapeNodesResult<TNode>;
     divide: (ids?: Iterable<string>, o?: _pixerate_editor_canvas.CombineShapeNodesOptions) => _pixerate_editor_canvas.CombineShapeNodesResult<TNode>;
     canCombineShapes: (ids?: Iterable<string>) => boolean;
+    offsetShapes(distance: number, ids?: Iterable<string>, offsetOptions?: _pixerate_editor_canvas.OffsetShapeNodesOptions): _pixerate_editor_canvas.ShapePathEditResult<TNode>;
+    canOffsetShapes: (ids?: Iterable<string>) => boolean;
+    outlineStroke(ids?: Iterable<string>, outlineOptions?: _pixerate_editor_canvas.OutlineShapeStrokesOptions): _pixerate_editor_canvas.ShapePathEditResult<TNode>;
+    canOutlineStroke: (ids?: Iterable<string>) => boolean;
     runAction(action: CanvasArrangeAction): boolean;
     beginDrag(ids?: Iterable<string>): void;
     drag(ids?: Iterable<string>): _pixerate_editor_canvas.SnapNodeDragResult | null;
@@ -415,4 +420,273 @@ declare function useCanvasAutoLayout<TNode extends CanvasNode = CanvasNode>(opti
 };
 type CanvasAutoLayout = ReturnType<typeof useCanvasAutoLayout>;
 
-export { AgentPresenceLayer, type AgentPresenceLayerProps, type CanvasArrange, type CanvasAutoLayout, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, type CanvasMeasure, type CanvasScenes, ShapeNode, type ShapeNodeProps, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasClipboardOptions, type UseCanvasDockingOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseStreamingCanvasOptions, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasAutoLayout, useCanvasClipboard, useCanvasDocking, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useStreamingCanvas };
+interface UseCanvasTokensOptions<TNode extends CanvasNode> extends Omit<CanvasTokenOptions, 'modes'> {
+    store: TokenStore;
+    nodes: TNode[];
+    setNodes: (update: TNode[] | ((nodes: TNode[]) => TNode[])) => void;
+    /** Modes for nodes without an explicit mode up their tree (e.g. the page's). */
+    modes?: TokenModeContext;
+}
+interface CanvasTokens {
+    state: TokenState;
+    /** Binds (or with `null` unbinds) a property of the nodes; throws `TokenError` when refused. */
+    bind: (ids: Iterable<string>, propertyKey: string, variableId: string | null) => void;
+    /** Sets (or with `null` clears) an explicit mode on frames / groups; descendants follow. */
+    setMode: (ids: Iterable<string>, collectionId: string, modeId: string | null) => void;
+    /** The modes a node is in (its own, inherited, then the root `modes`). */
+    modesOf: (nodeId: string) => Record<string, string>;
+}
+/**
+ * Keeps token-bound node properties resolved: whenever the token store, the nodes or the root
+ * modes change, bound values are written into the nodes (only when something changed, so it
+ * does not loop). Deleting a variable detaches the nodes bound to it, keeping their values.
+ */
+declare function useCanvasTokens<TNode extends CanvasNode>(options: UseCanvasTokensOptions<TNode>): CanvasTokens;
+
+interface TokenBindingPickerProps<TNode extends CanvasNode = CanvasNode> {
+    state: TokenState;
+    nodes: TNode[];
+    /** Nodes to bind (the first one decides which properties are listed). */
+    selectedIds: readonly string[];
+    /** Receives the nodes with the binding applied and resolved. */
+    onChange: (nodes: TNode[]) => void;
+    options?: CanvasTokenOptions;
+    /** Limit to these property keys (in this order). */
+    properties?: readonly string[];
+    onError?: (error: Error) => void;
+    className?: string;
+}
+/**
+ * Inspector rows that bind node properties (fill, stroke, opacity, radius, gap, padding, text
+ * colour / size, …) to variables of the right type and scope, showing each resolved value.
+ */
+declare function TokenBindingPicker<TNode extends CanvasNode = CanvasNode>({ state, nodes, selectedIds, onChange, options, properties, onError, className, }: TokenBindingPickerProps<TNode>): React__default.JSX.Element | null;
+interface TokenModeSwitcherProps<TNode extends CanvasNode = CanvasNode> {
+    state: TokenState;
+    nodes: TNode[];
+    /** Frames / groups whose explicit mode is set (the first one's choice is shown). */
+    nodeIds: readonly string[];
+    onChange: (nodes: TNode[]) => void;
+    options?: CanvasTokenOptions;
+    /** Show collections with a single mode too (default `false`). */
+    showSingleMode?: boolean;
+    className?: string;
+}
+/**
+ * Per-collection mode pickers for the selected frames: "Auto" (inherit from the parent, then
+ * the root modes, then the default mode) or an explicit mode that descendants inherit.
+ */
+declare function TokenModeSwitcher<TNode extends CanvasNode = CanvasNode>({ state, nodes, nodeIds, onChange, options, showSingleMode, className, }: TokenModeSwitcherProps<TNode>): React__default.JSX.Element | null;
+
+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 };