@pixerate/editor-react 0.14.0 → 0.16.0

package/dist/canvas/index.d.ts

@@ -1,8 +1,9 @@
-import React$1 from 'react';
+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, DEFAULT_ARRANGE_SHORTCUTS, DirectionalDisplacementOptions, DisplacementDirection, DistributeAxis, DistributeMode, DockStrategy, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FlattenOptions, GraphDifferences, GuideIndex, GuideLine, IncrementalLayoutOptions, ManualClock, MultiPolygon, NodeTransition, PathCommand, PathShape, PlaceBesideOptions, Point, PolygonBooleanOperation, PolygonBooleanOptions, PolygonFillRule, PolygonInput, PolygonOperand, PolygonPiece, PolygonRing, PolygonToPathOptions, PolygonWithHoles, Position, Rect, RectShape, ReflowDisplacementOptions, RegularPolygonShape, SHAPE_DATA_KEY, SHAPE_KINDS, SHAPE_NODE_TYPE, SHAPE_OPERATIONS, ShapeDescription, ShapeKind, ShapeNodePolygonOptions, ShapeOperation, ShapePaint, ShapeRenderData, ShapeSize, Side, SizeDimension, SnapGuidesOptions, 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, defaultEasing, distributeNodes, dividePolygons, ensureLayout, estimateCanvasHeight, estimateNodeSize, findConnectorSnap, fitViewportToNodes, fitViewportToRect, flattenSvgPath, flowSide, getAbsolutePosition, getCenteredNodePosition, getLayoutedNodes, getNodeRect, getNodeShape, getNodeSize, getShapeRenderData, getShapeSvg, handlePoint, intersectPolygons, invertNodeUpdates, isEventFromTextInput, isLocked, isShapeDescription, isShapeNode, isValidCanvasNode, isValidUrl, layoutBounds, linearPositionTrajectory, linearTrajectory, lockNodes, matchArrangeShortcut, matchSize, multiPolygonArea, multiPolygonBounds, nearestHandlePositions, oppositePosition, overlaps, parseCanvasClipboardData, parseCanvasScenes, parseSvgPath, placeBeside, pointInMultiPolygon, pointInRings, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, readStyleSize, realClock, remapPastedNodes, reorderNodes, repositionNodesTo, revertShapeCombination, ringSignedArea, runMultiNodeTransition, serializeCanvasNodes, shapeNodeToPolygon, shapeToPolygon, sideToPosition, simplifyRing, snapNodeDrag, 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 } from '@pixerate/editor/canvas';
+export { AUTO_LAYOUT_DATA_KEY, AlignEdge, ArrangeShortcutBinding, AutoLayout, AutoLayoutAlignContent, AutoLayoutAlignCross, AutoLayoutAlignMain, AutoLayoutCellAlign, AutoLayoutChild, AutoLayoutConstraints, AutoLayoutGrid, AutoLayoutGridArea, AutoLayoutGridCell, AutoLayoutGridGeometry, AutoLayoutGridTrack, AutoLayoutHorizontalConstraint, AutoLayoutInsertTarget, AutoLayoutMeasure, AutoLayoutMode, AutoLayoutOptions, AutoLayoutPadding, AutoLayoutSize, AutoLayoutSizing, AutoLayoutSizingPair, AutoLayoutVerticalConstraint, CHILD_LAYOUT_DATA_KEY, CONNECTION_LINE_TYPES, CanvasArrangeAction, CanvasAutoLayoutController, CanvasAutoLayoutControllerOptions, CanvasClipboardPayload, CanvasConnectionLineType, CanvasDockingCallbacks, CanvasEdge, CanvasHeightOptions, CanvasLayoutOptions, CanvasNode, CanvasNodeUpdate, CanvasScene, CanvasScenesState, CanvasScenesStore, CanvasViewport, Clock, CollapseNodeOptions, CombineShapeNodesOptions, CombineShapeNodesRefusal, CombineShapeNodesResult, ConnectorSnap, ConnectorSnapTarget, CubicSegment, DEFAULT_ARRANGE_SHORTCUTS, DirectionalDisplacementOptions, DisplacementDirection, DistributeAxis, DistributeMode, DockStrategy, EllipseShape, ExplodeNodeOptions, ExplosionSnapshot, FanOutTrajectoryOptions, FitCubicsOptions, FitPathDataOptions, FlattenOptions, GraphDifferences, GuideIndex, GuideLine, IncrementalLayoutOptions, ManualClock, MeasureGuide, MeasureSelectionOptions, MeasureSelectionResult, MultiPolygon, NodeTransition, PathCommand, PathShape, PlaceBesideOptions, Point, PolygonBooleanOperation, PolygonBooleanOptions, PolygonFillRule, PolygonInput, PolygonOperand, PolygonPiece, PolygonRing, PolygonToPathOptions, PolygonWithHoles, Position, RESIZE_HANDLES, Rect, RectShape, ReflowDisplacementOptions, RegularPolygonShape, ResizeHandle, SHAPE_DATA_KEY, SHAPE_KINDS, SHAPE_NODE_TYPE, SHAPE_OPERATIONS, ShapeDescription, ShapeKind, ShapeNodePolygonOptions, ShapeOperation, ShapePaint, ShapeRenderData, ShapeSize, Side, SizeDimension, SnapGuidesOptions, SnapNodeResizeOptions, SnapNodeResizeResult, SnapResizeOptions, SnapResizeResult, SnapResult, StarShape, TrajectoryFunction, TrajectoryPoint, XYPosition, ZOrderOperation, alignNodes, applyConstraints, applyNodeUpdates, applyShapeCombination, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canCombineShapeNodes, canvasHeight, centerNodes, centre, clampLayoutSize, combineShapeNodes, computeNodesBoundingBox, computeSnapGuides, connectedOnly, createBezierTrajectory, createCanvasAutoLayoutController, createCanvasScenesStore, createFanOutTrajectory, createGuideIndex, createNodeGuideIndex, cubicPointAt, cubicsToPathData, defaultEasing, distributeNodes, dividePolygons, ensureLayout, estimateCanvasHeight, estimateNodeSize, findConnectorSnap, fitCubicRun, fitCubics, fitFreehandPath, fitPathData, fitViewportToNodes, fitViewportToRect, flattenSvgPath, flowSide, getAbsolutePosition, getAutoLayout, getAutoLayoutGrid, getAutoLayoutInsertTarget, getCenteredNodePosition, getChildLayout, getFlowChildren, getLayoutParent, getLayoutSizing, getLayoutedNodes, getNodeRect, getNodeShape, getNodeSize, getResizingNodeRect, getShapeRenderData, getShapeSvg, handlePoint, inferResizeHandle, intersectPolygons, invertNodeUpdates, isAutoLayoutFrame, isEventFromTextInput, isLocked, isMeasureModifierHeld, isShapeDescription, isShapeNode, isStraightCubic, isValidCanvasNode, isValidUrl, layoutAll, layoutBounds, layoutFrame, layoutUp, layoutUpMany, linearPositionTrajectory, linearTrajectory, lockNodes, makeSizingCoherent, matchArrangeShortcut, matchSize, measureBetween, measureLabel, measureSelection, measureToLine, mergeNodeUpdates, moveLayoutChild, multiPolygonArea, multiPolygonBounds, nearestHandlePositions, oppositePosition, overlaps, parseCanvasClipboardData, parseCanvasScenes, parseSvgPath, placeBeside, pointInMultiPolygon, pointInRings, polygonArea, polygonBoolean, polygonToSvgPath, positionToSide, readStyleSize, realClock, relayoutUpdates, remapPastedNodes, reorderNodes, repositionNodesTo, resizeHandleAxes, resolvePadding, revertShapeCombination, ringSignedArea, runMultiNodeTransition, serializeCanvasNodes, shapeNodeToPolygon, shapeToPolygon, sideToPosition, simplifyRing, snapNodeDrag, snapNodeResize, snapResize, snapToGrid, subtractPolygons, toggleLockNodes, unionPolygons, unlockNodes, withStyleSize, xorPolygons } from '@pixerate/editor/canvas';
 
 interface AgentPresenceLayerProps {
     presences: AgentPresence[];
@@ -12,7 +13,7 @@ interface AgentPresenceLayerProps {
  * Visual multiplayer and agent choreography presence layer for React Canvas.
  * Renders floating cursor indicators, agent name tags, and active status tooltips.
  */
-declare function AgentPresenceLayer({ presences, className }: AgentPresenceLayerProps): React$1.JSX.Element | null;
+declare function AgentPresenceLayer({ presences, className }: AgentPresenceLayerProps): React__default.JSX.Element | null;
 
 interface UseStreamingCanvasOptions<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge> {
     throttleMs?: number;
@@ -163,6 +164,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,
@@ -198,6 +201,10 @@ declare function useCanvasArrange<TNode extends CanvasNode = CanvasNode>(options
     beginDrag(ids?: Iterable<string>): void;
     drag(ids?: Iterable<string>): _pixerate_editor_canvas.SnapNodeDragResult | null;
     snapPositionChanges<TChange extends _pixerate_editor_canvas.PositionChangeLike>(changes: TChange[]): TChange[];
+    beginResize(id: string): void;
+    resize(id: string, handle?: _pixerate_editor_canvas.ResizeHandle): _pixerate_editor_canvas.SnapNodeResizeResult | null;
+    endResize(): void;
+    snapResizeChanges<TChange extends _pixerate_editor_canvas.PositionChangeLike>(changes: TChange[]): TChange[];
     endDrag(): void;
 };
 type CanvasArrange = ReturnType<typeof useCanvasArrange>;
@@ -280,13 +287,56 @@ interface CanvasGuidesLayerProps {
     color?: string;
     /** Colour of equal-spacing guides. */
     spacingColor?: string;
+    /** Colour of measuring lines, their labels and extension lines. */
+    measureColor?: string;
     className?: string;
 }
 /**
  * Smart-guide overlay for React Flow. Place it inside the flow container (it is absolutely
  * positioned over the whole pane) and pass the live viewport.
  */
-declare function CanvasGuidesLayer({ guides, viewport, color, spacingColor, className }: CanvasGuidesLayerProps): React$1.JSX.Element | null;
+declare function CanvasGuidesLayer({ guides, viewport, color, spacingColor, measureColor, className }: CanvasGuidesLayerProps): React__default.JSX.Element | null;
+
+interface UseCanvasMeasureOptions<TNode extends CanvasNode = CanvasNode> {
+    nodes: TNode[];
+    /** Ids measured from (default: nodes with `selected: true`). */
+    getSelectedIds?: () => string[];
+    /** Turns measuring off (default `true`). */
+    enabled?: boolean;
+    /** Measure only while Alt / Option is held (default `true`); `false` always measures. */
+    requireModifier?: boolean;
+    /** Element receiving the Alt key events (default `window`). */
+    targetElement?: HTMLElement | Window | null;
+    rectOptions?: NodeRectOptions;
+}
+/**
+ * Alt-hover distance measuring for React Flow: hold Alt / Option and hover a node to see
+ * red distance lines with labels from the selection to it (or to the selection's parent
+ * when hovering the selection or empty space). Wire `onNodeMouseEnter` / `onNodeMouseLeave`
+ * to `<ReactFlow>` and render `guides` with `<CanvasGuidesLayer>` (concatenate them with
+ * `arrange.guides` to share one layer).
+ */
+declare function useCanvasMeasure<TNode extends CanvasNode = CanvasNode>(options: UseCanvasMeasureOptions<TNode>): {
+    /** Measuring lines (flow coordinates) to pass to `<CanvasGuidesLayer>`. */
+    guides: _pixerate_editor_canvas.MeasureGuide[];
+    /** The box measured to (outline it), or `null`. */
+    target: _pixerate_editor_canvas.Rect | null;
+    /** Whether measuring is showing (enabled and Alt held, unless `requireModifier: false`). */
+    active: boolean;
+    hoveredId: string | null;
+    setHoveredId: React$1.Dispatch<React$1.SetStateAction<string | null>>;
+    /** Sets the modifier state by hand (e.g. from a toolbar toggle). */
+    setModifier: React$1.Dispatch<React$1.SetStateAction<boolean>>;
+    onNodeMouseEnter: (event: {
+        altKey?: boolean;
+    } | null, node: {
+        id: string;
+    }) => void;
+    onNodeMouseLeave: (_event: unknown, node: {
+        id: string;
+    }) => void;
+};
+type CanvasMeasure = ReturnType<typeof useCanvasMeasure>;
 
 interface ShapeNodeProps {
     /** Node data; `data.shape` holds the shape description. */
@@ -300,7 +350,7 @@ interface ShapeNodeProps {
     selected?: boolean;
     className?: string;
     /** Rendered over the shape, e.g. React Flow `<Handle>`s or a label. */
-    children?: React$1.ReactNode;
+    children?: React__default.ReactNode;
     [key: string]: any;
 }
 /**
@@ -309,6 +359,60 @@ interface ShapeNodeProps {
  * to add handles. Strokes keep their width when the node is resized
  * (`vector-effect: non-scaling-stroke`). Renders nothing when `data.shape` is missing.
  */
-declare function ShapeNode({ data, width, height, selected, className, children }: ShapeNodeProps): React$1.JSX.Element | null;
+declare function ShapeNode({ data, width, height, selected, className, children }: ShapeNodeProps): React__default.JSX.Element | null;
+
+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>;
 
-export { AgentPresenceLayer, type AgentPresenceLayerProps, type CanvasArrange, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, type CanvasScenes, ShapeNode, type ShapeNodeProps, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasClipboardOptions, type UseCanvasDockingOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseStreamingCanvasOptions, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasClipboard, useCanvasDocking, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasScenes, useCanvasShortcuts, useStreamingCanvas };
+export { AgentPresenceLayer, type AgentPresenceLayerProps, type CanvasArrange, type CanvasAutoLayout, type CanvasGraphTarget, CanvasGuidesLayer, type CanvasGuidesLayerProps, type CanvasMeasure, type CanvasScenes, ShapeNode, type ShapeNodeProps, type UseCanvasArrangeOptions, type UseCanvasArrangeShortcutsOptions, type UseCanvasAutoLayoutOptions, type UseCanvasClipboardOptions, type UseCanvasDockingOptions, type UseCanvasGraphOptions, type UseCanvasLayoutOptions, type UseCanvasMeasureOptions, type UseCanvasScenesOptions, type UseCanvasShortcutsOptions, type UseStreamingCanvasOptions, useCanvasArrange, useCanvasArrangeShortcuts, useCanvasAutoLayout, useCanvasClipboard, useCanvasDocking, useCanvasExplosion, useCanvasGraph, useCanvasLayout, useCanvasMeasure, useCanvasScenes, useCanvasShortcuts, useStreamingCanvas };

package/dist/canvas/index.js

@@ -791,6 +791,9 @@ function useCanvasArrange(options) {
       get rectOptions() {
         return optionsRef.current.rectOptions;
       },
+      get autoLayout() {
+        return optionsRef.current.autoLayout;
+      },
       onGuidesChange: setGuides
     }),
     []
@@ -891,19 +894,20 @@ function useCanvasScenes(options = {}) {
 }
 
 // src/canvas/CanvasGuidesLayer.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var DEFAULT_VIEWPORT = { x: 0, y: 0, zoom: 1 };
 function CanvasGuidesLayer({
   guides,
   viewport = DEFAULT_VIEWPORT,
   color = "#f59e0b",
   spacingColor = "#ec4899",
+  measureColor = "#ef4444",
   className = ""
 }) {
   if (!guides || guides.length === 0) return null;
   const sx = (x) => x * viewport.zoom + viewport.x;
   const sy = (y) => y * viewport.zoom + viewport.y;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs2(
     "svg",
     {
       className: `pixerate-canvas-guides ${className}`,
@@ -917,26 +921,141 @@ function CanvasGuidesLayer({
         zIndex: 10
       },
       "aria-hidden": "true",
-      children: guides.map((guide, i) => /* @__PURE__ */ jsx2(
-        "line",
-        {
-          "data-kind": guide.kind,
-          x1: sx(guide.x1),
-          y1: sy(guide.y1),
-          x2: sx(guide.x2),
-          y2: sy(guide.y2),
-          stroke: guide.kind === "spacing" ? spacingColor : color,
-          strokeWidth: 1,
-          strokeDasharray: guide.kind === "centre" ? "4 3" : void 0,
-          shapeRendering: "crispEdges"
-        },
-        i
-      ))
+      children: [
+        guides.map((guide, i) => {
+          const measuring = guide.kind === "measure" || guide.kind === "extension";
+          return /* @__PURE__ */ jsx2(
+            "line",
+            {
+              "data-kind": guide.kind,
+              x1: sx(guide.x1),
+              y1: sy(guide.y1),
+              x2: sx(guide.x2),
+              y2: sy(guide.y2),
+              stroke: measuring ? measureColor : guide.kind === "spacing" ? spacingColor : color,
+              strokeWidth: 1,
+              strokeDasharray: guide.kind === "centre" ? "4 3" : guide.kind === "extension" ? "3 3" : void 0,
+              shapeRendering: "crispEdges"
+            },
+            i
+          );
+        }),
+        guides.map((guide, i) => {
+          if (!guide.label) return null;
+          const x = sx((guide.x1 + guide.x2) / 2);
+          const y = sy((guide.y1 + guide.y2) / 2);
+          const vertical = guide.orientation === "vertical";
+          const width = guide.label.length * 6.5 + 8;
+          return /* @__PURE__ */ jsxs2(
+            "g",
+            {
+              className: "pixerate-canvas-guides__label",
+              "data-label": guide.label,
+              transform: `translate(${vertical ? x + 4 : x - width / 2} ${vertical ? y - 8 : y + 4})`,
+              children: [
+                /* @__PURE__ */ jsx2("rect", { width, height: 16, rx: 3, fill: measureColor }),
+                /* @__PURE__ */ jsx2(
+                  "text",
+                  {
+                    x: width / 2,
+                    y: 11.5,
+                    textAnchor: "middle",
+                    fontSize: 11,
+                    fontFamily: "system-ui, sans-serif",
+                    fill: "#fff",
+                    children: guide.label
+                  }
+                )
+              ]
+            },
+            `label-${i}`
+          );
+        })
+      ]
     }
   );
 }
 
+// src/canvas/useCanvasMeasure.ts
+import { useCallback as useCallback7, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef7, useState as useState3 } from "react";
+import {
+  isMeasureModifierHeld,
+  measureSelection
+} from "@pixerate/editor/canvas";
+var EMPTY = { guides: [], target: null, selection: null };
+function useCanvasMeasure(options) {
+  const { nodes, enabled = true, requireModifier = true, targetElement, rectOptions } = options;
+  const [hoveredId, setHoveredId] = useState3(null);
+  const [modifier, setModifier] = useState3(false);
+  const optionsRef = useRef7(options);
+  optionsRef.current = options;
+  useEffect4(() => {
+    if (!enabled) return;
+    const target = targetElement ?? (typeof window !== "undefined" ? window : null);
+    if (!target) return;
+    const onKey = (event) => setModifier(isMeasureModifierHeld(event));
+    const onBlur = () => setModifier(false);
+    target.addEventListener("keydown", onKey);
+    target.addEventListener("keyup", onKey);
+    const win = typeof window !== "undefined" ? window : null;
+    win?.addEventListener("blur", onBlur);
+    return () => {
+      target.removeEventListener("keydown", onKey);
+      target.removeEventListener("keyup", onKey);
+      win?.removeEventListener("blur", onBlur);
+    };
+  }, [enabled, targetElement]);
+  const active = enabled && (!requireModifier || modifier);
+  const result = useMemo3(() => {
+    if (!active) return EMPTY;
+    const ids = optionsRef.current.getSelectedIds?.() ?? nodes.filter((n) => n.selected).map((n) => n.id);
+    return measureSelection(nodes, ids, hoveredId, rectOptions);
+  }, [active, nodes, hoveredId, rectOptions]);
+  const onNodeMouseEnter = useCallback7((event, node) => {
+    setHoveredId(node.id);
+    if (event && typeof event.altKey === "boolean") setModifier(event.altKey);
+  }, []);
+  const onNodeMouseLeave = useCallback7((_event, node) => {
+    setHoveredId((current) => current === node.id ? null : current);
+  }, []);
+  return {
+    /** Measuring lines (flow coordinates) to pass to `<CanvasGuidesLayer>`. */
+    guides: result.guides,
+    /** The box measured to (outline it), or `null`. */
+    target: result.target,
+    /** Whether measuring is showing (enabled and Alt held, unless `requireModifier: false`). */
+    active,
+    hoveredId,
+    setHoveredId,
+    /** Sets the modifier state by hand (e.g. from a toolbar toggle). */
+    setModifier,
+    onNodeMouseEnter,
+    onNodeMouseLeave
+  };
+}
+
 // src/canvas/index.ts
+import {
+  measureBetween,
+  measureToLine,
+  measureSelection as measureSelection2,
+  measureLabel,
+  isMeasureModifierHeld as isMeasureModifierHeld2,
+  snapToGrid,
+  snapResize,
+  snapNodeResize,
+  inferResizeHandle,
+  resizeHandleAxes,
+  getResizingNodeRect,
+  RESIZE_HANDLES,
+  fitCubics,
+  fitCubicRun,
+  fitPathData,
+  fitFreehandPath,
+  cubicsToPathData,
+  cubicPointAt,
+  isStraightCubic
+} from "@pixerate/editor/canvas";
 import {
   alignNodes,
   distributeNodes,
@@ -975,12 +1094,12 @@ import {
 
 // src/canvas/ShapeNode.tsx
 import { getShapeRenderData, isShapeDescription } from "@pixerate/editor/canvas";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function ShapeNode({ data, width, height, selected, className = "", children }) {
   const shape = data?.shape;
   if (!isShapeDescription(shape)) return null;
   const render = getShapeRenderData(shape, { width, height });
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       className: `pixerate-shape-node ${className}`.trim(),
@@ -1087,19 +1206,100 @@ import {
   blendLayout,
   connectedOnly
 } from "@pixerate/editor/canvas";
+import {
+  layoutFrame,
+  layoutAll,
+  layoutUp,
+  layoutUpMany,
+  applyConstraints,
+  getAutoLayout,
+  getChildLayout,
+  getLayoutSizing,
+  getAutoLayoutGrid,
+  getAutoLayoutInsertTarget,
+  getFlowChildren,
+  getLayoutParent,
+  isAutoLayoutFrame,
+  makeSizingCoherent,
+  moveLayoutChild,
+  mergeNodeUpdates,
+  relayoutUpdates,
+  resolvePadding,
+  clampLayoutSize,
+  createCanvasAutoLayoutController as createCanvasAutoLayoutController2,
+  AUTO_LAYOUT_DATA_KEY,
+  CHILD_LAYOUT_DATA_KEY
+} from "@pixerate/editor/canvas";
+
+// src/canvas/useCanvasAutoLayout.ts
+import { useLayoutEffect, useMemo as useMemo4, useRef as useRef8, useState as useState4 } from "react";
+import {
+  createCanvasAutoLayoutController
+} from "@pixerate/editor/canvas";
+function useCanvasAutoLayout(options) {
+  const [guides, setGuides] = useState4([]);
+  const nodesRef = useRef8(options.nodes);
+  nodesRef.current = options.nodes;
+  const optionsRef = useRef8(options);
+  optionsRef.current = options;
+  const controller = useMemo4(
+    () => createCanvasAutoLayoutController({
+      getNodes: () => nodesRef.current,
+      setNodes: (next) => {
+        nodesRef.current = next;
+        optionsRef.current.setNodes(next);
+      },
+      get history() {
+        return optionsRef.current.history;
+      },
+      get enabled() {
+        return optionsRef.current.enabled;
+      },
+      get dragReorder() {
+        return optionsRef.current.dragReorder;
+      },
+      get measure() {
+        return optionsRef.current.measure;
+      },
+      get rectOptions() {
+        return optionsRef.current.rectOptions;
+      },
+      onGuidesChange: setGuides
+    }),
+    []
+  );
+  useLayoutEffect(() => {
+    if (controller.hasPending) controller.flush();
+  }, [options.nodes, controller]);
+  return useMemo4(
+    () => ({
+      ...controller,
+      /** Drop marker of the active reorder drag (flow coordinates). */
+      guides,
+      get hasPending() {
+        return controller.hasPending;
+      }
+    }),
+    [controller, guides]
+  );
+}
 export {
+  AUTO_LAYOUT_DATA_KEY,
   AgentPresenceLayer,
+  CHILD_LAYOUT_DATA_KEY,
   CONNECTION_LINE_TYPES,
   CanvasGuidesLayer,
   CanvasScenesStore2 as CanvasScenesStore,
   DEFAULT_ARRANGE_SHORTCUTS,
   ManualClock,
+  RESIZE_HANDLES,
   SHAPE_DATA_KEY,
   SHAPE_KINDS,
   SHAPE_NODE_TYPE,
   SHAPE_OPERATIONS,
   ShapeNode,
   alignNodes,
+  applyConstraints,
   applyNodeUpdates,
   applyShapeCombination,
   blendLayout,
@@ -1110,15 +1310,19 @@ export {
   canvasHeight,
   centerNodes2 as centerNodes,
   centre,
+  clampLayoutSize,
   combineShapeNodes,
   computeNodesBoundingBox,
   computeSnapGuides,
   connectedOnly,
   createBezierTrajectory,
+  createCanvasAutoLayoutController2 as createCanvasAutoLayoutController,
   createCanvasScenesStore,
   createFanOutTrajectory2 as createFanOutTrajectory,
   createGuideIndex,
   createNodeGuideIndex,
+  cubicPointAt,
+  cubicsToPathData,
   defaultEasing,
   distributeNodes,
   dividePolygons,
@@ -1126,33 +1330,60 @@ export {
   estimateCanvasHeight,
   estimateNodeSize,
   findConnectorSnap,
+  fitCubicRun,
+  fitCubics,
+  fitFreehandPath,
+  fitPathData,
   fitViewportToNodes2 as fitViewportToNodes,
   fitViewportToRect,
   flattenSvgPath,
   flowSide,
   getAbsolutePosition,
+  getAutoLayout,
+  getAutoLayoutGrid,
+  getAutoLayoutInsertTarget,
   getCenteredNodePosition2 as getCenteredNodePosition,
+  getChildLayout,
+  getFlowChildren,
+  getLayoutParent,
+  getLayoutSizing,
   getLayoutedNodes2 as getLayoutedNodes,
   getNodeRect,
   getNodeShape,
   getNodeSize,
+  getResizingNodeRect,
   getShapeRenderData2 as getShapeRenderData,
   getShapeSvg,
   handlePoint,
+  inferResizeHandle,
   intersectPolygons,
   invertNodeUpdates,
+  isAutoLayoutFrame,
   isEventFromTextInput3 as isEventFromTextInput,
   isLocked,
+  isMeasureModifierHeld2 as isMeasureModifierHeld,
   isShapeDescription2 as isShapeDescription,
   isShapeNode,
+  isStraightCubic,
   isValidCanvasNode,
   isValidUrl2 as isValidUrl,
+  layoutAll,
   layoutBounds,
+  layoutFrame,
+  layoutUp,
+  layoutUpMany,
   linearPositionTrajectory2 as linearPositionTrajectory,
   linearTrajectory,
   lockNodes,
+  makeSizingCoherent,
   matchArrangeShortcut2 as matchArrangeShortcut,
   matchSize,
+  measureBetween,
+  measureLabel,
+  measureSelection2 as measureSelection,
+  measureToLine,
+  mergeNodeUpdates,
+  moveLayoutChild,
   multiPolygonArea,
   multiPolygonBounds,
   nearestHandlePositions,
@@ -1170,9 +1401,12 @@ export {
   positionToSide,
   readStyleSize,
   realClock,
+  relayoutUpdates,
   remapPastedNodes2 as remapPastedNodes,
   reorderNodes,
   repositionNodesTo,
+  resizeHandleAxes,
+  resolvePadding,
   revertShapeCombination,
   ringSignedArea,
   runMultiNodeTransition2 as runMultiNodeTransition,
@@ -1182,17 +1416,22 @@ export {
   sideToPosition,
   simplifyRing,
   snapNodeDrag,
+  snapNodeResize,
+  snapResize,
+  snapToGrid,
   subtractPolygons,
   toggleLockNodes,
   unionPolygons,
   unlockNodes,
   useCanvasArrange,
   useCanvasArrangeShortcuts,
+  useCanvasAutoLayout,
   useCanvasClipboard,
   useCanvasDocking,
   useCanvasExplosion,
   useCanvasGraph,
   useCanvasLayout,
+  useCanvasMeasure,
   useCanvasScenes,
   useCanvasShortcuts,
   useStreamingCanvas,