@pixerate/editor-react 0.14.0 → 0.16.0

package/README.md

@@ -75,6 +75,8 @@ const editor = useEditor({ extensions: [Comments.configure({ author: me }), Trac
 
 `ReviewToolbar` steps through insertions, deletions, formatting and block changes and shows the current one's author and description (e.g. "Ada: Changed Paragraph to Heading 2"); hide it with `showDescription={false}` or restyle it with `descriptionClassName`. `useComments(editorOrStore)` and `useTrackChanges(editor)` expose the same state for custom UIs (each change has `type` and `description`).
 
+`FindReplaceBar` is a Word-style find bar for editors with the `FindReplace` extension (`useEditor({ richTextOptions: { findReplace: true } })`): it appears on Mod+F / Mod+H (or `editor.commands.openFindReplace()`), with find and replace fields, option toggles (match case, whole words, wildcards, regex, plus prefix/suffix/ignore punctuation/white space under "More options"), a "3 of 12" counter, previous/next, Replace and Replace all. Enter / Shift+Enter step, Enter in the replace field replaces, Mod+Enter replaces all, Escape closes. Pass `alwaysOpen` to keep it visible. `useFindReplace(editor)` exposes the state and commands for custom UIs.
+
 `useEditor({ fileImport: true, richClipboard: true })` imports dropped/pasted `.md`, `.html`, `.txt`, `.rtf` and `.docx` files (plus any adapter you register, e.g. PDF or zipped exports) at the drop position and copies lossless slices between editors. `useFileImport(editor)` returns `{ openFilePicker, importFiles, accept, isImporting, error }` for an import button. `usePromptEditor({ fileImport: true })` imports dropped files as plain text.
 
 `useAgentToolProvider(registry, provider)` registers an agent tool provider (see `ToolRegistry` in `@pixerate/editor/agent`) while the component is mounted. Memoize the provider:
@@ -88,9 +90,12 @@ useAgentToolProvider(registry, provider);
 
 | Import | Exports |
 | :--- | :--- |
-| `@pixerate/editor-react` | `usePromptEditor`, `useEditor`, `EditorContent`, `BubbleMenu`, `TemplateRenderer`, `useHistory`, `useHistoryShortcuts`, `useNavigationGuard`, `useDismissGuard`, `EditorSlotsProvider` / `useEditorSlots`, `SpreadsheetEditor` / `useSpreadsheetEditor`, `FormulaHints`, `DirtyTracker` |
+| `@pixerate/editor-react` | `usePromptEditor`, `useEditor`, `EditorContent`, `BubbleMenu`, `TemplateRenderer`, `useHistory`, `useHistoryDirty`, `useHistoryShortcuts`, `useNavigationGuard`, `useDismissGuard`, `EditorSlotsProvider` / `useEditorSlots`, `SpreadsheetEditor` / `useSpreadsheetEditor`, `FormulaHints`, `DirtyTracker` |
 | `@pixerate/editor-react/spreadsheet` | `SpreadsheetEditor`, `useSpreadsheetEditor`, `useSpreadsheetTableInteractions`, `FormulaHints`, `SpreadsheetContextMenu`, `SpreadsheetGroupRow` (also re-exported from the root entry) |
 | `@pixerate/editor-react/image-editor` | `ImageEditor`, `useImageEditor`: crop, rotate/flip, adjustments, annotations, depth masks, and `onInpaint` / `onRemoveBackground` AI hooks |
+| `@pixerate/editor-react/commands` | `CommandPalette`, `useCommandPalette` (`hotkey: "Mod+K"`), `useCommandShortcuts`, `useRegisterCommands` over a `CommandRegistry` from `@pixerate/editor/commands` (also re-exported from the root entry) |
+| `@pixerate/editor-react/persistence` | `useAutosave` (crash-recovery snapshots bound to a history / dirty flag, flushed on `pagehide`, with a recovery check on mount) and `<RecoveryPrompt>` (also re-exported from the root entry) |
+| `@pixerate/editor-react/generation` | `GenerationSettings` (controls generated from a model's capabilities, reference slots by role, plan adjustments), `useGenerationPlan`, `JobProgress`, `useJobProgress` over `@pixerate/editor/generation` (also re-exported from the root entry) |
 | `@pixerate/editor-react/canvas` | `useCanvasGraph`, `useCanvasLayout`, `useCanvasClipboard`, `useCanvasDocking`, `useCanvasShortcuts`, `useCanvasExplosion`, `useStreamingCanvas`, `AgentPresenceLayer`, plus the pure layout helpers from `@pixerate/editor/canvas` |
 
 ## Styling (Tailwind CSS required)

package/dist/canvas/index.cjs

@@ -20,116 +20,159 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/canvas/index.ts
 var canvas_exports = {};
 __export(canvas_exports, {
+  AUTO_LAYOUT_DATA_KEY: () => import_canvas15.AUTO_LAYOUT_DATA_KEY,
   AgentPresenceLayer: () => AgentPresenceLayer,
-  CONNECTION_LINE_TYPES: () => import_canvas9.CONNECTION_LINE_TYPES,
+  CHILD_LAYOUT_DATA_KEY: () => import_canvas15.CHILD_LAYOUT_DATA_KEY,
+  CONNECTION_LINE_TYPES: () => import_canvas12.CONNECTION_LINE_TYPES,
   CanvasGuidesLayer: () => CanvasGuidesLayer,
-  CanvasScenesStore: () => import_canvas9.CanvasScenesStore,
-  DEFAULT_ARRANGE_SHORTCUTS: () => import_canvas9.DEFAULT_ARRANGE_SHORTCUTS,
-  ManualClock: () => import_canvas11.ManualClock,
-  SHAPE_DATA_KEY: () => import_canvas10.SHAPE_DATA_KEY,
-  SHAPE_KINDS: () => import_canvas10.SHAPE_KINDS,
-  SHAPE_NODE_TYPE: () => import_canvas10.SHAPE_NODE_TYPE,
-  SHAPE_OPERATIONS: () => import_canvas10.SHAPE_OPERATIONS,
+  CanvasScenesStore: () => import_canvas12.CanvasScenesStore,
+  DEFAULT_ARRANGE_SHORTCUTS: () => import_canvas12.DEFAULT_ARRANGE_SHORTCUTS,
+  ManualClock: () => import_canvas14.ManualClock,
+  RESIZE_HANDLES: () => import_canvas11.RESIZE_HANDLES,
+  SHAPE_DATA_KEY: () => import_canvas13.SHAPE_DATA_KEY,
+  SHAPE_KINDS: () => import_canvas13.SHAPE_KINDS,
+  SHAPE_NODE_TYPE: () => import_canvas13.SHAPE_NODE_TYPE,
+  SHAPE_OPERATIONS: () => import_canvas13.SHAPE_OPERATIONS,
   ShapeNode: () => ShapeNode,
-  alignNodes: () => import_canvas9.alignNodes,
-  applyNodeUpdates: () => import_canvas9.applyNodeUpdates,
-  applyShapeCombination: () => import_canvas10.applyShapeCombination,
-  blendLayout: () => import_canvas11.blendLayout,
-  boundsOf: () => import_canvas11.boundsOf,
-  calculateDagreReflowDisplacement: () => import_canvas11.calculateDagreReflowDisplacement,
-  calculateDirectionalDisplacement: () => import_canvas11.calculateDirectionalDisplacement,
-  canCombineShapeNodes: () => import_canvas10.canCombineShapeNodes,
-  canvasHeight: () => import_canvas11.canvasHeight,
-  centerNodes: () => import_canvas11.centerNodes,
-  centre: () => import_canvas11.centre,
-  combineShapeNodes: () => import_canvas10.combineShapeNodes,
-  computeNodesBoundingBox: () => import_canvas11.computeNodesBoundingBox,
-  computeSnapGuides: () => import_canvas9.computeSnapGuides,
-  connectedOnly: () => import_canvas11.connectedOnly,
-  createBezierTrajectory: () => import_canvas11.createBezierTrajectory,
-  createCanvasScenesStore: () => import_canvas9.createCanvasScenesStore,
-  createFanOutTrajectory: () => import_canvas11.createFanOutTrajectory,
-  createGuideIndex: () => import_canvas9.createGuideIndex,
-  createNodeGuideIndex: () => import_canvas9.createNodeGuideIndex,
-  defaultEasing: () => import_canvas11.defaultEasing,
-  distributeNodes: () => import_canvas9.distributeNodes,
-  dividePolygons: () => import_canvas10.dividePolygons,
-  ensureLayout: () => import_canvas11.ensureLayout,
-  estimateCanvasHeight: () => import_canvas11.estimateCanvasHeight,
-  estimateNodeSize: () => import_canvas11.estimateNodeSize,
-  findConnectorSnap: () => import_canvas9.findConnectorSnap,
-  fitViewportToNodes: () => import_canvas9.fitViewportToNodes,
-  fitViewportToRect: () => import_canvas9.fitViewportToRect,
-  flattenSvgPath: () => import_canvas10.flattenSvgPath,
-  flowSide: () => import_canvas11.flowSide,
-  getAbsolutePosition: () => import_canvas9.getAbsolutePosition,
-  getCenteredNodePosition: () => import_canvas11.getCenteredNodePosition,
-  getLayoutedNodes: () => import_canvas11.getLayoutedNodes,
-  getNodeRect: () => import_canvas9.getNodeRect,
-  getNodeShape: () => import_canvas10.getNodeShape,
-  getNodeSize: () => import_canvas9.getNodeSize,
-  getShapeRenderData: () => import_canvas10.getShapeRenderData,
-  getShapeSvg: () => import_canvas10.getShapeSvg,
-  handlePoint: () => import_canvas9.handlePoint,
-  intersectPolygons: () => import_canvas10.intersectPolygons,
-  invertNodeUpdates: () => import_canvas9.invertNodeUpdates,
-  isEventFromTextInput: () => import_canvas11.isEventFromTextInput,
-  isLocked: () => import_canvas9.isLocked,
-  isShapeDescription: () => import_canvas10.isShapeDescription,
-  isShapeNode: () => import_canvas10.isShapeNode,
-  isValidCanvasNode: () => import_canvas11.isValidCanvasNode,
-  isValidUrl: () => import_canvas11.isValidUrl,
-  layoutBounds: () => import_canvas11.layoutBounds,
-  linearPositionTrajectory: () => import_canvas11.linearPositionTrajectory,
-  linearTrajectory: () => import_canvas11.linearTrajectory,
-  lockNodes: () => import_canvas9.lockNodes,
-  matchArrangeShortcut: () => import_canvas9.matchArrangeShortcut,
-  matchSize: () => import_canvas9.matchSize,
-  multiPolygonArea: () => import_canvas10.multiPolygonArea,
-  multiPolygonBounds: () => import_canvas10.multiPolygonBounds,
-  nearestHandlePositions: () => import_canvas9.nearestHandlePositions,
-  oppositePosition: () => import_canvas9.oppositePosition,
-  overlaps: () => import_canvas11.overlaps,
-  parseCanvasClipboardData: () => import_canvas11.parseCanvasClipboardData,
-  parseCanvasScenes: () => import_canvas9.parseCanvasScenes,
-  parseSvgPath: () => import_canvas10.parseSvgPath,
-  placeBeside: () => import_canvas11.placeBeside,
-  pointInMultiPolygon: () => import_canvas10.pointInMultiPolygon,
-  pointInRings: () => import_canvas10.pointInRings,
-  polygonArea: () => import_canvas10.polygonArea,
-  polygonBoolean: () => import_canvas10.polygonBoolean,
-  polygonToSvgPath: () => import_canvas10.polygonToSvgPath,
-  positionToSide: () => import_canvas9.positionToSide,
-  readStyleSize: () => import_canvas9.readStyleSize,
-  realClock: () => import_canvas11.realClock,
-  remapPastedNodes: () => import_canvas11.remapPastedNodes,
-  reorderNodes: () => import_canvas9.reorderNodes,
-  repositionNodesTo: () => import_canvas11.repositionNodesTo,
-  revertShapeCombination: () => import_canvas10.revertShapeCombination,
-  ringSignedArea: () => import_canvas10.ringSignedArea,
-  runMultiNodeTransition: () => import_canvas11.runMultiNodeTransition,
-  serializeCanvasNodes: () => import_canvas11.serializeCanvasNodes,
-  shapeNodeToPolygon: () => import_canvas10.shapeNodeToPolygon,
-  shapeToPolygon: () => import_canvas10.shapeToPolygon,
-  sideToPosition: () => import_canvas9.sideToPosition,
-  simplifyRing: () => import_canvas10.simplifyRing,
-  snapNodeDrag: () => import_canvas9.snapNodeDrag,
-  subtractPolygons: () => import_canvas10.subtractPolygons,
-  toggleLockNodes: () => import_canvas9.toggleLockNodes,
-  unionPolygons: () => import_canvas10.unionPolygons,
-  unlockNodes: () => import_canvas9.unlockNodes,
+  alignNodes: () => import_canvas12.alignNodes,
+  applyConstraints: () => import_canvas15.applyConstraints,
+  applyNodeUpdates: () => import_canvas12.applyNodeUpdates,
+  applyShapeCombination: () => import_canvas13.applyShapeCombination,
+  blendLayout: () => import_canvas14.blendLayout,
+  boundsOf: () => import_canvas14.boundsOf,
+  calculateDagreReflowDisplacement: () => import_canvas14.calculateDagreReflowDisplacement,
+  calculateDirectionalDisplacement: () => import_canvas14.calculateDirectionalDisplacement,
+  canCombineShapeNodes: () => import_canvas13.canCombineShapeNodes,
+  canvasHeight: () => import_canvas14.canvasHeight,
+  centerNodes: () => import_canvas14.centerNodes,
+  centre: () => import_canvas14.centre,
+  clampLayoutSize: () => import_canvas15.clampLayoutSize,
+  combineShapeNodes: () => import_canvas13.combineShapeNodes,
+  computeNodesBoundingBox: () => import_canvas14.computeNodesBoundingBox,
+  computeSnapGuides: () => import_canvas12.computeSnapGuides,
+  connectedOnly: () => import_canvas14.connectedOnly,
+  createBezierTrajectory: () => import_canvas14.createBezierTrajectory,
+  createCanvasAutoLayoutController: () => import_canvas15.createCanvasAutoLayoutController,
+  createCanvasScenesStore: () => import_canvas12.createCanvasScenesStore,
+  createFanOutTrajectory: () => import_canvas14.createFanOutTrajectory,
+  createGuideIndex: () => import_canvas12.createGuideIndex,
+  createNodeGuideIndex: () => import_canvas12.createNodeGuideIndex,
+  cubicPointAt: () => import_canvas11.cubicPointAt,
+  cubicsToPathData: () => import_canvas11.cubicsToPathData,
+  defaultEasing: () => import_canvas14.defaultEasing,
+  distributeNodes: () => import_canvas12.distributeNodes,
+  dividePolygons: () => import_canvas13.dividePolygons,
+  ensureLayout: () => import_canvas14.ensureLayout,
+  estimateCanvasHeight: () => import_canvas14.estimateCanvasHeight,
+  estimateNodeSize: () => import_canvas14.estimateNodeSize,
+  findConnectorSnap: () => import_canvas12.findConnectorSnap,
+  fitCubicRun: () => import_canvas11.fitCubicRun,
+  fitCubics: () => import_canvas11.fitCubics,
+  fitFreehandPath: () => import_canvas11.fitFreehandPath,
+  fitPathData: () => import_canvas11.fitPathData,
+  fitViewportToNodes: () => import_canvas12.fitViewportToNodes,
+  fitViewportToRect: () => import_canvas12.fitViewportToRect,
+  flattenSvgPath: () => import_canvas13.flattenSvgPath,
+  flowSide: () => import_canvas14.flowSide,
+  getAbsolutePosition: () => import_canvas12.getAbsolutePosition,
+  getAutoLayout: () => import_canvas15.getAutoLayout,
+  getAutoLayoutGrid: () => import_canvas15.getAutoLayoutGrid,
+  getAutoLayoutInsertTarget: () => import_canvas15.getAutoLayoutInsertTarget,
+  getCenteredNodePosition: () => import_canvas14.getCenteredNodePosition,
+  getChildLayout: () => import_canvas15.getChildLayout,
+  getFlowChildren: () => import_canvas15.getFlowChildren,
+  getLayoutParent: () => import_canvas15.getLayoutParent,
+  getLayoutSizing: () => import_canvas15.getLayoutSizing,
+  getLayoutedNodes: () => import_canvas14.getLayoutedNodes,
+  getNodeRect: () => import_canvas12.getNodeRect,
+  getNodeShape: () => import_canvas13.getNodeShape,
+  getNodeSize: () => import_canvas12.getNodeSize,
+  getResizingNodeRect: () => import_canvas11.getResizingNodeRect,
+  getShapeRenderData: () => import_canvas13.getShapeRenderData,
+  getShapeSvg: () => import_canvas13.getShapeSvg,
+  handlePoint: () => import_canvas12.handlePoint,
+  inferResizeHandle: () => import_canvas11.inferResizeHandle,
+  intersectPolygons: () => import_canvas13.intersectPolygons,
+  invertNodeUpdates: () => import_canvas12.invertNodeUpdates,
+  isAutoLayoutFrame: () => import_canvas15.isAutoLayoutFrame,
+  isEventFromTextInput: () => import_canvas14.isEventFromTextInput,
+  isLocked: () => import_canvas12.isLocked,
+  isMeasureModifierHeld: () => import_canvas11.isMeasureModifierHeld,
+  isShapeDescription: () => import_canvas13.isShapeDescription,
+  isShapeNode: () => import_canvas13.isShapeNode,
+  isStraightCubic: () => import_canvas11.isStraightCubic,
+  isValidCanvasNode: () => import_canvas14.isValidCanvasNode,
+  isValidUrl: () => import_canvas14.isValidUrl,
+  layoutAll: () => import_canvas15.layoutAll,
+  layoutBounds: () => import_canvas14.layoutBounds,
+  layoutFrame: () => import_canvas15.layoutFrame,
+  layoutUp: () => import_canvas15.layoutUp,
+  layoutUpMany: () => import_canvas15.layoutUpMany,
+  linearPositionTrajectory: () => import_canvas14.linearPositionTrajectory,
+  linearTrajectory: () => import_canvas14.linearTrajectory,
+  lockNodes: () => import_canvas12.lockNodes,
+  makeSizingCoherent: () => import_canvas15.makeSizingCoherent,
+  matchArrangeShortcut: () => import_canvas12.matchArrangeShortcut,
+  matchSize: () => import_canvas12.matchSize,
+  measureBetween: () => import_canvas11.measureBetween,
+  measureLabel: () => import_canvas11.measureLabel,
+  measureSelection: () => import_canvas11.measureSelection,
+  measureToLine: () => import_canvas11.measureToLine,
+  mergeNodeUpdates: () => import_canvas15.mergeNodeUpdates,
+  moveLayoutChild: () => import_canvas15.moveLayoutChild,
+  multiPolygonArea: () => import_canvas13.multiPolygonArea,
+  multiPolygonBounds: () => import_canvas13.multiPolygonBounds,
+  nearestHandlePositions: () => import_canvas12.nearestHandlePositions,
+  oppositePosition: () => import_canvas12.oppositePosition,
+  overlaps: () => import_canvas14.overlaps,
+  parseCanvasClipboardData: () => import_canvas14.parseCanvasClipboardData,
+  parseCanvasScenes: () => import_canvas12.parseCanvasScenes,
+  parseSvgPath: () => import_canvas13.parseSvgPath,
+  placeBeside: () => import_canvas14.placeBeside,
+  pointInMultiPolygon: () => import_canvas13.pointInMultiPolygon,
+  pointInRings: () => import_canvas13.pointInRings,
+  polygonArea: () => import_canvas13.polygonArea,
+  polygonBoolean: () => import_canvas13.polygonBoolean,
+  polygonToSvgPath: () => import_canvas13.polygonToSvgPath,
+  positionToSide: () => import_canvas12.positionToSide,
+  readStyleSize: () => import_canvas12.readStyleSize,
+  realClock: () => import_canvas14.realClock,
+  relayoutUpdates: () => import_canvas15.relayoutUpdates,
+  remapPastedNodes: () => import_canvas14.remapPastedNodes,
+  reorderNodes: () => import_canvas12.reorderNodes,
+  repositionNodesTo: () => import_canvas14.repositionNodesTo,
+  resizeHandleAxes: () => import_canvas11.resizeHandleAxes,
+  resolvePadding: () => import_canvas15.resolvePadding,
+  revertShapeCombination: () => import_canvas13.revertShapeCombination,
+  ringSignedArea: () => import_canvas13.ringSignedArea,
+  runMultiNodeTransition: () => import_canvas14.runMultiNodeTransition,
+  serializeCanvasNodes: () => import_canvas14.serializeCanvasNodes,
+  shapeNodeToPolygon: () => import_canvas13.shapeNodeToPolygon,
+  shapeToPolygon: () => import_canvas13.shapeToPolygon,
+  sideToPosition: () => import_canvas12.sideToPosition,
+  simplifyRing: () => import_canvas13.simplifyRing,
+  snapNodeDrag: () => import_canvas12.snapNodeDrag,
+  snapNodeResize: () => import_canvas11.snapNodeResize,
+  snapResize: () => import_canvas11.snapResize,
+  snapToGrid: () => import_canvas11.snapToGrid,
+  subtractPolygons: () => import_canvas13.subtractPolygons,
+  toggleLockNodes: () => import_canvas12.toggleLockNodes,
+  unionPolygons: () => import_canvas13.unionPolygons,
+  unlockNodes: () => import_canvas12.unlockNodes,
   useCanvasArrange: () => useCanvasArrange,
   useCanvasArrangeShortcuts: () => useCanvasArrangeShortcuts,
+  useCanvasAutoLayout: () => useCanvasAutoLayout,
   useCanvasClipboard: () => useCanvasClipboard,
   useCanvasDocking: () => useCanvasDocking,
   useCanvasExplosion: () => useCanvasExplosion,
   useCanvasGraph: () => useCanvasGraph,
   useCanvasLayout: () => useCanvasLayout,
+  useCanvasMeasure: () => useCanvasMeasure,
   useCanvasScenes: () => useCanvasScenes,
   useCanvasShortcuts: () => useCanvasShortcuts,
   useStreamingCanvas: () => useStreamingCanvas,
-  withStyleSize: () => import_canvas9.withStyleSize,
-  xorPolygons: () => import_canvas10.xorPolygons
+  withStyleSize: () => import_canvas12.withStyleSize,
+  xorPolygons: () => import_canvas13.xorPolygons
 });
 module.exports = __toCommonJS(canvas_exports);
 
@@ -904,6 +947,9 @@ function useCanvasArrange(options) {
       get rectOptions() {
         return optionsRef.current.rectOptions;
       },
+      get autoLayout() {
+        return optionsRef.current.autoLayout;
+      },
       onGuidesChange: setGuides
     }),
     []
@@ -1008,12 +1054,13 @@ function CanvasGuidesLayer({
   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__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "svg",
     {
       className: `pixerate-canvas-guides ${className}`,
@@ -1027,35 +1074,127 @@ function CanvasGuidesLayer({
         zIndex: 10
       },
       "aria-hidden": "true",
-      children: guides.map((guide, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "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__ */ (0, import_jsx_runtime2.jsx)(
+            "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__ */ (0, import_jsx_runtime2.jsxs)(
+            "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__ */ (0, import_jsx_runtime2.jsx)("rect", { width, height: 16, rx: 3, fill: measureColor }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "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
+var import_react10 = require("react");
+var import_canvas8 = require("@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] = (0, import_react10.useState)(null);
+  const [modifier, setModifier] = (0, import_react10.useState)(false);
+  const optionsRef = (0, import_react10.useRef)(options);
+  optionsRef.current = options;
+  (0, import_react10.useEffect)(() => {
+    if (!enabled) return;
+    const target = targetElement ?? (typeof window !== "undefined" ? window : null);
+    if (!target) return;
+    const onKey = (event) => setModifier((0, import_canvas8.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 = (0, import_react10.useMemo)(() => {
+    if (!active) return EMPTY;
+    const ids = optionsRef.current.getSelectedIds?.() ?? nodes.filter((n) => n.selected).map((n) => n.id);
+    return (0, import_canvas8.measureSelection)(nodes, ids, hoveredId, rectOptions);
+  }, [active, nodes, hoveredId, rectOptions]);
+  const onNodeMouseEnter = (0, import_react10.useCallback)((event, node) => {
+    setHoveredId(node.id);
+    if (event && typeof event.altKey === "boolean") setModifier(event.altKey);
+  }, []);
+  const onNodeMouseLeave = (0, import_react10.useCallback)((_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
-var import_canvas9 = require("@pixerate/editor/canvas");
+var import_canvas11 = require("@pixerate/editor/canvas");
+var import_canvas12 = require("@pixerate/editor/canvas");
 
 // src/canvas/ShapeNode.tsx
-var import_canvas8 = require("@pixerate/editor/canvas");
+var import_canvas9 = require("@pixerate/editor/canvas");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function ShapeNode({ data, width, height, selected, className = "", children }) {
   const shape = data?.shape;
-  if (!(0, import_canvas8.isShapeDescription)(shape)) return null;
-  const render = (0, import_canvas8.getShapeRenderData)(shape, { width, height });
+  if (!(0, import_canvas9.isShapeDescription)(shape)) return null;
+  const render = (0, import_canvas9.getShapeRenderData)(shape, { width, height });
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
@@ -1095,22 +1234,78 @@ function ShapeNode({ data, width, height, selected, className = "", children })
 }
 
 // src/canvas/index.ts
+var import_canvas13 = require("@pixerate/editor/canvas");
+var import_canvas14 = require("@pixerate/editor/canvas");
+var import_canvas15 = require("@pixerate/editor/canvas");
+
+// src/canvas/useCanvasAutoLayout.ts
+var import_react11 = require("react");
 var import_canvas10 = require("@pixerate/editor/canvas");
-var import_canvas11 = require("@pixerate/editor/canvas");
+function useCanvasAutoLayout(options) {
+  const [guides, setGuides] = (0, import_react11.useState)([]);
+  const nodesRef = (0, import_react11.useRef)(options.nodes);
+  nodesRef.current = options.nodes;
+  const optionsRef = (0, import_react11.useRef)(options);
+  optionsRef.current = options;
+  const controller = (0, import_react11.useMemo)(
+    () => (0, import_canvas10.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
+    }),
+    []
+  );
+  (0, import_react11.useLayoutEffect)(() => {
+    if (controller.hasPending) controller.flush();
+  }, [options.nodes, controller]);
+  return (0, import_react11.useMemo)(
+    () => ({
+      ...controller,
+      /** Drop marker of the active reorder drag (flow coordinates). */
+      guides,
+      get hasPending() {
+        return controller.hasPending;
+      }
+    }),
+    [controller, guides]
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AUTO_LAYOUT_DATA_KEY,
   AgentPresenceLayer,
+  CHILD_LAYOUT_DATA_KEY,
   CONNECTION_LINE_TYPES,
   CanvasGuidesLayer,
   CanvasScenesStore,
   DEFAULT_ARRANGE_SHORTCUTS,
   ManualClock,
+  RESIZE_HANDLES,
   SHAPE_DATA_KEY,
   SHAPE_KINDS,
   SHAPE_NODE_TYPE,
   SHAPE_OPERATIONS,
   ShapeNode,
   alignNodes,
+  applyConstraints,
   applyNodeUpdates,
   applyShapeCombination,
   blendLayout,
@@ -1121,15 +1316,19 @@ var import_canvas11 = require("@pixerate/editor/canvas");
   canvasHeight,
   centerNodes,
   centre,
+  clampLayoutSize,
   combineShapeNodes,
   computeNodesBoundingBox,
   computeSnapGuides,
   connectedOnly,
   createBezierTrajectory,
+  createCanvasAutoLayoutController,
   createCanvasScenesStore,
   createFanOutTrajectory,
   createGuideIndex,
   createNodeGuideIndex,
+  cubicPointAt,
+  cubicsToPathData,
   defaultEasing,
   distributeNodes,
   dividePolygons,
@@ -1137,33 +1336,60 @@ var import_canvas11 = require("@pixerate/editor/canvas");
   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,
@@ -1181,9 +1407,12 @@ var import_canvas11 = require("@pixerate/editor/canvas");
   positionToSide,
   readStyleSize,
   realClock,
+  relayoutUpdates,
   remapPastedNodes,
   reorderNodes,
   repositionNodesTo,
+  resizeHandleAxes,
+  resolvePadding,
   revertShapeCombination,
   ringSignedArea,
   runMultiNodeTransition,
@@ -1193,17 +1422,22 @@ var import_canvas11 = require("@pixerate/editor/canvas");
   sideToPosition,
   simplifyRing,
   snapNodeDrag,
+  snapNodeResize,
+  snapResize,
+  snapToGrid,
   subtractPolygons,
   toggleLockNodes,
   unionPolygons,
   unlockNodes,
   useCanvasArrange,
   useCanvasArrangeShortcuts,
+  useCanvasAutoLayout,
   useCanvasClipboard,
   useCanvasDocking,
   useCanvasExplosion,
   useCanvasGraph,
   useCanvasLayout,
+  useCanvasMeasure,
   useCanvasScenes,
   useCanvasShortcuts,
   useStreamingCanvas,