@pixerate/editor-react 0.18.1 → 0.19.1

package/dist/canvas/index.d.cts

@@ -3,8 +3,9 @@ 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, 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';
+export { ANIMATABLE_PROPERTIES, ANIMATION_DATA_KEY, ANIMATION_EASING_LABELS, ANIMATION_EASING_PRESETS, ANIMATION_TIME_EPSILON, AUTO_LAYOUT_DATA_KEY, AddCanvasVariantOptions, 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, SetCanvasVariantPropertiesOptions, 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, addCanvasVariant, 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, getNextVariantValues, 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, removeCanvasVariant, removeTrack, renameCanvasVariantProperty, renameCanvasVariantValue, reorderNodes, repositionNodesTo, resetCanvasInstanceOverrides, resizeHandleAxes, resolveCanvasTokens, resolveEasing, resolvePadding, restoreCanvasMainComponent, revertShapeCombination, rgbToOklab, ringSignedArea, runMultiNodeTransition, sampleAnimationFrames, scaleKeyframes, serializeCanvasNodes, setCanvasComponentProperty, setCanvasInstanceProperties, setCanvasTokenMode, setCanvasVariantProperties, 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';
+import * as _pixerate_editor_animation from '@pixerate/editor/animation';
 
 interface AgentPresenceLayerProps {
     presences: AgentPresence[];
@@ -518,7 +519,7 @@ declare function useCanvasAnimation<TNode extends CanvasNode = CanvasNode>(optio
     /** The nodes evaluated at the playhead; render these. */
     displayNodes: TNode[];
     clipboard: _pixerate_editor_canvas.AnimationKeyframeClipboard | null;
-    player: _pixerate_editor_canvas.AnimationPlayer;
+    player: _pixerate_editor_animation.AnimationPlayer;
     getState: () => _pixerate_editor_canvas.CanvasAnimationState;
     subscribe(listener: (state: _pixerate_editor_canvas.CanvasAnimationState) => void): () => void;
     refresh(): void;
@@ -540,10 +541,10 @@ declare function useCanvasAnimation<TNode extends CanvasNode = CanvasNode>(optio
     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;
+    setKeyframe(nodeId: string, property: string, value: _pixerate_editor_animation.AnimationValue, time?: number, easing?: _pixerate_editor_animation.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;
+    setEasing(easing: _pixerate_editor_animation.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: {
@@ -645,6 +646,18 @@ declare function useCanvasComponents<TNode extends CanvasNode = CanvasNode>(opti
     setComponentProperty(componentId: string, name: string, def: _pixerate_editor_canvas.CanvasComponentPropertyDef | null, propertyOptions?: {
         newName?: string;
     }): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    addVariant(setId?: string, variantOptions?: Omit<_pixerate_editor_canvas.AddCanvasVariantOptions, keyof CanvasComponentSyncOptions>): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canAddVariant(setId?: string, variantOptions?: Omit<_pixerate_editor_canvas.AddCanvasVariantOptions, keyof CanvasComponentSyncOptions>): true | string;
+    removeVariant(variantId?: string): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canRemoveVariant(variantId?: string): true | string;
+    setVariantProperties(values: Record<string, string>, variantId?: string, variantOptions?: {
+        defaultValue?: string;
+    }): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canSetVariantProperties(values?: Record<string, string>, variantId?: string): true | string;
+    renameVariantProperty(name: string, newName: string, setId?: string): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canRenameVariantProperty(name?: string, newName?: string, setId?: string): true | string;
+    renameVariantValue(property: string, value: string, newValue: string, setId?: string): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canRenameVariantValue(property?: string, value?: string, newValue?: string, setId?: string): true | string;
     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;
@@ -657,10 +670,19 @@ declare function useCanvasComponents<TNode extends CanvasNode = CanvasNode>(opti
 };
 type CanvasComponents<TNode extends CanvasNode = CanvasNode> = ReturnType<typeof useCanvasComponents<TNode>>;
 
+/** The variant-editing actions the components panel runs (a components controller or hook satisfies it). */
+type CanvasComponentsPanelActions = Pick<CanvasComponentsController<any>, 'addVariant' | 'removeVariant' | 'setVariantProperties' | 'renameVariantProperty' | 'renameVariantValue'>;
 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;
+    /**
+     * Variant editing: with it, sets get "+ Variant" and a properties editor (rename properties
+     * and values inline), and variants a menu (also on right click) to edit, duplicate or remove them.
+     */
+    components?: CanvasComponentsPanelActions;
+    /** Receives refusals (e.g. a duplicate variant combination). */
+    onError?: (reason: string) => void;
     /** Show the search field (default `true`). */
     search?: boolean;
     className?: string;
@@ -668,9 +690,11 @@ interface CanvasComponentsPanelProps<TNode extends CanvasNode = CanvasNode> {
 /**
  * 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`).
+ * `CANVAS_COMPONENT_DRAG_TYPE`; read it with `getCanvasComponentDragId`). With `components`,
+ * sets and variants can be edited: "+ Variant", rename properties / values, edit, duplicate or
+ * remove a variant.
  */
-declare function CanvasComponentsPanel<TNode extends CanvasNode = CanvasNode>({ nodes, onInsert, search, className }: CanvasComponentsPanelProps<TNode>): React__default.JSX.Element;
+declare function CanvasComponentsPanel<TNode extends CanvasNode = CanvasNode>({ nodes, onInsert, components, onError, 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> {
@@ -689,4 +713,4 @@ interface CanvasInstanceInspectorProps<TNode extends CanvasNode = CanvasNode> {
  */
 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 };
+export { AgentPresenceLayer, type AgentPresenceLayerProps, AnimationTimeline, type AnimationTimelineProps, type CanvasAnimation, type CanvasArrange, type CanvasAutoLayout, type CanvasComponents, CanvasComponentsPanel, type CanvasComponentsPanelActions, 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

@@ -3,8 +3,9 @@ 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, 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';
+export { ANIMATABLE_PROPERTIES, ANIMATION_DATA_KEY, ANIMATION_EASING_LABELS, ANIMATION_EASING_PRESETS, ANIMATION_TIME_EPSILON, AUTO_LAYOUT_DATA_KEY, AddCanvasVariantOptions, 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, SetCanvasVariantPropertiesOptions, 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, addCanvasVariant, 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, getNextVariantValues, 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, removeCanvasVariant, removeTrack, renameCanvasVariantProperty, renameCanvasVariantValue, reorderNodes, repositionNodesTo, resetCanvasInstanceOverrides, resizeHandleAxes, resolveCanvasTokens, resolveEasing, resolvePadding, restoreCanvasMainComponent, revertShapeCombination, rgbToOklab, ringSignedArea, runMultiNodeTransition, sampleAnimationFrames, scaleKeyframes, serializeCanvasNodes, setCanvasComponentProperty, setCanvasInstanceProperties, setCanvasTokenMode, setCanvasVariantProperties, 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';
+import * as _pixerate_editor_animation from '@pixerate/editor/animation';
 
 interface AgentPresenceLayerProps {
     presences: AgentPresence[];
@@ -518,7 +519,7 @@ declare function useCanvasAnimation<TNode extends CanvasNode = CanvasNode>(optio
     /** The nodes evaluated at the playhead; render these. */
     displayNodes: TNode[];
     clipboard: _pixerate_editor_canvas.AnimationKeyframeClipboard | null;
-    player: _pixerate_editor_canvas.AnimationPlayer;
+    player: _pixerate_editor_animation.AnimationPlayer;
     getState: () => _pixerate_editor_canvas.CanvasAnimationState;
     subscribe(listener: (state: _pixerate_editor_canvas.CanvasAnimationState) => void): () => void;
     refresh(): void;
@@ -540,10 +541,10 @@ declare function useCanvasAnimation<TNode extends CanvasNode = CanvasNode>(optio
     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;
+    setKeyframe(nodeId: string, property: string, value: _pixerate_editor_animation.AnimationValue, time?: number, easing?: _pixerate_editor_animation.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;
+    setEasing(easing: _pixerate_editor_animation.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: {
@@ -645,6 +646,18 @@ declare function useCanvasComponents<TNode extends CanvasNode = CanvasNode>(opti
     setComponentProperty(componentId: string, name: string, def: _pixerate_editor_canvas.CanvasComponentPropertyDef | null, propertyOptions?: {
         newName?: string;
     }): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    addVariant(setId?: string, variantOptions?: Omit<_pixerate_editor_canvas.AddCanvasVariantOptions, keyof CanvasComponentSyncOptions>): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canAddVariant(setId?: string, variantOptions?: Omit<_pixerate_editor_canvas.AddCanvasVariantOptions, keyof CanvasComponentSyncOptions>): true | string;
+    removeVariant(variantId?: string): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canRemoveVariant(variantId?: string): true | string;
+    setVariantProperties(values: Record<string, string>, variantId?: string, variantOptions?: {
+        defaultValue?: string;
+    }): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canSetVariantProperties(values?: Record<string, string>, variantId?: string): true | string;
+    renameVariantProperty(name: string, newName: string, setId?: string): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canRenameVariantProperty(name?: string, newName?: string, setId?: string): true | string;
+    renameVariantValue(property: string, value: string, newValue: string, setId?: string): _pixerate_editor_canvas.CanvasComponentResult<TNode>;
+    canRenameVariantValue(property?: string, value?: string, newValue?: string, setId?: string): true | string;
     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;
@@ -657,10 +670,19 @@ declare function useCanvasComponents<TNode extends CanvasNode = CanvasNode>(opti
 };
 type CanvasComponents<TNode extends CanvasNode = CanvasNode> = ReturnType<typeof useCanvasComponents<TNode>>;
 
+/** The variant-editing actions the components panel runs (a components controller or hook satisfies it). */
+type CanvasComponentsPanelActions = Pick<CanvasComponentsController<any>, 'addVariant' | 'removeVariant' | 'setVariantProperties' | 'renameVariantProperty' | 'renameVariantValue'>;
 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;
+    /**
+     * Variant editing: with it, sets get "+ Variant" and a properties editor (rename properties
+     * and values inline), and variants a menu (also on right click) to edit, duplicate or remove them.
+     */
+    components?: CanvasComponentsPanelActions;
+    /** Receives refusals (e.g. a duplicate variant combination). */
+    onError?: (reason: string) => void;
     /** Show the search field (default `true`). */
     search?: boolean;
     className?: string;
@@ -668,9 +690,11 @@ interface CanvasComponentsPanelProps<TNode extends CanvasNode = CanvasNode> {
 /**
  * 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`).
+ * `CANVAS_COMPONENT_DRAG_TYPE`; read it with `getCanvasComponentDragId`). With `components`,
+ * sets and variants can be edited: "+ Variant", rename properties / values, edit, duplicate or
+ * remove a variant.
  */
-declare function CanvasComponentsPanel<TNode extends CanvasNode = CanvasNode>({ nodes, onInsert, search, className }: CanvasComponentsPanelProps<TNode>): React__default.JSX.Element;
+declare function CanvasComponentsPanel<TNode extends CanvasNode = CanvasNode>({ nodes, onInsert, components, onError, 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> {
@@ -689,4 +713,4 @@ interface CanvasInstanceInspectorProps<TNode extends CanvasNode = CanvasNode> {
  */
 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 };
+export { AgentPresenceLayer, type AgentPresenceLayerProps, AnimationTimeline, type AnimationTimelineProps, type CanvasAnimation, type CanvasArrange, type CanvasAutoLayout, type CanvasComponents, CanvasComponentsPanel, type CanvasComponentsPanelActions, 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.js

@@ -1901,28 +1901,64 @@ import {
   listCanvasComponents
 } from "@pixerate/editor/canvas";
 import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function InlineField({ value, label, onCommit }) {
+  return /* @__PURE__ */ jsx6(
+    "input",
+    {
+      type: "text",
+      "aria-label": label,
+      defaultValue: value,
+      className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs",
+      onBlur: (e) => {
+        const next = e.currentTarget.value.trim();
+        if (next && next !== value) onCommit(next);
+        else e.currentTarget.value = value;
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter") e.currentTarget.blur();
+        if (e.key === "Escape") {
+          e.currentTarget.value = value;
+          e.currentTarget.blur();
+        }
+      }
+    },
+    value
+  );
+}
 function CanvasComponentsPanel({
   nodes,
   onInsert,
+  components,
+  onError,
   search = true,
   className = ""
 }) {
   const [query, setQuery] = useState5("");
-  const { components, sets } = listCanvasComponents(nodes);
+  const [propsOpen, setPropsOpen] = useState5(null);
+  const [menuFor, setMenuFor] = useState5(null);
+  const [editing, setEditing] = useState5(null);
+  const { components: all, sets } = listCanvasComponents(nodes);
   const q = query.trim().toLowerCase();
   const match = (name) => !q || name.toLowerCase().includes(q);
-  const lone = components.filter((c) => !c.setId && match(c.name));
+  const lone = all.filter((c) => !c.setId && match(c.name));
   const shownSets = sets.filter((s) => match(s.name) || s.variants.some((v) => match(v.name)));
-  const item = (id, name, count, extra = {}) => /* @__PURE__ */ jsxs6(
+  const report = (result) => {
+    if (result && !result.ok && result.reason) onError?.(result.reason);
+    return !!result?.ok;
+  };
+  const small = "shrink-0 rounded px-1 text-[10px] text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40";
+  const menuItem = "rounded px-2 py-0.5 text-left hover:bg-muted disabled:opacity-40";
+  const item = (id, name, count, extra = {}, onContextMenu) => /* @__PURE__ */ jsxs6(
     "button",
     {
       type: "button",
       draggable: true,
       "data-component-id": id,
       ...extra,
-      className: "flex w-full items-center justify-between gap-2 rounded px-2 py-1 text-left text-xs hover:bg-muted",
+      className: "flex w-full min-w-0 items-center justify-between gap-2 rounded px-2 py-1 text-left text-xs hover:bg-muted",
       title: `Insert an instance of ${name}`,
       onClick: () => onInsert(id),
+      onContextMenu,
       onDragStart: (e) => {
         e.dataTransfer.setData(CANVAS_COMPONENT_DRAG_TYPE, id);
         e.dataTransfer.setData("text/plain", name);
@@ -1950,11 +1986,165 @@ function CanvasComponentsPanel({
       }
     ) : null,
     shownSets.map((set) => /* @__PURE__ */ jsxs6("div", { "data-component-set": set.id, className: "flex flex-col", children: [
-      item(set.id, set.name, set.variants.reduce((sum, v) => sum + v.instanceCount, 0), { "data-kind": "set" }),
-      /* @__PURE__ */ jsx6("div", { className: "ml-3 flex flex-col border-l border-border pl-1", children: set.variants.map((v) => item(v.id, v.name, v.instanceCount, { "data-kind": "variant" })) })
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
+        item(set.id, set.name, set.variants.reduce((sum, v) => sum + v.instanceCount, 0), { "data-kind": "set" }),
+        components ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              className: small,
+              "data-action": "add-variant",
+              "aria-label": `Add a variant to ${set.name}`,
+              title: "Add a variant (duplicates the default variant)",
+              onClick: () => report(components.addVariant(set.id)),
+              children: "+\xA0Variant"
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              className: small,
+              "data-action": "variant-properties",
+              "aria-expanded": propsOpen === set.id,
+              "aria-label": `Edit the variant properties of ${set.name}`,
+              title: "Rename variant properties and values",
+              onClick: () => setPropsOpen(propsOpen === set.id ? null : set.id),
+              children: "\u2699"
+            }
+          )
+        ] }) : null
+      ] }),
+      components && propsOpen === set.id ? /* @__PURE__ */ jsx6("div", { "data-variant-properties": set.id, className: "ml-3 flex flex-col gap-1 border-l border-border py-1 pl-2", children: set.options.map((option) => /* @__PURE__ */ jsxs6("div", { "data-variant-option": option.name, className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx6(
+          InlineField,
+          {
+            value: option.name,
+            label: `Rename property ${option.name}`,
+            onCommit: (next) => report(components.renameVariantProperty(option.name, next, set.id))
+          }
+        ),
+        /* @__PURE__ */ jsx6("div", { className: "ml-2 flex flex-wrap gap-1", children: option.values.map((value) => /* @__PURE__ */ jsx6(
+          InlineField,
+          {
+            value,
+            label: `Rename ${option.name} value ${value}`,
+            onCommit: (next) => report(components.renameVariantValue(option.name, value, next, set.id))
+          },
+          value
+        )) })
+      ] }, option.name)) }) : null,
+      /* @__PURE__ */ jsx6("div", { className: "ml-3 flex flex-col border-l border-border pl-1", children: set.variants.map((v) => /* @__PURE__ */ jsxs6("div", { "data-variant-row": v.id, className: "flex flex-col", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
+          item(
+            v.id,
+            v.name,
+            v.instanceCount,
+            { "data-kind": "variant" },
+            components ? (e) => {
+              e.preventDefault();
+              setMenuFor(v.id);
+            } : void 0
+          ),
+          components ? /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              className: small,
+              "data-action": "variant-menu",
+              "aria-haspopup": "menu",
+              "aria-expanded": menuFor === v.id,
+              "aria-label": `Variant actions for ${v.name}`,
+              onClick: () => setMenuFor(menuFor === v.id ? null : v.id),
+              children: "\u22EF"
+            }
+          ) : null
+        ] }),
+        components && menuFor === v.id ? /* @__PURE__ */ jsxs6("div", { role: "menu", "data-variant-menu": v.id, className: "ml-2 flex flex-col rounded border border-border bg-background p-1 shadow", children: [
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: menuItem,
+              "data-action": "edit-variant",
+              onClick: () => {
+                setEditing(v.id);
+                setMenuFor(null);
+              },
+              children: "Edit values\u2026"
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: menuItem,
+              "data-action": "duplicate-variant",
+              onClick: () => {
+                setMenuFor(null);
+                report(components.addVariant(set.id, { from: v.id }));
+              },
+              children: "Duplicate"
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: menuItem,
+              "data-action": "remove-variant",
+              disabled: set.variants.length < 2,
+              title: set.variants.length < 2 ? "A component set needs at least one variant." : "Its instances switch to the closest variant",
+              onClick: () => {
+                setMenuFor(null);
+                report(components.removeVariant(v.id));
+              },
+              children: "Remove variant"
+            }
+          )
+        ] }) : null,
+        components && editing === v.id ? /* @__PURE__ */ jsxs6(
+          "form",
+          {
+            "data-variant-editor": v.id,
+            className: "ml-2 flex flex-col gap-1 py-1",
+            onSubmit: (e) => {
+              e.preventDefault();
+              const values = {};
+              for (const input of e.currentTarget.querySelectorAll("input[data-variant-value]")) {
+                values[input.dataset.variantValue] = input.value;
+              }
+              if (report(components.setVariantProperties(values, v.id))) setEditing(null);
+            },
+            children: [
+              set.options.map((option) => /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx6("span", { className: "w-16 shrink-0 truncate text-muted-foreground", children: option.name }),
+                /* @__PURE__ */ jsx6(
+                  "input",
+                  {
+                    type: "text",
+                    "data-variant-value": option.name,
+                    "aria-label": `${option.name} value`,
+                    defaultValue: v.variant?.[option.name] ?? "",
+                    className: "min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 text-xs"
+                  }
+                )
+              ] }, option.name)),
+              /* @__PURE__ */ jsxs6("div", { className: "flex gap-1", children: [
+                /* @__PURE__ */ jsx6("button", { type: "submit", className: "rounded border border-border px-2 py-0.5 hover:bg-muted", "data-action": "save-variant", children: "Save" }),
+                /* @__PURE__ */ jsx6("button", { type: "button", className: "rounded px-2 py-0.5 hover:bg-muted", "data-action": "cancel-variant", onClick: () => setEditing(null), children: "Cancel" })
+              ] })
+            ]
+          }
+        ) : null
+      ] }, v.id)) })
     ] }, set.id)),
     lone.map((c) => item(c.id, c.name, c.instanceCount, { "data-kind": "component" })),
-    components.length === 0 ? /* @__PURE__ */ jsx6("p", { className: "text-muted-foreground", children: "No components yet. Select a frame and choose Create Component." }) : null
+    all.length === 0 ? /* @__PURE__ */ jsx6("p", { className: "text-muted-foreground", children: "No components yet. Select a frame and choose Create Component." }) : null
   ] });
 }
 function CanvasInstanceInspector({
@@ -2086,6 +2276,12 @@ import {
   setCanvasComponentProperty,
   bindCanvasComponentProperty,
   restoreCanvasMainComponent,
+  addCanvasVariant,
+  removeCanvasVariant,
+  setCanvasVariantProperties,
+  renameCanvasVariantProperty,
+  renameCanvasVariantValue,
+  getNextVariantValues,
   syncCanvasComponents,
   syncCanvasInstance,
   syncAllCanvasInstances,
@@ -2136,6 +2332,7 @@ export {
   TOKEN_MODES_DATA_KEY,
   TokenBindingPicker,
   TokenModeSwitcher,
+  addCanvasVariant,
   addKeyframesAtTime,
   alignNodes,
   animateNode,
@@ -2241,6 +2438,7 @@ export {
   getLayoutParent,
   getLayoutSizing,
   getLayoutedNodes2 as getLayoutedNodes,
+  getNextVariantValues,
   getNodeAnimation,
   getNodeOverrides,
   getNodeRect,
@@ -2339,7 +2537,10 @@ export {
   recordAnimationChanges,
   relayoutUpdates,
   remapPastedNodes2 as remapPastedNodes,
+  removeCanvasVariant,
   removeTrack,
+  renameCanvasVariantProperty,
+  renameCanvasVariantValue,
   reorderNodes,
   repositionNodesTo,
   resetCanvasInstanceOverrides,
@@ -2358,6 +2559,7 @@ export {
   setCanvasComponentProperty,
   setCanvasInstanceProperties,
   setCanvasTokenMode3 as setCanvasTokenMode,
+  setCanvasVariantProperties,
   setKeyframe,
   setKeyframeEasing,
   setMotionPath,