@pixerate/editor-react 0.15.0 → 0.17.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, GuideLine, CanvasArrangeAction, ArrangeShortcutBinding, CanvasScenesOptions, CanvasViewport, CanvasScenesStore, CanvasScene, FitViewportOptions, ShapeDescription } from '@pixerate/editor/canvas';
-export { AlignEdge, ArrangeShortcutBinding, CONNECTION_LINE_TYPES, CanvasArrangeAction, 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, applyNodeUpdates, applyShapeCombination, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canCombineShapeNodes, canvasHeight, centerNodes, centre, combineShapeNodes, computeNodesBoundingBox, computeSnapGuides, connectedOnly, createBezierTrajectory, createCanvasScenesStore, createFanOutTrajectory, createGuideIndex, createNodeGuideIndex, cubicPointAt, cubicsToPathData, defaultEasing, distributeNodes, dividePolygons, ensureLayout, estimateCanvasHeight, estimateNodeSize, findConnectorSnap, fitCubicRun, fitCubics, fitFreehandPath, fitPathData, fitViewportToNodes, fitViewportToRect, flattenSvgPath, flowSide, getAbsolutePosition, getCenteredNodePosition, getLayoutedNodes, getNodeRect, getNodeShape, getNodeSize, getResizingNodeRect, getShapeRenderData, getShapeSvg, handlePoint, inferResizeHandle, intersectPolygons, invertNodeUpdates, isEventFromTextInput, isLocked, isMeasureModifierHeld, isShapeDescription, isShapeNode, isStraightCubic, isValidCanvasNode, isValidUrl, layoutBounds, linearPositionTrajectory, linearTrajectory, lockNodes, matchArrangeShortcut, matchSize, measureBetween, measureLabel, measureSelection, measureToLine, multiPolygonArea, multiPolygonBounds, nearestHandlePositions, oppositePosition, overlaps, parseCanvasClipboardData, parseCanvasScenes, parseSvgPath, placeBeside, pointInMultiPolygon, pointInRings, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, readStyleSize, realClock, remapPastedNodes, reorderNodes, repositionNodesTo, resizeHandleAxes, 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 } from '@pixerate/editor/canvas';
+export { AUTO_LAYOUT_DATA_KEY, AlignEdge, ArrangeShortcutBinding, AutoLayout, AutoLayoutAlignContent, AutoLayoutAlignCross, AutoLayoutAlignMain, AutoLayoutCellAlign, AutoLayoutChild, AutoLayoutConstraints, AutoLayoutGrid, AutoLayoutGridArea, AutoLayoutGridCell, AutoLayoutGridGeometry, AutoLayoutGridTrack, AutoLayoutHorizontalConstraint, AutoLayoutInsertTarget, AutoLayoutMeasure, AutoLayoutMode, AutoLayoutOptions, AutoLayoutPadding, AutoLayoutSize, AutoLayoutSizing, AutoLayoutSizingPair, AutoLayoutVerticalConstraint, BezierCommand, BezierPath, BezierPathInput, CANVAS_TOKEN_PROPERTIES, CHILD_LAYOUT_DATA_KEY, CONNECTION_LINE_TYPES, CanvasArrangeAction, CanvasAutoLayoutController, CanvasAutoLayoutControllerOptions, CanvasClipboardPayload, CanvasConnectionLineType, CanvasDockingCallbacks, CanvasEdge, CanvasHeightOptions, CanvasLayoutOptions, CanvasNode, CanvasNodeUpdate, CanvasScene, CanvasScenesState, CanvasScenesStore, CanvasTokenBindingInfo, CanvasTokenOptions, CanvasTokenProperty, CanvasViewport, Clock, CollapseNodeOptions, CombineShapeNodesOptions, CombineShapeNodesRefusal, CombineShapeNodesResult, ConnectorSnap, ConnectorSnapTarget, CubicSegment, DEFAULT_ARRANGE_SHORTCUTS, DirectionalDisplacementOptions, DisplacementDirection, DistributeAxis, DistributeMode, DividePathsResult, DockStrategy, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, GraphDifferences, GuideIndex, GuideLine, IncrementalLayoutOptions, ManualClock, MeasureGuide, MeasureSelectionOptions, MeasureSelectionResult, MultiPolygon, NodeTransition, OffsetPathOptions, OffsetShapeNodesOptions, OutlineShapeStrokesOptions, OutlineStrokeOptions, PathBooleanResult, PathCommand, PathOperand, PathOperandInput, PathOpsOptions, PathShape, PlaceBesideOptions, Point, PolygonBooleanOperation, PolygonBooleanOptions, PolygonFillRule, PolygonInput, PolygonOperand, PolygonPiece, PolygonRing, PolygonToPathOptions, PolygonWithHoles, Position, RESIZE_HANDLES, Rect, RectShape, ReflowDisplacementOptions, RegularPolygonShape, ResizeHandle, SHAPE_DATA_KEY, SHAPE_KINDS, SHAPE_NODE_TYPE, SHAPE_OPERATIONS, ShapeDescription, ShapeKind, ShapeNodePolygonOptions, ShapeOperation, ShapePaint, ShapePathEditOperation, ShapePathEditRefusal, ShapePathEditResult, ShapeRenderData, ShapeSize, Side, SizeDimension, SnapGuidesOptions, SnapNodeResizeOptions, SnapNodeResizeResult, SnapResizeOptions, SnapResizeResult, SnapResult, StarShape, StrokeCap, StrokeJoin, TOKEN_BINDINGS_DATA_KEY, TOKEN_MODES_DATA_KEY, TrajectoryFunction, TrajectoryPoint, XYPosition, ZOrderOperation, alignNodes, applyConstraints, applyNodeUpdates, applyShapeCombination, applyShapeReplacement, bezierPathArea, bezierPathBounds, bezierPathLength, bezierPathPointAtLength, bezierPathSignedArea, bezierPathToSvg, bindCanvasToken, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canCombineShapeNodes, canOffsetShapeNodes, canOutlineShapeNodeStrokes, canvasHeight, centerNodes, centre, clampLayoutSize, combineShapeNodes, computeNodesBoundingBox, computeSnapGuides, connectedOnly, countPathSegments, createBezierTrajectory, createCanvasAutoLayoutController, createCanvasScenesStore, createFanOutTrajectory, createGuideIndex, createNodeGuideIndex, cubicPointAt, cubicsToPathData, dashContours, defaultEasing, detachTokenBindings, distanceToBezierPath, distributeNodes, dividePaths, dividePolygons, ensureLayout, estimateCanvasHeight, estimateNodeSize, excludePaths, findConnectorSnap, fitCubicRun, fitCubics, fitFreehandPath, fitPathData, fitViewportToNodes, fitViewportToRect, flattenSvgPath, flowSide, getAbsolutePosition, getAutoLayout, getAutoLayoutGrid, getAutoLayoutInsertTarget, getBindableTokenProperties, getCanvasTokenProperty, getCenteredNodePosition, getChildLayout, getEffectiveTokenModes, getFlowChildren, getLayoutParent, getLayoutSizing, getLayoutedNodes, getNodeRect, getNodeShape, getNodeSize, getNodeTokenBindings, getNodeTokenModes, getResizingNodeRect, getShapeRenderData, getShapeSvg, getTokenPropertyScope, getTokensForProperty, handlePoint, hasVisibleStroke, inferResizeHandle, inspectNodeTokens, intersectPaths, intersectPolygons, invertNodeUpdates, isAutoLayoutFrame, isEventFromTextInput, isLocked, isMeasureModifierHeld, isShapeDescription, isShapeNode, isStraightCubic, isValidCanvasNode, isValidUrl, layoutAll, layoutBounds, layoutFrame, layoutUp, layoutUpMany, linearPositionTrajectory, linearTrajectory, lockNodes, makeSizingCoherent, matchArrangeShortcut, matchSize, measureBetween, measureLabel, measureSelection, measureToLine, mergeNodeUpdates, moveLayoutChild, multiPolygonArea, multiPolygonBounds, nearestHandlePositions, normalizeBezierPath, offsetPath, offsetShapeNodes, oppositePosition, outlineShapeNodeStrokes, outlineStroke, overlaps, parseCanvasClipboardData, parseCanvasScenes, parseSvgPath, pathBoolean, placeBeside, pointInBezierPath, pointInMultiPolygon, pointInRings, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, pruneCanvasTokenModes, readNodeStyleProperty, readStyleSize, realClock, relayoutUpdates, remapPastedNodes, reorderNodes, repositionNodesTo, resizeHandleAxes, resolveCanvasTokens, resolvePadding, revertShapeCombination, ringSignedArea, runMultiNodeTransition, serializeCanvasNodes, setCanvasTokenMode, shapeNodeToBezierPath, shapeNodeToPolygon, shapeToBezierPath, shapeToPolygon, sideToPosition, simplifyRing, snapNodeDrag, snapNodeResize, snapResize, snapToGrid, strokeOutlineRings, subtractPaths, subtractPolygons, toBezierPath, toggleLockNodes, transformBezierPath, unionPolygons, unitePaths, unlockNodes, withStyleSize, writeNodeStyleProperty, xorPolygons } from '@pixerate/editor/canvas';
+import { TokenState, TokenStore, TokenModeContext } from '@pixerate/editor/tokens';
 
 interface AgentPresenceLayerProps {
     presences: AgentPresence[];
@@ -164,6 +165,8 @@ interface UseCanvasArrangeOptions<TNode extends CanvasNode = CanvasNode> {
     /** Turns drag snapping off (default `true`). */
     snapping?: boolean;
     rectOptions?: NodeRectOptions;
+    /** Re-run auto layout around arranged nodes in the same undo step (see `useCanvasAutoLayout`). */
+    autoLayout?: boolean | AutoLayoutOptions;
 }
 /**
  * React hook for Freeform-style arrangement on React Flow: align, distribute, make same size,
@@ -195,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;
@@ -359,4 +366,116 @@ interface ShapeNodeProps {
  */
 declare function ShapeNode({ data, width, height, selected, className, children }: ShapeNodeProps): React__default.JSX.Element | null;
 
-export { AgentPresenceLayer, type AgentPresenceLayerProps, type CanvasArrange, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, type CanvasMeasure, type CanvasScenes, ShapeNode, type ShapeNodeProps, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasClipboardOptions, type UseCanvasDockingOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseStreamingCanvasOptions, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasClipboard, useCanvasDocking, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useStreamingCanvas };
+interface UseCanvasAutoLayoutOptions<TNode extends CanvasNode = CanvasNode> {
+    nodes: TNode[];
+    setNodes: (updater: TNode[] | ((prev: TNode[]) => TNode[])) => void;
+    /** When set, the hook's actions (add / remove / resize / reorder / apply) are undoable steps. */
+    history?: ArrangeHistoryTarget;
+    /** Turns automatic relayout off (`applyAutoLayout` still works). Default `true`. */
+    enabled?: boolean;
+    /** Reorder flow children by dragging them within their frame (default `true`). */
+    dragReorder?: boolean;
+    /** Text measuring and size hooks (default: xyflow `measured` sizes). */
+    measure?: AutoLayoutMeasure;
+    rectOptions?: NodeRectOptions;
+}
+/**
+ * React hook for Figma-style auto layout on React Flow sub-flows. Frames are nodes with
+ * `data.layout`; their children (`parentId`) are stacked, wrapped or placed on a grid, with
+ * hug / fill / fixed sizing, min / max, padding, alignment and constraints.
+ *
+ * Pass every `onNodesChange` batch through `noteChanges` before applying it
+ * (`onNodesChange={(c) => setNodes((n) => applyNodeChanges(autoLayout.noteChanges(c), n))}`):
+ * after the nodes update the hook relayouts frames whose children were measured, resized,
+ * added or removed, and turns drags of a flow child inside its frame into a reorder (one
+ * undoable step). Render `guides` (the drop marker) with `<CanvasGuidesLayer>`.
+ */
+declare function useCanvasAutoLayout<TNode extends CanvasNode = CanvasNode>(options: UseCanvasAutoLayoutOptions<TNode>): {
+    /** Drop marker of the active reorder drag (flow coordinates). */
+    guides: GuideLine[];
+    hasPending: boolean;
+    applyAutoLayout(frameId?: string): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    layoutUpdates(ids: Iterable<string>): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    relayout(ids: Iterable<string>): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    addNode(node: TNode, addOptions?: {
+        index?: number;
+    }): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    removeNodes(ids: Iterable<string>): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    resizeNode(id: string, size: {
+        width?: number;
+        height?: number;
+    }): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    moveChild(childId: string, index: number): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    getInsertTarget(id: string, point?: _pixerate_editor_canvas.XYPosition): _pixerate_editor_canvas.AutoLayoutInsertTarget | undefined;
+    beginReorderDrag(id: string): void;
+    dragReorder(id: string, point?: _pixerate_editor_canvas.XYPosition): _pixerate_editor_canvas.AutoLayoutInsertTarget | undefined;
+    endReorderDrag(id: string, point?: _pixerate_editor_canvas.XYPosition): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    noteChanges<TChange extends _pixerate_editor_canvas.PositionChangeLike>(changes: TChange[]): TChange[];
+    noteRemoved(removed: Iterable<{
+        id: string;
+        parentId?: string;
+    }>): void;
+    flush(): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    isFrame: (id: string) => boolean;
+};
+type CanvasAutoLayout = ReturnType<typeof useCanvasAutoLayout>;
+
+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;
+
+export { AgentPresenceLayer, type AgentPresenceLayerProps, type CanvasArrange, type CanvasAutoLayout, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, type CanvasMeasure, type CanvasScenes, type CanvasTokens, ShapeNode, type ShapeNodeProps, TokenBindingPicker, type TokenBindingPickerProps, TokenModeSwitcher, type TokenModeSwitcherProps, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasClipboardOptions, type UseCanvasDockingOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseCanvasTokensOptions, type UseStreamingCanvasOptions, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasAutoLayout, useCanvasClipboard, useCanvasDocking, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useCanvasTokens, useStreamingCanvas };

package/dist/canvas/index.d.ts

@@ -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, GuideLine, CanvasArrangeAction, ArrangeShortcutBinding, CanvasScenesOptions, CanvasViewport, CanvasScenesStore, CanvasScene, FitViewportOptions, ShapeDescription } from '@pixerate/editor/canvas';
-export { AlignEdge, ArrangeShortcutBinding, CONNECTION_LINE_TYPES, CanvasArrangeAction, 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, applyNodeUpdates, applyShapeCombination, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canCombineShapeNodes, canvasHeight, centerNodes, centre, combineShapeNodes, computeNodesBoundingBox, computeSnapGuides, connectedOnly, createBezierTrajectory, createCanvasScenesStore, createFanOutTrajectory, createGuideIndex, createNodeGuideIndex, cubicPointAt, cubicsToPathData, defaultEasing, distributeNodes, dividePolygons, ensureLayout, estimateCanvasHeight, estimateNodeSize, findConnectorSnap, fitCubicRun, fitCubics, fitFreehandPath, fitPathData, fitViewportToNodes, fitViewportToRect, flattenSvgPath, flowSide, getAbsolutePosition, getCenteredNodePosition, getLayoutedNodes, getNodeRect, getNodeShape, getNodeSize, getResizingNodeRect, getShapeRenderData, getShapeSvg, handlePoint, inferResizeHandle, intersectPolygons, invertNodeUpdates, isEventFromTextInput, isLocked, isMeasureModifierHeld, isShapeDescription, isShapeNode, isStraightCubic, isValidCanvasNode, isValidUrl, layoutBounds, linearPositionTrajectory, linearTrajectory, lockNodes, matchArrangeShortcut, matchSize, measureBetween, measureLabel, measureSelection, measureToLine, multiPolygonArea, multiPolygonBounds, nearestHandlePositions, oppositePosition, overlaps, parseCanvasClipboardData, parseCanvasScenes, parseSvgPath, placeBeside, pointInMultiPolygon, pointInRings, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, readStyleSize, realClock, remapPastedNodes, reorderNodes, repositionNodesTo, resizeHandleAxes, 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 } from '@pixerate/editor/canvas';
+export { AUTO_LAYOUT_DATA_KEY, AlignEdge, ArrangeShortcutBinding, AutoLayout, AutoLayoutAlignContent, AutoLayoutAlignCross, AutoLayoutAlignMain, AutoLayoutCellAlign, AutoLayoutChild, AutoLayoutConstraints, AutoLayoutGrid, AutoLayoutGridArea, AutoLayoutGridCell, AutoLayoutGridGeometry, AutoLayoutGridTrack, AutoLayoutHorizontalConstraint, AutoLayoutInsertTarget, AutoLayoutMeasure, AutoLayoutMode, AutoLayoutOptions, AutoLayoutPadding, AutoLayoutSize, AutoLayoutSizing, AutoLayoutSizingPair, AutoLayoutVerticalConstraint, BezierCommand, BezierPath, BezierPathInput, CANVAS_TOKEN_PROPERTIES, CHILD_LAYOUT_DATA_KEY, CONNECTION_LINE_TYPES, CanvasArrangeAction, CanvasAutoLayoutController, CanvasAutoLayoutControllerOptions, CanvasClipboardPayload, CanvasConnectionLineType, CanvasDockingCallbacks, CanvasEdge, CanvasHeightOptions, CanvasLayoutOptions, CanvasNode, CanvasNodeUpdate, CanvasScene, CanvasScenesState, CanvasScenesStore, CanvasTokenBindingInfo, CanvasTokenOptions, CanvasTokenProperty, CanvasViewport, Clock, CollapseNodeOptions, CombineShapeNodesOptions, CombineShapeNodesRefusal, CombineShapeNodesResult, ConnectorSnap, ConnectorSnapTarget, CubicSegment, DEFAULT_ARRANGE_SHORTCUTS, DirectionalDisplacementOptions, DisplacementDirection, DistributeAxis, DistributeMode, DividePathsResult, DockStrategy, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, GraphDifferences, GuideIndex, GuideLine, IncrementalLayoutOptions, ManualClock, MeasureGuide, MeasureSelectionOptions, MeasureSelectionResult, MultiPolygon, NodeTransition, OffsetPathOptions, OffsetShapeNodesOptions, OutlineShapeStrokesOptions, OutlineStrokeOptions, PathBooleanResult, PathCommand, PathOperand, PathOperandInput, PathOpsOptions, PathShape, PlaceBesideOptions, Point, PolygonBooleanOperation, PolygonBooleanOptions, PolygonFillRule, PolygonInput, PolygonOperand, PolygonPiece, PolygonRing, PolygonToPathOptions, PolygonWithHoles, Position, RESIZE_HANDLES, Rect, RectShape, ReflowDisplacementOptions, RegularPolygonShape, ResizeHandle, SHAPE_DATA_KEY, SHAPE_KINDS, SHAPE_NODE_TYPE, SHAPE_OPERATIONS, ShapeDescription, ShapeKind, ShapeNodePolygonOptions, ShapeOperation, ShapePaint, ShapePathEditOperation, ShapePathEditRefusal, ShapePathEditResult, ShapeRenderData, ShapeSize, Side, SizeDimension, SnapGuidesOptions, SnapNodeResizeOptions, SnapNodeResizeResult, SnapResizeOptions, SnapResizeResult, SnapResult, StarShape, StrokeCap, StrokeJoin, TOKEN_BINDINGS_DATA_KEY, TOKEN_MODES_DATA_KEY, TrajectoryFunction, TrajectoryPoint, XYPosition, ZOrderOperation, alignNodes, applyConstraints, applyNodeUpdates, applyShapeCombination, applyShapeReplacement, bezierPathArea, bezierPathBounds, bezierPathLength, bezierPathPointAtLength, bezierPathSignedArea, bezierPathToSvg, bindCanvasToken, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canCombineShapeNodes, canOffsetShapeNodes, canOutlineShapeNodeStrokes, canvasHeight, centerNodes, centre, clampLayoutSize, combineShapeNodes, computeNodesBoundingBox, computeSnapGuides, connectedOnly, countPathSegments, createBezierTrajectory, createCanvasAutoLayoutController, createCanvasScenesStore, createFanOutTrajectory, createGuideIndex, createNodeGuideIndex, cubicPointAt, cubicsToPathData, dashContours, defaultEasing, detachTokenBindings, distanceToBezierPath, distributeNodes, dividePaths, dividePolygons, ensureLayout, estimateCanvasHeight, estimateNodeSize, excludePaths, findConnectorSnap, fitCubicRun, fitCubics, fitFreehandPath, fitPathData, fitViewportToNodes, fitViewportToRect, flattenSvgPath, flowSide, getAbsolutePosition, getAutoLayout, getAutoLayoutGrid, getAutoLayoutInsertTarget, getBindableTokenProperties, getCanvasTokenProperty, getCenteredNodePosition, getChildLayout, getEffectiveTokenModes, getFlowChildren, getLayoutParent, getLayoutSizing, getLayoutedNodes, getNodeRect, getNodeShape, getNodeSize, getNodeTokenBindings, getNodeTokenModes, getResizingNodeRect, getShapeRenderData, getShapeSvg, getTokenPropertyScope, getTokensForProperty, handlePoint, hasVisibleStroke, inferResizeHandle, inspectNodeTokens, intersectPaths, intersectPolygons, invertNodeUpdates, isAutoLayoutFrame, isEventFromTextInput, isLocked, isMeasureModifierHeld, isShapeDescription, isShapeNode, isStraightCubic, isValidCanvasNode, isValidUrl, layoutAll, layoutBounds, layoutFrame, layoutUp, layoutUpMany, linearPositionTrajectory, linearTrajectory, lockNodes, makeSizingCoherent, matchArrangeShortcut, matchSize, measureBetween, measureLabel, measureSelection, measureToLine, mergeNodeUpdates, moveLayoutChild, multiPolygonArea, multiPolygonBounds, nearestHandlePositions, normalizeBezierPath, offsetPath, offsetShapeNodes, oppositePosition, outlineShapeNodeStrokes, outlineStroke, overlaps, parseCanvasClipboardData, parseCanvasScenes, parseSvgPath, pathBoolean, placeBeside, pointInBezierPath, pointInMultiPolygon, pointInRings, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, pruneCanvasTokenModes, readNodeStyleProperty, readStyleSize, realClock, relayoutUpdates, remapPastedNodes, reorderNodes, repositionNodesTo, resizeHandleAxes, resolveCanvasTokens, resolvePadding, revertShapeCombination, ringSignedArea, runMultiNodeTransition, serializeCanvasNodes, setCanvasTokenMode, shapeNodeToBezierPath, shapeNodeToPolygon, shapeToBezierPath, shapeToPolygon, sideToPosition, simplifyRing, snapNodeDrag, snapNodeResize, snapResize, snapToGrid, strokeOutlineRings, subtractPaths, subtractPolygons, toBezierPath, toggleLockNodes, transformBezierPath, unionPolygons, unitePaths, unlockNodes, withStyleSize, writeNodeStyleProperty, xorPolygons } from '@pixerate/editor/canvas';
+import { TokenState, TokenStore, TokenModeContext } from '@pixerate/editor/tokens';
 
 interface AgentPresenceLayerProps {
     presences: AgentPresence[];
@@ -164,6 +165,8 @@ interface UseCanvasArrangeOptions<TNode extends CanvasNode = CanvasNode> {
     /** Turns drag snapping off (default `true`). */
     snapping?: boolean;
     rectOptions?: NodeRectOptions;
+    /** Re-run auto layout around arranged nodes in the same undo step (see `useCanvasAutoLayout`). */
+    autoLayout?: boolean | AutoLayoutOptions;
 }
 /**
  * React hook for Freeform-style arrangement on React Flow: align, distribute, make same size,
@@ -195,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;
@@ -359,4 +366,116 @@ interface ShapeNodeProps {
  */
 declare function ShapeNode({ data, width, height, selected, className, children }: ShapeNodeProps): React__default.JSX.Element | null;
 
-export { AgentPresenceLayer, type AgentPresenceLayerProps, type CanvasArrange, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, type CanvasMeasure, type CanvasScenes, ShapeNode, type ShapeNodeProps, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasClipboardOptions, type UseCanvasDockingOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseStreamingCanvasOptions, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasClipboard, useCanvasDocking, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useStreamingCanvas };
+interface UseCanvasAutoLayoutOptions<TNode extends CanvasNode = CanvasNode> {
+    nodes: TNode[];
+    setNodes: (updater: TNode[] | ((prev: TNode[]) => TNode[])) => void;
+    /** When set, the hook's actions (add / remove / resize / reorder / apply) are undoable steps. */
+    history?: ArrangeHistoryTarget;
+    /** Turns automatic relayout off (`applyAutoLayout` still works). Default `true`. */
+    enabled?: boolean;
+    /** Reorder flow children by dragging them within their frame (default `true`). */
+    dragReorder?: boolean;
+    /** Text measuring and size hooks (default: xyflow `measured` sizes). */
+    measure?: AutoLayoutMeasure;
+    rectOptions?: NodeRectOptions;
+}
+/**
+ * React hook for Figma-style auto layout on React Flow sub-flows. Frames are nodes with
+ * `data.layout`; their children (`parentId`) are stacked, wrapped or placed on a grid, with
+ * hug / fill / fixed sizing, min / max, padding, alignment and constraints.
+ *
+ * Pass every `onNodesChange` batch through `noteChanges` before applying it
+ * (`onNodesChange={(c) => setNodes((n) => applyNodeChanges(autoLayout.noteChanges(c), n))}`):
+ * after the nodes update the hook relayouts frames whose children were measured, resized,
+ * added or removed, and turns drags of a flow child inside its frame into a reorder (one
+ * undoable step). Render `guides` (the drop marker) with `<CanvasGuidesLayer>`.
+ */
+declare function useCanvasAutoLayout<TNode extends CanvasNode = CanvasNode>(options: UseCanvasAutoLayoutOptions<TNode>): {
+    /** Drop marker of the active reorder drag (flow coordinates). */
+    guides: GuideLine[];
+    hasPending: boolean;
+    applyAutoLayout(frameId?: string): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    layoutUpdates(ids: Iterable<string>): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    relayout(ids: Iterable<string>): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    addNode(node: TNode, addOptions?: {
+        index?: number;
+    }): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    removeNodes(ids: Iterable<string>): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    resizeNode(id: string, size: {
+        width?: number;
+        height?: number;
+    }): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    moveChild(childId: string, index: number): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    getInsertTarget(id: string, point?: _pixerate_editor_canvas.XYPosition): _pixerate_editor_canvas.AutoLayoutInsertTarget | undefined;
+    beginReorderDrag(id: string): void;
+    dragReorder(id: string, point?: _pixerate_editor_canvas.XYPosition): _pixerate_editor_canvas.AutoLayoutInsertTarget | undefined;
+    endReorderDrag(id: string, point?: _pixerate_editor_canvas.XYPosition): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    noteChanges<TChange extends _pixerate_editor_canvas.PositionChangeLike>(changes: TChange[]): TChange[];
+    noteRemoved(removed: Iterable<{
+        id: string;
+        parentId?: string;
+    }>): void;
+    flush(): _pixerate_editor_canvas.CanvasNodeUpdate[];
+    isFrame: (id: string) => boolean;
+};
+type CanvasAutoLayout = ReturnType<typeof useCanvasAutoLayout>;
+
+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;
+
+export { AgentPresenceLayer, type AgentPresenceLayerProps, type CanvasArrange, type CanvasAutoLayout, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, type CanvasMeasure, type CanvasScenes, type CanvasTokens, ShapeNode, type ShapeNodeProps, TokenBindingPicker, type TokenBindingPickerProps, TokenModeSwitcher, type TokenModeSwitcherProps, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasClipboardOptions, type UseCanvasDockingOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseCanvasTokensOptions, type UseStreamingCanvasOptions, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasAutoLayout, useCanvasClipboard, useCanvasDocking, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useCanvasTokens, useStreamingCanvas };